flutter - Flutterのネストされたウィジェット内でポップイベントが発生したことを知る方法

Question

現在、ネストされたルーティングを使用して、1 つの画面を同じに保ち、別の画面にルーティングする必要があるアプリを構築しています。その 2 番目のルートがポップされたときに、expanded の値を変更して画面全体を埋めることができるようにしたいのです。Github の要点。コードサンプルは次のとおりです。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(body: MyHomePage()),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> with RouteAware {
  bool rightPanelIsShown;
  Widget child;
  final GlobalKey<NavigatorState> navigatorKey = GlobalKey();
  final RouteObserver<PageRoute> _routeObserver = RouteObserver<PageRoute>();

  @override
  void initState() {
    super.initState();
    setState(() {
      rightPanelIsShown = false;
      child = Container();
    });
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _routeObserver.subscribe(this, ModalRoute.of(context));
    setState(() {
      child = Container();
    });
  }

  @override
  void didPop() {
    super.didPop();
    print('popped');
    setState(() {
      rightPanelIsShown = false;
    });
  }

  @override
  void dispose() {
    print("dis");
    _routeObserver.unsubscribe(this);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Row(
        children: <Widget>[
          Expanded(
            flex: 1,
            child: Center(
              child: FlatButton(
                color: Colors.blue,
                onPressed: () => setState(() {
                  rightPanelIsShown = !rightPanelIsShown;
                  child = Page1();
                }),
                child: Text(
                  'Open Right Panel',
                  style: TextStyle(color: Colors.white, fontSize: 25.0),
                ),
              ),
            ),
          ),
          rightPanelIsShown
              ? Expanded(
                  flex: 1,
                  child: Navigator(
                    onGenerateRoute: (route) => MaterialPageRoute(
                      builder: (context) => child,
                    ),
                  ),
                )
              : Container(),
        ],
      ),
    );
  }
}

class Page1 extends StatelessWidget {
  const Page1({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Text(
            'Page1',
            style: TextStyle(
              fontSize: 30.0,
            ),
          ),
          _buildGoToButton(context),
          _buildBackbutton(context)
        ],
      ),
    );
  }

  FlatButton _buildGoToButton(BuildContext context) {
    return FlatButton(
      color: Colors.green,
      onPressed: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (_) => Page2(),
          ),
        );
      },
      child: Text(
        'Go To Page 2',
        style: TextStyle(fontSize: 21.0),
      ),
    );
  }

  FlatButton _buildBackbutton(BuildContext context) {
    return FlatButton(
      color: Colors.red,
      onPressed: () {
        Navigator.pop(context);
      },
      child: Text(
        'Close',
        style: TextStyle(fontSize: 21.0),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  const Page2({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Text(
            'Page2',
            style: TextStyle(
              fontSize: 30.0,
            ),
          ),
          _buildBackButton(context)
        ],
      ),
    );
  }

  FlatButton _buildBackButton(BuildContext context) {
    return FlatButton(
      color: Colors.red,
      onPressed: () {
        Navigator.pop(context);
      },
      child: Text(
        'Close',
        style: TextStyle(fontSize: 21.0),
      ),
    );
  }
}

ビルドアップのスクリーンキャスト

右側のパネル Page1 で閉じるをクリックすると、親の状態も変更されます。ありがとう、

アップデート

