いろいろ備忘録日記

主に .NET とか Go とか Flutter とか Python絡みのメモを公開しています。

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には、「状態を持たないウィジェット」と「状態を持つウィジェット」の2つが存在していて

それぞれ

  • 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.html
class 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'),
        ),
      ),
    );
  }
}

libディレクトリの下は以下のような感じ。

f:id:gsf_zero1:20210725154310p:plain

実行すると以下のようになります。

f:id:gsf_zero1:20210725154507p:plain

ウィジェットを差し替えただけなので、当然何も変わりません。

参考情報

Flutter は本家のドキュメントだけでなく、YouTube上での動画も沢山用意されているので、リソースには困りませんね。めっちゃ分かりやすいです。

youtu.be

youtu.be

api.flutter.dev


過去の記事については、以下のページからご参照下さい。

  • いろいろ備忘録日記まとめ

devlights.github.io

サンプルコードは、以下の場所で公開しています。

  • いろいろ備忘録日記サンプルソース置き場

github.com

github.com

github.com