[開発者日記] タスクメモアプリ開発５日目

NattoMilk

2022年12月24日 17:55

４日目はFlutter公式のページを参考にしてボタンを配置のみを行いました。
実装中に、StatefulWidgetとはなんだろうと思い調査してみました。

Widgetとは

私は初学者なので復習・確認のためにWidgetの再確認をします。
公式よりWidgetとは、

In Flutter, the rough equivalent to a UIView is a Widget
# 訳：フラッターでは一つのUIViewが一つのウィジェットに相当します

Flutter 公式より(参考URL: https://docs.flutter.dev/get-started/flutter-for/ios-devs)

と書いてありましたので、どうやらUIViewの位置づけなのですね。

StatefulWidgetとは

StatefulWidgetのStatefulの意味がわからなかったのでググってみました。

ステートフルとは、システムが現在の状態を表すデータなどを保持しており、その内容を処理に反映させる方式。同じ入力に対する出力が常に同じとは限らず、内部の状態次第で変わることがある。

IT用語辞典より

ということなので、
StatefulWidgetは同じ入力なんだけれども、内部のロジック次第で出力結果が変わるWidgetのようです。

Statefulの対義語はStateless

Statefulの対義語はStatelessで、実際にFlutterにStatelessWidgetがありました。Statelessとは、

ステートレスとは、システムが現在の状態を表すデータなどを保持せず、入力の内容によってのみ出力が決定される方式。同じ入力に対する出力は常に同じになる。

とのことですので、StatelessWidgetは同じ入力値なら出力結果が同じになるWidgetのようです。実際に使う際には、

StatelessWidgets are useful when the part of the user interface you are describing does not depend on anything other than the initial configuration information in the widget.
StatelessWidgets は、記述しているユーザーインターフェイスの部分がウィジェットの初期構成情報以外に依存しない場合に役立ちます。

For example, in iOS, this is similar to placing a UIImageView with your logo as the image. If the logo is not changing during runtime, use a StatelessWidget in Flutter.
たとえば、iOS では、ロゴをイメージとして UIImageView を配置するのと似ています。実行時にロゴが変化しない場合は、Flutter で StatelessWidget を使用します。

Flutter公式より

ということなので、アプリ内で表示するときに変更数必要ない画像やテキストのUIをStatelessWidgetで構成しろよってことかな。

意味がわかったところで実装してみる

状態を変化させる必要がないStatelessWidgetを簡単に実装してみます。
MaterialApp クラスを使用してテキストウィジェットを実装してみました。

import 'package:flutter/material.dart';

void main() {
  runApp(TextWidget());
}

class TextWidget extends StatelessWidget {
  const TextWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello World.'),
        ),
      ),
    );
  }
}

いい感じで表示することができました☺
それにしても、MaterialAppクラスの使い方やScaffoldの意味やbuild関数の意味や全然わかりませんでした。
なんとなく公式サイトのドキュメントをパクってきた感じですorz

明日やること

今日はStatelessWidgetをなんとなく実装してみました。
MaterialAppクラスやScaffoldの意味を調べてみようと思います。
全然、進んでないしちょっと勉強量を増やさんとなぁ笑

今日はクリスマスイブなのでお酒飲んだり美味しいものを食べたりするので、今日はここまで！🎅

[開発者日記] タスクメモアプリ開発 ５日目