如何创建和使用Flutter的路由与导航？

1、在flutter里面创建路由有两种方式：

一种是先定义一个路由。页面之间跳转是以页面为单位的，每个页面都可以起一个路由的名字。就是在路由里面注册一下，然后给它起个名字。

另一种是通过Navigator直接进行跳转。

2、

注册路由

3、

创建主界面

4、

界面跳转

1）默认不通过路由进行跳转

点击后完成界面的跳转

 

2）通过路由名进行跳转

 

点击后完成界面的跳转

5、

界面添加返回按钮，点击后可以返回

6、

界面之间跳转的两种方式：

1）在MaterialApp中定义路由，也就是为界面起一个路由的别名，然后通过Navigator.pushNamed(context,routeName)的方式进行界面的跳转

2）如果没有通过MaterialApp进行配置的化，也可以直接通过Navigator.push()的方式来跳转到指定的界面

 

从界面中跳出，也就是返回上一个界面可以通过Navigator.pop()

 

7、

代码：

main.dart:

import 'package:flutter/material.dart';
import 'package:flutter_app/statefull_group_page.dart';

import 'flutter_layout_page.dart';
import 'less_group_page.dart';
import 'plugin_use.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(
        appBar: AppBar(
            title:Text('如何创建和使用Flutter的路由与导航？'),
          leading:GestureDetector(
            onTap: (){
              Navigator.pop(context);
            },
            child: Icon(Icons.arrow_back),
          )
        ),
        body: RouterNavigator(),
      ),
      routes: <String,WidgetBuilder>{
        'plugin':(BuildContext context) => PluginUse(),
        'less':(BuildContext context) => LessfulGroupPage(),
        'ful':(BuildContext context) => StateFulGroup(),
        'layout':(BuildContext context) => FlutterLayoutPage(),
      },
    );
  }
}

class RouterNavigator extends StatefulWidget {
  @override
  _RouteNavigatorState createState() => _RouteNavigatorState();
}



class _RouteNavigatorState extends State<RouterNavigator>{
  bool byName=false;
  @override
  Widget build(BuildContext context) {
      return Container(
        child: Column(
          children: <Widget>[
            SwitchListTile(
              title: Text('${byName?'':'不'}通过路由名跳转'),
              value: byName, onChanged: (value){
              setState(() {
                byName=value;
              });
            }),
            _item('如何使用Flutter包和插件？',PluginUse(),'plugin'),
            _item('StatelessWidget与基础组件',LessfulGroupPage(),'less'),
            _item('StatefulWidget与基础组件',StateFulGroup(),'ful'),
            _item('如何进行Flutter布局开发',FlutterLayoutPage(),'layout'),

          ],
        ),
      );
  }

  //要显示的文案、具体的页面的实列、页面的路由名字
  _item(String title, page, String routeName) {
    return Container(
      child: RaisedButton(
        onPressed: (){
          if(byName){
            Navigator.pushNamed(context, routeName);
          }else{
            Navigator.push(context, MaterialPageRoute(builder:(context) => page));
          }
        },
        child: Text(title),
      ),
    );
  }

}

 

flutter_layout_page.dart:

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

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


//如何进行Flutter布局开发？
class FlutterLayoutPage extends StatefulWidget{
  @override
  State<StatefulWidget> createState()  => _FlutterLayoutGroupPage();
}

class _FlutterLayoutGroupPage extends State<FlutterLayoutPage>{
  int _currentIndex=0;
  Future<Null> _handleRefresh()async{
    await Future.delayed(Duration(milliseconds: 200));
    return null;
  }

  _item(String title,Color color){
    return Container(
      alignment: Alignment.center,
      decoration: BoxDecoration(color: color),
      child: Text(title,style: TextStyle(fontSize: 22,color:Colors.white)),
    );
  }