ジョアン・ソアレスの助けを借りて作業する

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(body: MyHomePage()),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> with RouteAware {
  bool rightPanelIsShown;
  Widget child;
  final GlobalKey<NavigatorState> navigatorKey = GlobalKey();
  final RouteObserver<PageRoute> _routeObserver = RouteObserver<PageRoute>();

  @override
  void initState() {
    super.initState();
    setState(() {
      rightPanelIsShown = false;
      child = Container();
    });
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _routeObserver.subscribe(this, ModalRoute.of(context));
    setState(() {
      child = Container();
    });
  }

  @override
  void didPop() {
    super.didPop();
    print('popped');
    setState(() {
      rightPanelIsShown = false;
    });
  }

  @override
  void dispose() {
    print("dis");
    _routeObserver.unsubscribe(this);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Row(
        children: <Widget>[
          Expanded(
            flex: 1,
            child: Center(
              child: Column(
                children: <Widget>[
                  FlatButton(
                    color: Colors.blue,
                    onPressed: () => setState(() {
                      rightPanelIsShown = !rightPanelIsShown;
                      child = Page1(
                        callback: onPop,
                      );
                    }),
                    child: Text(
                      'Open Right Panel 1',
                      style: TextStyle(color: Colors.white, fontSize: 25.0),
                    ),
                  ),
                  FlatButton(
                    color: Colors.blue,
                    onPressed: () => setState(() {
                      rightPanelIsShown = !rightPanelIsShown;
                      child = Page3(
                        callback: onPop,
                      );
                    }),
                    child: Text(
                      'Open Right Panel 2',
                      style: TextStyle(color: Colors.white, fontSize: 25.0),
                    ),
                  ),
                ],
              ),
            ),
          ),
          rightPanelIsShown
              ? Expanded(
                  flex: 1,
                  child: PanelView(
                    child: child,
                  ),
                )
              : Container(),
        ],
      ),
    );
  }

  onPop(value) {
    print("popped");
    setState(() {
      rightPanelIsShown = false;
    });
  }
}

class PanelView extends StatefulWidget {
  final Widget child;

  PanelView({Key key, this.child}) : super(key: key);

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

class _PanelViewState extends State<PanelView> {
  @override
  Widget build(BuildContext context) {
    return Navigator(
      onGenerateRoute: (route) {
        return MaterialPageRoute(builder: (context) {
          return Container(
            child: widget.child,
          );
        });
      },
    );
  }
}

class Page1 extends StatelessWidget {
  final Function callback;
  const Page1({Key key, this.callback}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Text(
            'Page1',
            style: TextStyle(
              fontSize: 30.0,
            ),
          ),
          _buildGoToButton(context),
          _buildBackbutton(context)
        ],
      ),
    );
  }

  FlatButton _buildGoToButton(BuildContext context) {
    return FlatButton(
      color: Colors.green,
      onPressed: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (_) => Page2(),
          ),
        );
      },
      child: Text(
        'Go To Page 2',
        style: TextStyle(fontSize: 21.0),
      ),
    );
  }

  FlatButton _buildBackbutton(BuildContext context) {
    return FlatButton(
      color: Colors.red,
      onPressed: () {
        callback('hello');
        Navigator.of(context).pop();
      },
      child: Text(
        'Close',
        style: TextStyle(fontSize: 21.0),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  const Page2({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Text(
            'Page2',
            style: TextStyle(
              fontSize: 30.0,
            ),
          ),
          _buildBakButton(context)
        ],
      ),
    );
  }

  FlatButton _buildBakButton(BuildContext context) {
    return FlatButton(
      color: Colors.red,
      onPressed: () {
        Navigator.pop(context);
      },
      child: Text(
        'Close',
        style: TextStyle(fontSize: 21.0),
      ),
    );
  }
}

class Page3 extends StatelessWidget {
  final Function callback;
  const Page3({Key key, this.callback}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Text(
            'Page2',
            style: TextStyle(
              fontSize: 30.0,
            ),
          ),
          _buildBakButton(context)
        ],
      ),
    );
  }

  FlatButton _buildBakButton(BuildContext context) {
    return FlatButton(
      color: Colors.red,
      onPressed: () {
        callback('page3');
        Navigator.pop(context);
      },
      child: Text(
        'Close',
        style: TextStyle(fontSize: 21.0),
      ),
    );
  }
}

左パネルに2つのボタンがある場合のように、PanelViewのすべての子ウィジェットにコールバックを渡す必要がないより良い解決策があり、ボタンの子が子ウィジェットを状態に設定することを決定する右パネルに表示されるウィジェットを決定します。