Flutterでメモアプリを作る(3)StatelessWidgetとStatefulWidget

9kai

[範囲]

StatelessWidgetとStatefulWidget。

[解説]

今回解説するコードの全体像です。

//テーブル:地面
class MyApp extends StatelessWidget {
 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'mihon1',
     theme: ThemeData(
     ),
     home: AppMain(title: 'mihon1'),
   );
 }
}

//テーブルクロス:土台
//_AppmainStateはこのAppMainクラスを継承しているので
//削除するとエラーになり動かなくなります。
class AppMain extends StatefulWidget{

 AppMain({Key key, this.title}) : super(key: key);
 final String title;

//テーブルクロスの上に載せるワインボトル・グラスの作成
 @override
 _AppMainState createState() => _AppMainState();
}


[MyApp]

//テーブル:地面
class MyApp extends StatelessWidget {
 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'tlmemo',
     theme: ThemeData(
     ),
     home: AppMain(title: 'tlmemo'),
   );
 }
}

MyAppの部分はご自分のプログラムで半角英数字であれば自由に変更できます。

StatelessWidgetは状態変更(ほぼ全ての画面の変更)ができません。

なので、あくまでもアプリを作る際の土台づくりの一環と思っていただければと思います。

(参考リンク)

Widget build(BuildContext context) {

Widget buildは画面に反映するための構文です。

このコードプロジェクトを作成する際に自動生成されるので、1から書く必要はありません。

私自身深く理解しているとは言えないため、参考リンクをご覧ください。

(参考リンク)

盛大に文字化けしていますが、リンク先のタイトルは「Flutter の Widget ツリーの裏側で起こっていること」です・


[AppMain]

class AppMain extends StatefulWidget{

 AppMain({Key key, this.title}) : super(key: key);
 final String title;

 @override
 _AppMainState createState() => _AppMainState();
}

こちらもAppMainの名前は半角英数字であれば自由に変更できます。

StatefulWidgetは状態の変更などが可能なため、アプリを作る際はこちらを主に編集することになります。

その割にWidget buildがなく、行数がかなり少ないですがこれには理由があります。

FlutterはDartで動いています、Dartはオブジェクト指向言語です。

オブジェクト指向言語はクラス(AppMain)を作るだけではクラスを使うことができません。

クラスを使うためにはインスタンスを使う必要があります。

下記の参考サイトでたこ焼き器とたこ焼きの関係と説明された時にすごく納得が行きました。

私はかなりの頻度でインスタンスの生成を忘れます。

(参考リンク)


AppMain(の後の項目はコンストラクタと言うもので、私自身理解が十分ではないので、参考サイトの紹介に留めさせていただきます。

(参考サイト)

コンストラクタについて

finalについて


@overrideは受け継いだStatefulWidgetクラスとは異なるAppMain個別の設定などを記述する宣言のようなものです。

(参考リンク)

長いですが、「メンバーたちのオーバライド」に記述があります。


  _AppMainState createState() => _AppMainState();

この行ではクラスからインスタンスを生成しています。

もう少し詳しく解説すると、「ステート名 createState() => ステート名();」となります。

変更できないのは「createState() =>」と「();」です。

それ以外はご自分で作られるプログラムに合わせてご変更ください。

ステート名の先頭についている_は安全性を上げるためにつける記号です。

Javaと言う言語のprivateに相当します。

(参考リンク)

はじめにの真ん中あたりにあります。

一番下で解説されています。


[最後に]


今回はアプリの土台になるMyApp(Stateless Widget)と表示される画面の元になるAppMain(StatefulWidget)の解説を行いました。

次回は生成された_AppMainStateの解説に入ります。


(支援のお願い)


病気の後遺症が深刻なため、私は一般的な労働ができない状態です。
2ヶ月ごとに障害者年金(10万円/月)が振り込まれますが、生活には足りない状況です。
よろしければご支援いただけないでしょうか。
noteのサポート機能、Twitterでのマシュマロ(https://marshmallow-qa.com/ffishfd)または https://9vox2.netlify.com/ にYggDoreでチップをいただけますと幸いです。

この記事が気に入ったらサポートをしてみませんか？