Как изменить состояние одного виджета (statefull) из другого виджета statefull в флаттере?

Question

В этом коде я хочу показать проиндексированные виджеты, изменив индекс из ящика навигации, т.е. основной MaterialApp показывает виджет в соответствии с индексом (widgetIndex). Индекс обновляется, но виджет не изменяется до тех пор, пока я его не перезагрузлю. Итак, я хочу перезагрузить виджет MyApp из виджета ящика.

// main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:indexed/page1.dart';
import 'package:indexed/page2.dart';
import 'drawer.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
  //set widgetIndex(int widgetIndex) {widgetIndex = DrawerS.widgetIndex;}
  int widgetIndex = SideDrawerState.widgetIndex;
  @override
  Widget build(BuildContext context)
  {
    return MaterialApp(
      home: Container(
        child: IndexedStack(
          index: widgetIndex,
          children: <Widget>[
            Page1(), //A Scaffold wid.
            Page2(), //A Scaffold wid.
          ],
        ),
      ),
    );
  }
}

// pocket.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class SideDrawer extends StatefulWidget {

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

class SideDrawerState extends State<SideDrawer> {

  static int widgetIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: <Widget>[
          ListTile(
            contentPadding: EdgeInsets.only(top: 50),
            title: Text('1'),
            onTap: () async {
              setState(() => widgetIndex = 0);

              Navigator.of(context).pop();
            },
          ),
          ListTile(
            title: Text('2'),
            onTap: (){
              setState(() => widgetIndex = 1);

              Navigator.of(context).pop();
            },
          ),
        ],
      ),
    );
  }
}

Answer 1

Вы можете создать поле функции в вашем SideDrawer , которое принимает index в качестве параметра.

Вызовите функцию, передав соответствующий параметр в onTap каждого ListTile .

В вашем MyApp создайте переменную с начальным значением 0, затем при установке SideDrawer добавьте onTap атрибут затем изменить значение в setState

Вот так

class MyApp2 extends StatefulWidget {
  @override
  MyApp2State createState() => MyApp2State();
}
class MyApp2State extends State<MyApp2> {

  var widgetIndex = 0;
  @override
  Widget build(BuildContext context)
  {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home"),
      ),
      body: SafeArea(
        child: Container(
          child: IndexedStack(
            index: widgetIndex,
            children: <Widget>[
              Text("djdhjhd"),
              Text("nonono")
            ],
          ),
        ),
      ),
      drawer: SideDrawer(
        onTap: (index){
          setState(() {
            widgetIndex = index;
          });
        },
      ),
    );
  }
}


class SideDrawer extends StatefulWidget {

  final Function(int index) onTap;
  SideDrawer({this.onTap});

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

class SideDrawerState extends State<SideDrawer> {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: <Widget>[
          ListTile(
            contentPadding: EdgeInsets.only(top: 50),
            title: Text('1'),
            onTap: () async {
              widget.onTap(0);
              Navigator.of(context).pop();
            },
          ),
          ListTile(
            title: Text('2'),
            onTap: (){
              widget.onTap(1);
              Navigator.of(context).pop();
            },
          ),
        ],
      ),
    );
  }
}

Вывод:

Надеюсь, это поможет вам.