Flutterのstatefulウィジェット

Flutter の stateful ウィジェット#

Flutter では、ウィジェットは stateless と stateful の 2 種類に分かれていますが、彼らの共通点は、どちらも変更不可能（immutable）であることです。

StatelessWidget では、buildメソッドをオーバーライドして、画面などを返します。

デモ#

StateFulWidget について、シンプルなデモを作成しました ----> リンク

プレビュー#

プレビュー

class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'NoWay',
      home: new ContentWidget()
    );
  }
}

State#

ウィジェットはすべて変更不可能ですが、リストビューにデータを追加して更新するなど、画面を動的に変更する必要がある場合は、ウィジェット（StatefulWidget）の状態を保存および操作するために State を使用する必要があります。


class ContentWidget extends StatefulWidget{

  @override
  State<StatefulWidget> createState() {
    return new ContentWidgetState();
  }
}

createState をオーバーライドすることで、ウィジェットの State オブジェクトを取得します。

class ContentWidgetState extends State<ContentWidget> {
  @override
  void initState() {
    
  }
  @override
  Widget build(BuildContext context) {
    return null;
  }
}

State 内で、StatefulWidget のビューの作成方法を記述します。

さらに重要なのは、ウィジェットの更新です。たとえば、ボタンをクリックして ListView にデータを追加した後、ビューを更新する必要があります。


class StateA extends State<ContentWidget>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        actions: [
          new IconButton(
            new Icon(Icons.add),
            onPressed: (){ addData() },
          )
        ]
      ),
    );
  }
	// リストにデータを追加
  void addData() {
     setState(() {
        // ここで処理を行います
    });
  }
}

この場合、setState( (){} )を呼び出して画面の更新を通知する必要があります。

画面の更新を呼び出す場合は、非同期で行うことが最適です。そうしないと、エラーが発生する可能性があります。

Future<String> fs =  どこかで取得したファイル、ネットワークなど;
fs.then((str){
  setState(() {
   // ここで処理を行います
  });
});