web-dev-qa-db-ja.com

Flutterで現在のルートパスを取得する方法は？

永続的な下部バー の実装中、以前の ルートを復元する必要があります下部バー のボタンがクリックされたとき。

下のバーのボタンをクリックすると、現在のルートパス（ / a/b/c ）が保存され、ボタンのクリックに応じて以前に保存されたルートが復元されます。

概念的には、ユーザーは各ボタンをワークスペースと見なし、その状態が失われることはありません（バックスタックを含む）。ユーザーは、あるワークスペースから別のワークスペースに安全に切り替えることができます。

ルーティングが ルートへの巻き戻し の場合、Flutterで現在のルートパスを取得する方法

routingnavigationflutter
17
Kyaw Tun

NavigatorStateは、現在のルートのパスを取得するためのAPIを公開しません。また、Routeは、ルートのパスを決定するためのAPIも公開しません。ルートは匿名にすることができます（多くの場合、匿名です）。 Route メソッドを使用すると、特定のisCurrentが現在ナビゲータスタックの最上部にあるかどうかを確認できますが、これは使用にはあまり便利ではありません場合。

この問題に対して別のアプローチを取り、ルートに巻き戻さないことをお勧めします。代わりに、Navigatorの各ペインに異なるBottomNavigationBarウィジェットを使用します。そうすれば、ペインを切り替えるときにスタックを巻き戻す必要がなくなります。 Navigatorウィジェットを Opacity および IgnorePointer ウィジェットでラップして、想定されていないときに非表示にすることができます。スタックを破壊せずに見えるようにします。

app video

import 'package:flutter/material.Dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class SecurePage extends StatelessWidget {
  final int index;

  SecurePage(this.index);

  Widget build(BuildContext context) {
    return new Material(
      color: Colors.amber,
      child: new InkWell(
        child: new Center(
          child: new Icon(
            Icons.security,
            color: Colors.white,
            size: index * 100.0 + 20.0,
          ),
        ),
        onTap: () {
          Navigator.of(context).Push(
            new MaterialPageRoute(
              builder: (BuildContext context) {
                return new SecurePage(index + 1);
              },
            ),
          );
        },
      ),
    );
  }
}

class VerifiedPage extends StatelessWidget {
  final int index;

  VerifiedPage(this.index);

  Widget build(BuildContext context) {
    return new Material(
      color: Colors.green,
      child: new InkWell(
        child: new Center(
          child: new Icon(
            Icons.verified_user,
            color: Colors.white,
            size: index * 100.0 + 20.0,
          ),
        ),
        onTap: () {
          Navigator.of(context).Push(
            new MaterialPageRoute(
              builder: (BuildContext context) {
                return new VerifiedPage(index + 1);
              },
            ),
          );
        },
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State createState() => new MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  int _page = 0;
  List<Widget> initialWidgets = <Widget>[
    new SecurePage(0),
    new VerifiedPage(0),
  ];

  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Stack(
        children: new List<Widget>.generate(initialWidgets.length, (int index) {
          return new IgnorePointer(
            ignoring: index != _page,
            child: new Opacity(
              opacity: _page == index ? 1.0 : 0.0,
              child: new Navigator(
                onGenerateRoute: (RouteSettings settings) {
                  return new MaterialPageRoute(
                    builder: (_) => initialWidgets[index],
                  );
                },
              ),
            ),
          );
        }),
      ),
      bottomNavigationBar: new BottomNavigationBar(
        currentIndex: _page,
        onTap: (int index) {
          setState(() {
            _page = index;
          });
        },
        items: <BottomNavigationBarItem>[
          new BottomNavigationBarItem(
            icon: new Icon(Icons.security),
            title: new Text('Secure'),
          ),
          new BottomNavigationBarItem(
            icon: new Icon(Icons.verified_user),
            title: new Text('Verified'),
          ),
        ],
      ),
    );
  }
}
10
Collin Jackson

これにより、正確なルート名が得られます

import 'package:path/path.Dart';

ModalRoute.of(context).settings.name
10
ikben

主にアーカイブの目的でこの回答を投稿しますが、@ ikbenが述べたように、現在のルートとそのすべてのプロパティを取得する1つの方法はModalRoute.of(context)です。これは ModalRoute を返します。名前にかかわらず、ほとんどのNavigator.Pushは、showDialogだけでなく呼び出します。役立つプロパティには、 Route.settings 、 Route.navigator 、および Route.isFirst 。

2
Levi Lesches