  _chip(String label){
    return Chip(label: Text(label),
      avatar: CircleAvatar(
        backgroundColor: Colors.blue.shade900,
        child: Text(
          label.substring(0,1),
          style: TextStyle(fontSize: 10),
        ),
      )
    );
  }

  @override
  Widget build(BuildContext context) {
    TextStyle textStyle=TextStyle(fontSize: 20);

    return MaterialApp(
      title: '如何进行Flutter布局开发？',
      theme: ThemeData(

        primarySwatch: Colors.yellow,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('如何进行Flutter布局开发？'),
          leading:GestureDetector(
            onTap: (){
              Navigator.pop(context);
            },
            child: Icon(Icons.arrow_back),
          ) ),
        bottomNavigationBar: BottomNavigationBar(
          //默认选中第0个
          currentIndex: _currentIndex,
            onTap: (index){
              setState(() {
                //当点击后回调该方法，改变点击的index
                _currentIndex=index;
              });
            },
            items:[
          BottomNavigationBarItem(
              icon: Icon(Icons.home,color: Colors.grey),
              activeIcon: Icon(Icons.home,color: Colors.blue),
              title:Text('首页')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.list,color: Colors.grey),
              activeIcon: Icon(Icons.list,color: Colors.blue),
              title:Text('列表')
          )
        ]),
        floatingActionButton: FloatingActionButton(
          onPressed: null,
          child: Text('点我')
        ),

        body: _currentIndex==0?
        RefreshIndicator(
            child:
            ListView(
                children: <Widget>[
                  Container(
          decoration: BoxDecoration(color: Colors.blue),
          alignment: Alignment.center,
          child: Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  ClipOval(
                    child: SizedBox(
                      width: 100,
                      height: 100,
                      child:  Image.network('http://www.devio.org/img/avatar.png'
                    ),
                  )
                  ),
                  Padding(
                    padding: EdgeInsets.all(10),
                    child: ClipRRect(
                      borderRadius:BorderRadius.all(Radius.circular(10)),//圆角
                      child: Opacity(opacity: 0.6,
                        child: Image.network('http://www.devio.org/img/avatar.png',
                          width: 100,
                          height: 100,
                        )
                      ),
                    ),
                  ),
                  Text("横向 Row"),
                ],
              ),

              //网上加载图片
              Image.network('http://www.devio.org/img/avatar.png',
              width: 100,
              height: 100,),
              TextField(
                //输入文本的样式
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.fromLTRB(5, 0, 0, 0),
                  hintText: '请输入',
                  hintStyle: TextStyle(fontSize: 15)
                ),
              ),
              Container(
                height: 100,
                margin: EdgeInsets.all(10),
//                decoration: BoxDecoration(color: Colors.lightBlueAccent),
                child:
                  PhysicalModel(color: Colors.transparent,
                  borderRadius: BorderRadius.circular(6),
                  clipBehavior: Clip.antiAlias,//抗锯齿
                    child:
                    PageView(
                      children: <Widget>[
                        _item("Page1", Colors.deepPurple),
                        _item("Page2", Colors.green),
                        _item("Page3", Colors.red),
                      ],
                    ),
                  )
              ),
              Column(
                children: <Widget>[
                  FractionallySizedBox(
                    widthFactor: 1,
                    child:  Container(
                      decoration: BoxDecoration(color: Colors.greenAccent),
                      child: Text('宽度撑满'),
                    )
                  ),
                ],
              ),
            ],
          ),
        ),
         Stack(
           children: <Widget>[
         Image.network('http://www.devio.org/img/avatar.png',
           width: 100,
           height: 100,
         ),
             Positioned(
               left: 0,
               bottom: 0,
               child: Image.network('http://www.devio.org/img/avatar.png',
               width: 36,
               height: 36,
             ),
             )
         ],
         ),
         Wrap(
           //创建一个wrap布局，从左向右进行排列，会自动换行
           spacing: 8,//水平间距
           runSpacing: 6,//垂直间距
           children: <Widget>[
             _chip("Flutter"),
             _chip("进阶"),
             _chip("实战"),
             _chip("携程"),
             _chip("App"),
           ],
         )

                ]
            ),
            onRefresh: _handleRefresh)
       :Column(
          children: <Widget>[
            Text("列表"),
            Expanded(
              child:  Container(
                decoration: BoxDecoration(
                    color: Colors.red
                ),
                child: Text('拉伸填满高度'),
              )
            )

          ],
        )

      ),
    );


  }

}

