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('你这个糟老头子坏得很'), ) ], ), ), ), ); } }
