きっとラボ

プログラミングや自然科学などの話題がメイン

Flutter について自習用メモ 01

しばらく業務で Flutter によるアプリ開発をしていたので、その間に見知ったことを備忘録としてメモしつつ、入門者に伝導する際の台本にできるようなまとめを目指します。自分の言葉で説明できるようになりたいがためです。

最近ではちょっと調べれば大抵の情報は個別に得られるようになりましたが、わかりやすく体系的にまとめた記事がほしいと思いました。

また、ちょっと分かっただけの状態でガリガリ実装したせいでパフォーマンスが著しく悪い結果を生み出す状態も遭遇したことがありますので、その辺も考慮して、「とりあえず使える」ではなく、「実務の中できちんと使える」様になるための具体的な用法をコード例、表示結果とともに(未熟ながら)解説していければと思います。

私自身がモバイルアプリ開発が本業であるため、それを前提とした記事となる見込みです。

目次

 

概要

Flutter を利用することにより、Android / iOS それぞれに対応したアプリを開発するとなった場合、単一のコードで画面実装(とちょっとしたロジック)を認識共有できる。

メリット、デメリットについては解説しているサイトが沢山あるので省きます。別に Flutter の営業がしたいわけではないのです。

Flutter の導入手順等も省きます。Dart 言語に関する習得は以下のサイトが参考になると思います。

簡単に文法の説明があります。使用する際に必要最低限の知識のエッセンスと言ったところでしょうか。Java や Kotlin、Swift といった言語の知識があれば読み進められると思います。

そこそこ詳細な言語仕様のまとめです。

Dart の試し打ちにはこの Dart Pad が便利です。コアライブラリしか利用できませんが、Dart そのものの学習や、ちょっとしたロジックの検証とかに使えます。

 

プログラムの実行ルート

基本

デフォルトの設定なら初期に自動で作成される『main.dart』から呼び出されます。

Main クラスが定義されているわけではなくて、main 関数が直に書かれています。*1

後で記載しますが、Widget とは(画面全体も含め) UI 部品のクラスです。

アプリ起動時に何かしたい場合

runApp を呼ぶ前に必要な処理を呼び出せばよいです。

とすれば実現できるし、完全にプラットフォーム独自の処理をするなら Native 層に実装すれば良いです。*2

 

UI の実装

Flutter ではコードベースで UI 開発

Android も、iOS(今どきならiPadOSも)も Native 開発のときは GUI ベースで好きな UI を画面上に配置して自動で生成してもらえます。(Android なら xml で直接書き込むこともありますね)
Flutter の場合は IDE 上に専用エディターが無く、Dart で直接実装をしていくことになります。

一応 GUI ベースで配置させるツールもあるのですが、個人的には使いづらかったのでおすすめできないです。ただ配置通りにコードを積み重ねていくだけですので、可読性も落ちると思います。

一見するとやりづらそうに思うかもしれませんが、実際にやってみるとそれほど苦にならなかったです。ホットリロードで即座に画面に反映されるからです。常にそれだけで確認できるわけではないですが*3

 

最後に

今日のところはここまでにします。暇を見てちょっとずつコンテンツを充実させていきたいです。

基本的なことは少し調べれば情報を得られるようになってきましたが、凝った表現をしようと思うとどう実装すれば実現できるのか中々分からないこともあります。自分が調べて面白いなと思ったものなんかは紹介していきます。

次回からは開発で必要になる各要素についてまとめていきます。

書いた記事が開発者の方の役に立てば幸いです。

 

*1:Dartでは何らかのクラスに属さない非メンバ関数を定義して利用できます。

*2:Android なら android フォルダーを Android Studio で、iOSなら ios/Runner.xcworkspace を XCode で開いて編集

*3:ホットリロードはあくまで直前の状態に対して UI のビルドをトリガーし、それ以前の前処理とかについては呼ばれず。所感ですが表示中の UI の修正確認に威力を発揮します。