//StateLessWidget与基础组件
class LessGroupPage extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    TextStyle textStyle=TextStyle(fontSize: 20);
    return MaterialApp(
      title: 'StatelessWidget与基础组件',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('StatelessWidget与基础组件'),

        ),
        body: Container(
          decoration: BoxDecoration(color: Colors.blue),
          alignment: Alignment.center,
          child: Column(
            children: <Widget>[
              Text('I am an Text',style: textStyle),
              Icon(Icons.android,size: 50,color: Colors.red),
              CloseButton(),
              BackButton(),
              Chip(
              //材料设计中一个非常有趣的小部件
                avatar: Icon(Icons.people),
                label: Text('StatelessWidget与基础组件'),
              ),
              Divider(
                height: 10,//容器高度，不是线的高度
                indent: 10,//左侧间距
                color: Colors.orange
              ),
              Card(
                color: Colors.red,
                elevation: 5,//阴影
                margin: EdgeInsets.all(10),
                child: Container(
                  padding: EdgeInsets.all(10),
                  child: Text('I am Card',style: textStyle,),
                ),
              ),
              AlertDialog(
                title: Text('盘它'),
                content: Text('你这个糟老头子坏得很'),
              )
            ],
          ),
        ),
      ),
    );
  }
}

 

 

less_group_page.dart:

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

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

//StateLessWidget与基础组件
class LessfulGroupPage extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    TextStyle textStyle=TextStyle(fontSize: 20);
    return MaterialApp(
      title: 'StatelessWidget与基础组件',
      theme: ThemeData(

        primarySwatch: Colors.yellow,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('StatelessWidget与基础组件'),
          leading:GestureDetector(
            onTap: (){
              Navigator.pop(context);
            },
            child: Icon(Icons.arrow_back),
          ) ),
        body: Container(
          decoration: BoxDecoration(color: Colors.blue),
          alignment: Alignment.center,
          child: Column(
            children: <Widget>[
              Text('I am an Text',style: textStyle),
              Icon(Icons.android,size: 50,color: Colors.red),
              CloseButton(),
              BackButton(),
              Chip(
              //材料设计中一个非常有趣的小部件
                avatar: Icon(Icons.people),
                label: Text('StatelessWidget与基础组件'),
              ),
              Divider(
                height: 10,//容器高度，不是线的高度
                indent: 10,//左侧间距
                color: Colors.orange
              ),
              Card(
                color: Colors.red,
                elevation: 5,//阴影
                margin: EdgeInsets.all(10),
                child: Container(
                  padding: EdgeInsets.all(10),
                  child: Text('I am Card',style: textStyle,),
                ),
              ),
              AlertDialog(
                title: Text('盘它'),
                content: Text('你这个糟老头子坏得很'),
              )
            ],
          ),
        ),
      ),
    );
  }
}

 

 

plugin_use.dart

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

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

class PluginUse extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<PluginUse> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('如何使用flutter包和插件？'),
        leading:GestureDetector(
          onTap: (){
            Navigator.pop(context);
          },
          child: Icon(Icons.arrow_back),
        )
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
              style: TextStyle(color: ColorUtil.color('#899900')),
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

 

statefull_group_page.dart

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

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


//StatefulWidget与基础组件
class StateFulGroup extends StatefulWidget{
  @override
  State<StatefulWidget> createState()  => _StateFulGroupState();
}

