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

2月21日(月曜日)に開催した「Android Studioの使い方TipsLT会」で発表した登壇使用です。

Transcript

1. Flutter開発で便利 だと感じた設定
2. 自己紹介 とんとんぼ 大学3年 専門：物理学　量子コンピュータ モバイルアプリ(特にiOS)が好き Twitter：@Ktombow1110 2
3. 話す内容 ◦ 予測変換で大文字と小文字を区別させない方法 ◦ コードフォーマット(コード整形)の設定と注意点 3
4. 1. 予測変換で大文字と小文字 を区別させない方法 4
5. 背景 ◦ Android Studioでは大文字と小文字を区別しなくてはいけない • XcodeやVScodeでは大文字と小文字を区別しなかった • 統一感を持ちたい 5
6. “ 実際の設定方法 6
7. 設定方法 Mac Preferences(⌘,)　→　Editor　→　General　→　CodeCompletion Windows Setting(Ctrl + Alt + S) →　Editor　→　General　→　CodeCompletion その中の”Match case”のチェックを外す 7
8. 設定前と設定後 8 Before After
9. 2. フォーマット 9
10. 背景 ◦ Dartコードを書く際、コード整形は必要不可欠 ◦ Flutter公式も推奨している ◦ Widgetをネスト構造で記述することで、UIを宣言する ◦ そのため、ネストが深くなり、複雑になる 10
11. “ 実際の設定方法 11
12. 設定方法 右クリック　→　”Reformat Code with dart format” ショートカット Mac：option + ⌘ + L Windows： Ctrl + Alt + L 12
13. “ もっと簡単にフォーマットしたい 13
14. “ セーブすると自動的にフォーマットしてくれる設定がある 14
15. 設定方法 その2 Mac Preferences(⌘,)　→　Editor　 →Languages & Frameworks　 →Flutter Windows Setting(Ctrl + Alt + S) →　Editor　 →Languages & Frameworks　 →Flutter 15
16. 注意点 ◦ 単にフォーマットするのも危険 ◦ 末尾のカンマが必要になる ◦ 関数、メソッドなどの末尾にカンマ(,)を常に追加しなくてはいけない 16
17. カンマがある場合とない場合 17 カンマがある場合 カンマがない場合 画像出典；https://docs.flutter.dev/development/tools/formatting
18. まとめ 予測変換で大文字と小文字を区別させない方法 ◦ CodeCompletionの”Match case”のチェックを外せばOK フォーマット ◦ 右クリック→”Reformat Code with dart format” ◦ Languages & FrameworkのFlutterにある”Format code on Save” ◦ 関数、メソッドなどの最後にカンマを必ずつけること 18
19. THANKS! 参考文献： https://qiita.com/hainare/items/95d028b2e31700ca7217 https://docs.flutter.dev/development/tools/formatting　 19