Flutterの静的ページを勉強してなんとなくまとめてみた

はじめに

Flutter勉強中です。
ページを作る上での基本となる静的ページを作成したいと思います。
見返したらあんまりまとまってない感じになってしまいましたが、せっかく書いたので残しておきます。

今回は勉強したてというのもあり、Dartファイルだけしか使ってません。

環境

Android Studio
Flutter 1.0

StatelessWidget

Flutterで静的ページを生成する際にはStatelessWidgetを使用します。

公式のサンプルコードでもあるHello WorldはStatelessWidgetを継承したMyAppクラスを使用して画面を生成しています。

StatelessWidgetはbuildを実装し、そこにWidgetを返すために実装していきます。
StatelessWidgetを使うにはimport 'package:flutter/material.dart';が必須となっているため、使用するファイルではimportしてあげましょう。

さらに起動するためにはmainが必要となるのと、Flutterで起動するにはrunApp(Widget app)を呼ぶ必要があるようなので、このアプリが最小限での構成となっているということもわかります。
（下のコードは公式からの引用です）

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World.'),
        ),
      ),
    );
  }
}

サンプルとは違いMaterialAppを使用しないで本当の最小のHello Worldはこのような感じです。
Textだけでも表示はされるのですが、Center入れないと左上に表示されてわかりづらいので、入れた方が良いです。
あと、Textはテキストの方向がどっちを向くべきかを持っていないので、textDirectionを必ず指定する必要があります。
MaterialAppはデフォルトで指定が入っているので指定する必要がなかったりするようです。

import 'package:flutter/material.dart';

void main() => runApp(Center(child: Text('Hello world', textDirection: TextDirection.ltr)));

StatelessWidgetのbuildの戻り値がStatefulWidgetなんだけど

MaterialAppの継承元がStatefulWidgetになっていて、StatelessWidgetの継承先のbuildでStatefulWidget返してていいのかがさっぱり分からなかったので、調べてみました。

まず、FlutterはWidgetというのがあります。
これを組み合わせることで画面を作成していくことになりますが、Widget単位で状態を持つか持たないかというのを実装者自身が選択できます。
runAppに与えるWidgetは一番親となるべきというだけで、その子供についてはさらに選択させることが可能ということです。

ただしrunappの引数に渡せるWidgetがStatelessWidgetでなければいけないので、StatelessWidgetを一番親として存在しなければいけないので、子供だけが選択可能というだけのようです。
そして子供がどういうものなのかは特に指定がないため、MaterialAppが指定されて問題ないようです。

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return TestState();
  }
}

I/flutter (11015): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter (11015): The following assertion was thrown while rebuilding dirty elements:
I/flutter (11015): type 'MyApp' is not a subtype of type 'StatelessWidget'

StatelessなWidgetはどのようなものがあるか

そんな訳で大元がStatelessであってもStatefulが中に存在出来るということが分かりました。
なので、完全な静的ページを作成するには全てがStatelessである必要があることになります。
もしくはStatefulであっても書き換えないということもありえるでしょう。
後者はあんまりやらない方が良いとは思っています。

Flutterは多くのWidgetのあり、最初からそれを覚えるのはとても大変なことです。
Flutterの公式サイトにCatalogが存在しているので、やりながら覚えていくのが良いと思います。
https://flutter.io/docs/development/ui/widgets

Stateless一覧とStateful一覧みたいなのがあると自分としてはうれしいので、そのうちまとめてみようかなと思います。
ざっくりとStatelessなのを探しましたが、TextとかIconとかButtonあたりが該当するようです。
あと、ListViewのようなものもStatelessに分類されるようです。

ただ、tatefulな方が多そうなので、完全にStatelessなWidgetだけである程度しっかりしたデザインをStatelessだけで表現するのは難しいかもしれません。

おわりに

Flutterの基礎はWidgetにつまっていると思っていてまずは簡単な静的ページをと思ったのですが、Flutterの思想を知らなければいけませんでした。
RenderObjectWidgetとInheritedWidgetというクラスもStatelessとStatefulとは別に存在していますし、思ったより勉強コストが高そうなので、引き続きやっていきます。
この勉強コストの高さがスマホアプリを全然やってないからなのかまではわからないのですが、どうなんでしょうか。