アイマナ – ITを学ぼう

Flutter in Focusを見る その1

Flutter

こんにちは。Flutterでアプリ開発を行っているNaoyaです。Flutterにはたくさんの素晴らしいドキュメントや解説動画がありますが、今回はその中でもYoutubeのFlutter in Focusを見ていこうと思います。各動画の内容を簡単にまとめていきます。（その2はこちら）

YouTubeのプレイリストはこちら

目次

1 Introducing Flutter in Focus!

1分ぐらいの導入動画なので省略

2 Building your first Flutter Widget

まとめ

  • Flutterでは全てのボタンやそれを囲う枠や画面自体もWidgetというものとして扱う
  • TextやButtonなど様々なWidgetがある
  • RowにmainAxisSizeというプロパティがある
    • 動画内ではRawMaterialButton > Padding > Row という階層のRowにそれを使っている。ボタンが横に伸びないようにMainAxisSize.minを使っている
  • RotatedBox : childのWidgetを回転させることができる
  • PulseAnimator : 点滅アニメーションを実装できる

3 Using Material Design with Flutter

まとめ

  • FlutterのMaterial Componentsはここにまとまっている
  • Scaffold Widgetを使えばAppBarを含めたマテリアルデザインの画面を簡単に作ることができる
  • Textの文字のスタイルをヘッダーのようにしたい場合、Text Widgetのstyleプロパティを変更する
    • Theme.of(context).textTheme.headline を使えば各Textで逐一styleを記述しなくても統一したヘッダー文字のデザインを適用できる
  • MaterialAppのthemeプロパティにThemeDataを渡せばデフォルトのテーマにThemeDataに渡したプロパティだけがマージされる
  • GestureDetectorでWidgetをラップすれば、そのWidgetが「タップされたとき」などのイベントを実装できる
  • ダイアログを表示する1つのWidgetの例としてSimpleDialogが存在する
  • URL指定で画像を表示するには Image.network('https://sample.jpg')を使う
  • SimpleDialogのcontentPaddingにEdgeInsets.zeroを渡せば余白を消すことができる
  • ColumnのcrossAxisAlignmentにCrossAxisAlignment.stretchを渡せば、Columnとcross(交差)する方向、つまり横方向に両端揃えができる
  • Textのstyleに textTheme.display1を使えばヘッダー、textTheme.subheadを使えばサブヘッダー、textTheme.body1を使えば本文のスタイルを適用できる
  • Wrap Widgetを使えば、RowやColumnの様にWidgetを囲むことができる
    • RowやColumnと違うのは、もし画面からはみ出るようなWidgetを囲んだ場合、Wrapなら自動で改行してくれる（参考）
  • Align Widgetで囲めば右寄せ、左寄せなどが実現できる
  • ThemeDataのbuttonColorはRaisedButtonの色を指定するためのプロパティ（参考）
  • ThemeDataのbuttonThemeはRaisedButtonだけでなく、ボタン全般のテーマを設定できるプロパティ（参考）

4 Introducing Flutter Widgets 101

1分ぐらいの導入動画なので省略。
（ただし緩いFlutterエンジニアどうしの会話で見ていて楽しいのでおすすめ笑　動画）

5 How to Create Stateless Widgets

まとめ

  • Widgetの背景を変更したい場合は、そのWidgetをDecoratedBoxでラップし、decorationプロパティを変更する
  • Widgetのかたまりをまた別のWidgetとして定義できる
    • その際、TextFieldの入力値のようにユーザーの操作によって表示が変わるようなものはStateful Widget、そういったものが無い場合はStateless Widgetを使うと良い
  • クラスのメンバが全てfinalな場合、const constructorを利用できる

Widgetのbuildメソッドはいつ呼ばれるのか？

  • WidgetはアプリのUI1つ1つの部品の設定を持っている、言うなれば設計図のようなもの。ではそれは何のための設計図かというと、Elementのためのものである。
  • Elementとは実際に画面上に表示されるものである
  • Widgetクラスはそれぞれ対応するElementクラスとそのインスタンスを生成するメソッドを持っている。StatelessWidgetの場合、StatelessElementを生成できるcreateElementメソッドがある。（参考）
  • このcreateElementメソッドは、Widgetがツリーにマウントされたときに呼ばれる。
  • そしてそのElementが対応するWidgetへの参照を持った状態でElementツリーに追加される
  • ElementがElementツリーに追加されたタイミングで、Elementが設計図であるWidgetに、自分が子要素を持っているかを問い合わせ、Widgetのbuildメソッドが呼ばれる。
  • その後同様に小要素のElementが作成されていく
  • つまり、この時点で2つのツリーが存在する。
    • 1つは実際に画面に表示されるElementのツリー
    • もう1つは設計図となるWidgetのツリー
  • ではこれらの処理を開始する元となるのは何かと言うと、runAppメソッドである。runAppメソッドはWidgetを受け取りそれをアプリのroot elementとしてマウントする
  • 画面の描画の流れをまとめると
    • Widgetを作る
    • それらを使ってElementを作る
    • 全てbuildされたら画面に描画する

となる