class _StateFulGroupState extends State<StateFulGroup>{
  int _currentIndex=0;
  Future<Null> _handleRefresh()async{
    await Future.delayed(Duration(milliseconds: 200));
    return null;
  }

  _item(String title,Color color){
    return Container(
      alignment: Alignment.center,
      decoration: BoxDecoration(color: color),
      child: Text(title,style: TextStyle(fontSize: 22,color:Colors.white)),
    );
  }
  @override
  Widget build(BuildContext context) {
    TextStyle textStyle=TextStyle(fontSize: 20);

    return MaterialApp(
      title: 'StatefulWidget与基础组件',
      theme: ThemeData(

        primarySwatch: Colors.yellow,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('StatefulWidget与基础组件'),
          leading:GestureDetector(
            onTap: (){
              Navigator.pop(context);
            },
            child: Icon(Icons.arrow_back),
          ) ),
        bottomNavigationBar: BottomNavigationBar(
          //默认选中第0个
          currentIndex: _currentIndex,
            onTap: (index){
              setState(() {
                //当点击后回调该方法，改变点击的index
                _currentIndex=index;
              });
            },
            items:[
          BottomNavigationBarItem(
              icon: Icon(Icons.home,color: Colors.grey),
              activeIcon: Icon(Icons.home,color: Colors.blue),
              title:Text('首页')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.list,color: Colors.grey),
              activeIcon: Icon(Icons.list,color: Colors.blue),
              title:Text('列表')
          )
        ]),
        floatingActionButton: FloatingActionButton(
          onPressed: null,
          child: Text('点我')
        ),

        body: _currentIndex==0?
        RefreshIndicator(
            child:
            ListView(
                children: <Widget>[
                  Container(
          decoration: BoxDecoration(color: Colors.blue),
          alignment: Alignment.center,
          child: Column(
            children: <Widget>[
              //网上加载图片
              Image.network('http://www.devio.org/img/avatar.png',
              width: 100,
              height: 100,),
              TextField(
                //输入文本的样式
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.fromLTRB(5, 0, 0, 0),
                  hintText: '请输入',
                  hintStyle: TextStyle(fontSize: 15)
                ),
              ),
              Container(
                height: 100,
                margin: EdgeInsets.only(top: 10),
                decoration: BoxDecoration(color: Colors.lightBlueAccent),
                child: PageView(
                  children: <Widget>[
                    _item("Page1", Colors.deepPurple),
                    _item("Page2", Colors.green),
                    _item("Page3", Colors.red),
                  ],
                ),
              )
            ],
          ),
        )
                ]
            ),
            onRefresh: _handleRefresh)
            :Text("列表"),
      ),
    );


  }

}

//StateLessWidget与基础组件
class LessGroupPage extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    TextStyle textStyle=TextStyle(fontSize: 20);
    return MaterialApp(
      title: 'StatelessWidget与基础组件',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('StatelessWidget与基础组件')),
        body: Container(
          decoration: BoxDecoration(color: Colors.blue),
          alignment: Alignment.center,
          child: Column(
            children: <Widget>[
              Text('I am an Text',style: textStyle),
              Icon(Icons.android,size: 50,color: Colors.red),
              CloseButton(),
              BackButton(),
              Chip(
              //材料设计中一个非常有趣的小部件
                avatar: Icon(Icons.people),
                label: Text('StatelessWidget与基础组件'),
              ),
              Divider(
                height: 10,//容器高度，不是线的高度
                indent: 10,//左侧间距
                color: Colors.orange
              ),
              Card(
                color: Colors.red,
                elevation: 5,//阴影
                margin: EdgeInsets.all(10),
                child: Container(
                  padding: EdgeInsets.all(10),
                  child: Text('I am Card',style: textStyle,),
                ),
              ),
              AlertDialog(
                title: Text('盘它'),
                content: Text('你这个糟老头子坏得很'),
              )
            ],
          ),
        ),
      ),
    );
  }
}