お久しぶりです。

のりさんです。

梅雨も明けてかなり暑くなってきましたね。

みなさんいかがお過ごしでしょうか。

今回は前回書いた「Flutter(フラッター)」の続きで

Flutterデモアプリのソースコードをみていきたいと思います。

プロジェクトのフォルダをみていくとlibフォルダがあります。

libフォルダはソースコードを入れておくフォルダで

デモアプリのソースコードは「main.dart」という名前で保存されています。

（FlutterはDart言語のため、dartという拡張子になっているようです）

それでは「lib/main.dart」ファイルの中身を上からみていきたいと思います。

①インポート定義

importすることで他のdartファイルの内容を利用できるようにしているようです。

上記の場合はマテリアルデザインを使うためのdartファイルをimportしているようですね。

②main関数

アプリ起動時に最初に呼び出されるのがこのmain関数のようです。

その中でrunApp関数を呼び出してプログラムを実行しています。

・runApp関数とは

引数に渡されたWidget（ウィジェット）から画面を描画をしてくれる関数のようです。

　　参考：https://api.flutter.dev/flutter/widgets/runApp.html

・Widget（ウィジェット）とは

　　FlutterアプリのUIを構成する部品らしいです。

　　イメージとしては以下の感じでしょうか。

・アプリケーション全体（MyAppのMaterialApp）

・画面全体（MyHomePageのScaffold）

・画面パーツ（ScaffoldのText）

・画面レイアウト（ScaffoldのCenterやColumn）

小さいものから大きく纏まっているものまであるということですね。

　デモアプリの場合は、「MyApp()」という部分でWidgetのインスタンスを生成しています。

(Dartではnewを書かなくてもクラスのインスタンス生成が可能だったりします)

③MyApp(Widget)

MyAppはrunApp関数に渡されていたので、アプリ全体のWidgetという感じでしょうか。

　StatelessWidgetという状態を持たないWidgetをベースに作られていて

buildメソッドでは、画面全体をマテリアルデザインにするために

　MaterialAppというWidgetを作って返しているようです。

（見た目をiOSっぽくしたい場合は、CupertinoAppを使うようです）

次にMaterialAppのコンストラクタをみてみます。

　title、theme、homeと名前付き引数で値が渡されていて

　homeでは、さらにMyHomePageというWidgetを作って渡しています。

　このような感じでFlutterではWidgetの中でさらにWidgetを作っていき

　buildメソッドが連鎖して実行され、UIを構築していく仕組みになっているようですね。

④MyHomePage(Widget)

MyAppにあるMaterialAppのhomeで渡されていたWidgetです。

こちらはStatefulWidgetという状態を持っているWidgetをベースに作られているようです。

　状態を持たせるためにcreateStateメソッドでStateを作っているようですね。

　（デモの場合は_MyHomePageStateというStateを作っています）

⑤_MyHomePageState(State)

こちらはMyHomePage(Widget)用のState(状態)クラスです。

ソースをみてみるとStateの方にbuildメソッドがありますね。

　StatelessWidgetでは、Widgetにbuildメソッドがでてきましたが

　StatefulWidgetではStateの方に存在しているようです。

　

もう少し細かくみていきます。

buildメソッド

Scaffold（スキャフォールド）というWidgetを作って返しています。

　　これはマテリアルデザイン用の画面全体を作るための部品のようですね。

（見た目をiOSっぽくしたい場合は、CupertinoPageScaffoldを利用するようです）

Scaffold (Widget)

コンストラクタの引数をみてみるとWidgetを渡してレイアウトを作っているようですね。

引数は

appBar：画面上部に表示するアプリバーの部分です。

AppBar(Widget)のtitleにText(Widget)でタイトルを設定しています。

body：メインコンテンツ部分

Center<中央揃え>やColumn<縦配置>、TextのWidgetを作っています。

テキストにはカウンタ用の_counter変数を利用して表示しているようです。

floatingActionButton：右下に表示される丸いボタン

デモではFloatingActionButtonとボタン押下時等の設定

状態が変わったことを伝えるsetState関数を使うことで

再度buildメソッドが呼ばれて画面が更新されます。

という感じになっているようです。

　　Scaffoldについて画面に枠をつけるとしたらのこんなイメージでしょうか。

今回はデモのソースからFlutterアプリが、どういった動きをしているか書いてみました。

まだまだ知識不足なので簡単なアプリから作っていきたいと思います。