Flutterメモ-04 (StatelessWidget)

概要

今回は StatelessWidget つまり、「状態を持たないウィジェット」についてです。

前回

devlights.hatenablog.com

Flutterのバージョン

$ flutter --version
Flutter 2.2.3• channel stable • https://github.com/flutter/flutter.git
Framework • revision f4abaa0735 (3 weeks ago)• 2021-07-01 12:46:11 -0700
Engine • revision 241c87ad80
Tools • Dart 2.13.4

前回、最小構成で動くモノをつくりました。runApp()がアプリの起動ポイントになり、この関数は Widgetを引数に要求します。 Flutterでは　「すべてがウィジェット」　の世界なので、アプリを表す MaterialAppもウィジェットです。

それをそのまま書いているのが、前回のサンプル。

今回は、そのトップウィジェットを自分で作成したものに差し替えます。

Flutterには、「状態を持たないウィジェット」と「状態を持つウィジェット」の２つが存在していて

それぞれ

StatelessWidget
StatefulWidget

とそのまんまの名前のクラスがいます。これを継承して自分のウィジェットを作り込んでいくのが Flutter流なやり方ですね。

状態を持つ・持たないの判定基準ですが、今のところは「何かの値をフィールドで持つ必要があって、それを元にUIを変化させる必要があるか？」を選定基準にします。

今のアプリは、表示してしまったら何のインタラクションも持っていないので、「状態を持たない」と言えます。

なので、StatelessWidgetです。

サンプル

main.dart

import 'package:flutter/material.dart';

import 'app.dart';

void main() {
  // runApp() に直接 MaterialApp していた部分を app.dart に分離
  runApp(App());
}

app.dart

StatelessWidget を継承した場合、 build メソッドをオーバーライドする必要があります。

ここから作成したウィジェットを返します。

import 'package:flutter/material.dart';

/// [App]は、本アプリのトップウィジェットです.////// [build]では、[MaterialApp]を生成し返しているだけなので/// 状態を持つ必要がありません。なので、[StatelessWidget]を利用しています。////// 状態を持つ必要があるウィジェットを作る場合は [StatelessWidget]から継承します.////// ### References///   - https://api.flutter.dev/flutter/widgets/StatelessWidget-class.htmlclass App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title:'Basic-02 StatelessWidget',
      theme: ThemeData.dark(),
      home: Scaffold(
        body: Center(
          child: Text('Basic-02 StatelessWidget'),
        ),
      ),
    );
  }
}