インドネシアのPT.AQ Business Consulting IndonesiaでFlutterのエンジニア兼アドバイザーをしております菊池と申します。
Zennで本を出版しておりますflutter chips(30,000字程度)
本記事で伝えること
- Flutterを用いた簡単なアプリ開発デモ
- 開発効率をあげるTips
- デバッグ方法
- おすすめパッケージ
- アーキテクチャ紹介
- やっておいたほうが良いこと
- 知っておいて損しないこと
- 情報収集源
本記事を読む前に
本記事を読む前提として以下を実施済みですと、より内容が理解しやすいかと思います。
- Flutterの環境構築
以下の弊記事を参考にして環境構築を進めていただければと思います。
【Flutter】アプリ開発入門 Flutter環境構築 Hello Flutter!!
簡単なデモ
webviewアプリ作成
ソースコード
開発効率あげる方法
AndroidStudio プラグイン
詳細な内容は弊記事【Flutter】モバイルアプリ高速開発プラットフォームをさらに爆速化するTipsを参照ください。
おすすめプラグイン
- FlutterSnippets
- Flutter Enhancement Suite
- Flutter Pub Version Checker
- flutter-img-sync
- FlutterJsonBeanFactory
静的解析
詳細な内容はこちらの記事Dart/Flutter の静的解析強化のススメを参照してください。
実装方法
- インストール
pedantic_monoパッケージをインストール。
dev_dependencies:
pedantic_mono: any
- analysis_options.yamlの配置
https://github.com/mono0926/pedantic_mono/blob/master/example/analysis_options.yaml をプロジェクトのルートに置く。以上。
デバッグ方法
break point
break pointを用いて、ソースコード実行中の途中で停止させることで、各変数に格納されている値を確認できます。デバッグ時に必須の手法になります。以下の記事などで詳しく紹介されています。
debug tool
詳細は弊記事【Flutter】インターフェース開発に強いFlutterで、さらにUI開発を加速させるテクニックを参照してください。
おすすめパッケージ
flutter_svg
SVG画像をFlutter内で扱う際に必須のパッケージ。
アイコンなどはPNG等のピクセル画像で入れると画像がボケたりしてしまうので、極力ベクター画像を使うようにしましょう。
auto_size_text
テキストのサイズを動的に変更。端末の横幅によって収まらない場合や長いテキストの入力値に対しても、ほとんど意識せずに適応してくれる。
やっておいたほうが良いこと
FVMでのFlutterのバージョン管理
Flutterはアップデートが頻繁に行われ、複数人でプロジェクトを進行する上では、Flutterのバージョンを合わせて開発する必要があります。
その上で、Flutterのバージョンをローカル上に複数共存させて、簡単に切り替えを行えるようにできるツールがFVMです。
↓↓↓使用方法は弊記事を参考にしてください↓↓↓
情報収集源
公式関連
monoさん Medium
知っておいても良いこと
DartPad
DartやFlutterのコードをブラウザ上で実行できるサイト。
ちょっとしたコードの確認などを行う際に便利です。
クローンアプリ系
TwitterやWhatsApp,Slackなどのクローンアプリを作成して公開してくれている方がいます。
参考にできる点も多いかと。