フラッター学習-ルーティング（ルート）

学習教材：フラッターモバイルアプリ

コンテンツを表示する画面またはページはルートと呼ばれます。ナビゲータウィジェットは、Navigator.pushやNavigator.popなど、これらのルートを管理するためのメソッドを提供します。ルーティングオブジェクトはスタックに配置されます。ルーティングヒープを処理するために自分でナビゲーターを作成するか、WigetsAppまたはMaterialAppウィジェットを使用してナビゲーターを作成し、Navigator.ofメソッドを使用してコンテキストを渡すことで、プッシュとポップを実現できます。。

main.dartのApp（）のMaterialAppには、home属性値があります。表示されるページは、ルートヒープの一番下のルート、つまり最初に表示されるページです。新しいルートがこのルートヒープの一番上にプッシュされると、新しいプッシュのページが画面に表示されます。

一例：

main.dartで変更されたホーム値

class App extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        debugShowCheckedModeBanner: false,
     	home: NavigatorDemo(),
        theme:ThemeData(
          primarySwatch: Colors.deepPurple,
          highlightColor:Color.fromRGBO(255, 255, 255, 0.5),
          splashColor: Colors.white70,
        )
    );
  }
}

新しいnavigator_demo.dartを作成し、Navigator.of（context）.push（）を使用します

class NavigatorDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FlatButton(
              child: Text('Home'),
              onPressed: null,
            ),
            FlatButton(
              child: Text('About'),
              onPressed: (){
               	Navigator.of(context).push(
                	MaterialPageRoute(
                		builder: (BuildContext context) => MyPage(title: 'About'),
               		),
              	);
                Navigator.pushNamed(context, '/about');
              },
            ),
          ],
        ),
      ),
    );
  }
}

class MyPage extends StatelessWidget{
  final String title;

  MyPage({
    this.title
});

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
        elevation: 0,
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.arrow_back),
        onPressed: (){
          Navigator.pop(context);//返回上一个路由
        },
      ),
    );
  }
}

動作結果：

MaterialAppでは、いくつかの名前付きルートを事前に定義し、プッシュする場合にのみ名前を付ける必要があります。
ルート属性をMaterialAppに追加します。これには、マップが含まれ、それぞれに対応する名前と値（ルートを開いた後に表示されるもの）があります。

例：

class App extends StatelessWidget{
  @override
  Widget build(BuildContext context++) {
    // TODO: implement build
    return MaterialApp(
        debugShowCheckedModeBanner: false,
	    home: NavigatorDemo(),
        routes: {//map
          '/about':(context) => MyPage(title:'About'),
        },
        theme:ThemeData(
          primarySwatch: Colors.deepPurple,
          highlightColor:Color.fromRGBO(255, 255, 255, 0.5),
          splashColor: Colors.white70,
        )
    );
  }
}

class NavigatorDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FlatButton(
              child: Text('Home'),
              onPressed: null,
            ),
            FlatButton(
              child: Text('About'),
              onPressed: (){
                Navigator.pushNamed(context, '/about');
              },
            ),
          ],
        ),
      ),
    );
  }
}

class MyPage extends StatelessWidget{
  final String title;

  MyPage({
    this.title
});

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
        elevation: 0,
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.arrow_back),
        onPressed: (){
          Navigator.pop(context);
        },
      ),
    );
  }
}

Home属性の代わりにinitialRouteを使用して、初期ルートを設定することもできます。

class App extends StatelessWidget{
  @override
  Widget build(BuildContext context++) {
    // TODO: implement build
    return MaterialApp(
        debugShowCheckedModeBanner: false,
//        home: NavigatorDemo(),
        initialRoute: '/',
        routes: {//map
          '/':(context) => NavigatorDemo(),//初始路由
          '/about':(context) => MyPage(title:'About'),
        },
        theme:ThemeData(
          primarySwatch: Colors.deepPurple,
          highlightColor:Color.fromRGBO(255, 255, 255, 0.5),
          splashColor: Colors.white70,
        )
    );
  }
}

フラッター学習-ルーティング（ルート）

おすすめ