こんにちは。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
を使っている
- 動画内ではRawMaterialButton > Padding > Row という階層のRowにそれを使っている。ボタンが横に伸びないように
- 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されたら画面に描画する
となる