Flutter開発で便利 だと感じた設定

自己紹介 とんとんぼ 大学3年 専門：物理学　量子コンピュータ モバイルアプリ(特にiOS)が好き Twitter：@Ktombow1110 2

話す内容 ○ 予測変換で大文字と小文字を区別させない方法 ○ コードフォーマット(コード整形)の設定と注意点 3

1. 予測変換で大文字と小文字 を区別させない方法 4

背景 ○ Android Studioでは大文字と小文字を区別しなくてはいけない ● XcodeやVScodeでは大文字と小文字を区別しなかった ● 統一感を持ちたい 5

“ 実際の設定方法 6

設定方法 Mac Preferences(⌘,)　→　Editor　→　General　→　CodeCompletion Windows Setting(Ctrl + Alt + S) →　Editor　→　General　→　CodeCompletion その中の”Match case”のチェックを外す 7

設定前と設定後 8 Before After

2. フォーマット 9

背景 ○ Dartコードを書く際、コード整形は必要不可欠 ○ Flutter公式も推奨している ○ Widgetをネスト構造で記述することで、UIを宣言する ○ そのため、ネストが深くなり、複雑になる 10

“ 実際の設定方法 11

設定方法 右クリック　→　”Reformat Code with dart format” ショートカット Mac：option + ⌘ + L Windows： Ctrl + Alt + L 12

“ もっと簡単にフォーマットしたい 13

“ セーブすると自動的にフォーマットしてくれる設定がある 14

設定方法 その2 Mac Preferences(⌘,)　→　Editor　 →Languages & Frameworks　 →Flutter Windows Setting(Ctrl + Alt + S) →　Editor　 →Languages & Frameworks　 →Flutter 15

注意点 ○ 単にフォーマットするのも危険 ○ 末尾のカンマが必要になる ○ 関数、メソッドなどの末尾にカンマ(,)を常に追加しなくてはいけない 16

カンマがある場合とない場合 17 カンマがある場合 カンマがない場合 画像出典；https://docs.flutter.dev/development/tools/formatting

まとめ 予測変換で大文字と小文字を区別させない方法 ○ CodeCompletionの”Match case”のチェックを外せばOK フォーマット ○ 右クリック→”Reformat Code with dart format” ○ Languages & FrameworkのFlutterにある”Format code on Save” ○ 関数、メソッドなどの最後にカンマを必ずつけること 18

THANKS! 参考文献： https://qiita.com/hainare/items/95d028b2e31700ca7217 https://docs.flutter.dev/development/tools/formatting　 19