必要に迫られたのでFlutterを学びます④～StatefulWidget編～

Qiitaのマイページを久しぶりに見たのですが、私が書いた記事で一番View数が多かったのがマネロンに関する記事でした。
みんな技術情報よりもマネロンの情報を欲している。。。
FATFの対日審査結果をまとめる審議が6月下旬に実施されて、8月中旬位に結果発表の予定です(コロナ禍で予定変わるかもですが)
おそらく日本の場合は現状200万円以上の取引の場合身分の確認等が必須でしたが、まずはこれが100万円になるんじゃないでしょうか。
また仮想通貨やフリマアプリの扱いも厳しくなる気がします。
資金移動行と収納代行サービスの境目などが規定されたりするかもしれませんし、気が向いたら記事に纏めようと思います。

環境構築編　
Hello World編
外部パッケージ利用編
StatefulWidget利用編　⇐　今ここ

第五章 StatefulWidget

StatelessWidgetを大まかに学んだので、StatefulWidgetにも手を出します。
基本的なStatefulWidgetの扱い方は、下記の形となるようです。

class HogeWidget extends StatefulWidget{
  @override
  HogeState createState() => HogeState();
}

class HogeState extends State<HogeWidget>{
  @override
  Widget build(BuildContext context){
    return Text('I am Foo');
  }
}

StatefulWidgetを継承したWidgetクラスはbuildクラスを持つわけでなくて、
Stateを継承したStateクラス(この表現が正しいかは分からないが)を呼び出すcreateStateメソッドを持つだけみたいです。
つまり細かい動きはStateクラスにお任せして、StatefulWidgetクラスはそれを呼び出し、結果を受け取るようなイメージですね。

なので前回の記事の最後に載せたものと、上のコードを合体させると下記の通りとなります。

main.dart

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
import 'package:flutter/rendering.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var num = 5;
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: 
          ListView.builder(
            itemCount: num,
            itemBuilder:(context, int index){
              return Padding(
                padding: EdgeInsets.all(20.0),
                child: HogeWidget()
              );
            }
          )
      ),
    );
  }
}

class HogeWidget extends StatefulWidget{
  @override
  HogeState createState() => HogeState();
}

class HogeState extends State<HogeWidget>{
  @override
  Widget build(BuildContext context){
    return Text('I am Foo');
  }
}

「I am Foo」ばかりを表示させても面白くないので、下記の通り変更してみます。

main.dart

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
import 'package:flutter/rendering.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: const Text('Welcome to Flutter'),
        ),
        body: 
          HogeWidget()
      ),
    );
  }
}

class HogeWidget extends StatefulWidget{
  @override
  HogeState createState() => HogeState();
}

class HogeState extends State<HogeWidget>{
  var num = 10;
  @override
  Widget build(BuildContext context){
    return ListView.builder(
      itemCount: num,
      itemBuilder:(context, int index){
        return Padding(
          padding: EdgeInsets.all(8.0),
          child: Text(
            nouns[index],
          )
        );
      }
    );
  }
}

コードの通り、ListView.buildのメソッドをStatefulWidgetを継承したHogeWidgetに処理を任せることにしました。

とりあえずここまで、休憩はさみながら5時間くらいですか。
まだ実装できるレベルには達していませんが、なんとなく感覚はつかめた気がします。
公式でチュートリアル等が充実しているので、在宅ワークのお暇なときにでもキャッチアップしてみてはいかがでしょうか。