Dart/Flutterにおいて、他ファイルのstateが更新される度に値を利用する方法

Question

Flutterアプリにおいて、他ファイルのstateが更新される度に値を利用するにはどうすれば良いでしょうか。

//ファイル1
こちらでアイコンがクリックされる度に、posが変更されます。（確認済み）

class Nav extends StatefulWidget {
  @override
  _NavState createState() => _NavState();
}

class _NavState extends State<Nav> {
  int pos = 0;
}

@override
  Widget build(BuildContext context) {
    return Row(中略
　　return GestureDetector(
                    onTap: () {
                      setState(() {
                        items.forEach((item) => item.isOpen = false);
                        i.isOpen = !i.isOpen;
                        pos = i.pos;
                      });
                    },

//ファイル2
ファイル1のpos変更に応じて、ファイル2の_indexを変更したいのですが
どのように双方を結びつければ良いかがわかりません。
stateの_を消して直接ファイル1のposを呼んでみたり、二つを同じファイルに書いてonTapで更にsetStateを使い、MyAppState内の_indexを更新しようとしましたが、

目指す姿である、ファイル1のアイコンがクリックされると同時に、ファイル2にある_indexの値がposに置き換わる、というのを実現できていません。

class Homepage extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<Homepage> {
  int _index = 0;

Widget build(BuildContext context) {
    return Scaffold(
            Nav()

Answer 1

providerや、blocパターンなどの状態管理を導入するのが自然です。

状態管理というのは、アプリの状態を表す１つの変数を複数のWidget間で共有するための仕組みのことです。

---

もしこれらを使わず、setStateのみで実装するのであれば、

• indexという値はHomeで管理し、コンストラクタでNavにも渡す
• index更新用の関数をNavにも渡す

というのが初心者にとって分かりやすい手法かと思います。

質問内容にあるように、HomeとNavで別々に変数を宣言して、双方を結びつけるというのは無理です。

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int _index = 0;

  void setIndex(int index) {
    setState(() {
      this._index = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          Nav(
            pos: _index,
            setIndex: (int i) => setIndex(i),
          ),
          Text('$_index'),
        ],
      ),
    );
  }
}

class Nav extends StatefulWidget {
  final int pos;
  final Function(int) setIndex;

  const Nav({
    Key key,
    this.pos,
    this.setIndex,
  }) : super(key: key);

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

class _NavState extends State<Nav> {
  Widget navButton(int index) {
    return RaisedButton(
      child: Text('$index'),
      onPressed: () {
        widget.setIndex(index);
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    print('pos: ${widget.pos}');
    return Row(
      children: [
        navButton(0),
        navButton(1),
        navButton(2),
      ],
    );
  }
}

Comments

[toast-uz]

新しい方の投稿に、stateだけの例として、この方針を書こうとしていたところでした。とてもよくまとまっていて、よい回答だと思います。

[toast-uz]

nskhei様、
https://teratail.com/questions/292962　に同じ回答をつけるようにお願いします。

[nskhei]

同じ回答しても意味がないと思ったので、そちらにはproviderを使った方法を書きました。

[toast-uz]

ありがとうございます。

[neoz]

nskhei様、toast-uz様、ご回答頂きありがとうございました。お力添えにより、目指す姿で動かすことができました。
state/provider双方のやり方をご教示頂け勉強になりました。
今は目下の問題解決が優先でしたが、今後じっくり背景にあるFlutterのロジックも勉強していくようにします。

Answer 2

「二つを同じファイルに書いてonTapで更にsetStateを使い、MyAppState内の_indexを更新」でよいと思います。ただし、_indexはonTap()のスコープからもアクセスできるみように、class MyAppStateの外にトップレベルで定義してください。

int _index = 0;

class MyAppState extends State<Homepage> {
  _index = 0;

略

                    onTap: () {
                      setState(() {
                        items.forEach((item) => item.isOpen = false);
                        i.isOpen = !i.isOpen;
                        pos = i.pos;
                        _index = pos;

                      });

Comments

[neoz]

ありがとうございます。ただ、どうもこれだと外側の_indexは変わりますが、state内の_indexは変わらず、利用したいのはstate内のindexの監視・変更により描画するものを選択、することなので

このままだとだめそうです。。

onTap()の中身を
pos = i.pos;
MyAppState()._index = pos;
print(MyAppState()._index);
として、stateの_indexを直接変えようとしましたが初期値のままでした。

[toast-uz]

「ファイル1のアイコンがクリックされると同時に、ファイル2にある_indexの値がposに置き換わる」は実現できたけど、質問文に書かれていない、まだ実現したいことがある、ということでしょうか？
質問文を正しく修正ください。「state内の_index」というのは、コードのどこにも表現されていません。

[toast-uz]

おそらく、Widgetをコンポーネント化して（できれば）別ファイルに配置したい、その際、状態やUIイベントを、親子間で必要に応じて共有したい、ということをやりたいのかと思います。
私も詳しくありませんが、InheritedWidgetとかProviderとか言われる領域のテクニックになりますので、一度それらを学習してみてはいかがでしょうか？

[neoz]

ありがとうございます。言葉足らずだったのと、widgetを1ファイルにまとめたため質問の趣旨が異なってきたので、新しい質問を立てました。
https://teratail.com/questions/292962?modal=q-comp

おっしゃるとおり、私も調べる中でそのあたりの技術に行き当たったのですが、今回のstatefulで作っているコードをどう適用したらいいかわからず、模索している状況です。