1、在pubspec.yaml引入Fluro组件:
dependencies: flutter: sdk: flutter fluro: ^1.7.62、在lib目录建立routers文件夹,同时在里面新建三个文件:application.dart、router_handler.dart、routers.dart
application.dart静态化FluroRouter,调用FluroRouter更加方便:
import 'package:fluro/fluro.dart'; //静态化,然后就可以用Application.router来引用 FluroRouter 对象,注意 1.5版本时Router,现在改成了FluroRouter class Application{ static FluroRouter router; }router_handler.dart处理路由传参:
import 'package:fluro/fluro.dart'; import 'package:flutter/material.dart'; //页面 import '../pages/second_page.dart'; Handler secondPageHandler = Handler( handlerFunc: (BuildContext context, Map<String,List<String>> params){ String goodsId = params['goodsId'].first; return SecondPage(goodsId); } );routers.dart是所有路由集合:
import 'package:fluro/fluro.dart'; import 'package:flutter/material.dart'; import 'router_handler.dart'; class Routes{ //根路径 static String root = '/'; static String secondPage = '/secondPage'; //配置路由对象,所有的路由都在这里面 static void configureRoutes(FluroRouter router){ //404页面 router.notFoundHandler = Handler( handlerFunc: (BuildContext context, Map<String,List<String>> params){ print('error:没有找到'); } ); router.define(secondPage, handler: secondPageHandler); } }3、再在lib目录下新建pages目录,放所有的页面,这里以两个页面为由:first_page.dart为首页,second_page.dart为跳转页面:
first_page.dart代码,里面有Fluro跳转示例,并且还接收了跳转后的页面关闭时回传的参数:
import 'package:flutter/material.dart'; import '../routers/application.dart'; import 'package:fluro/fluro.dart'; class FirstPage extends StatelessWidget{ @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('第一个页面'), ), body: Center( child: RaisedButton( child: Text('进入第二个页面'), onPressed: (){ _goToNextPage(context); }, ), ), ); } _goToNextPage(BuildContext context) async{ String goodsId = '001'; //Fluro跳转页面 Application.router.navigateTo(context, '/secondPage?goodsId=$goodsId',transition: TransitionType.fadeIn).then((value){ //从第二个页面返回传递的参数 if(value != null){ print(value); } }); } }second_page.dart接收了从首页传过来的参数,在关闭本页时,还回传了参数:
import 'package:fluro/fluro.dart'; import 'package:flutter/material.dart'; import '../routers/application.dart'; class SecondPage extends StatelessWidget{ final String goodsId; SecondPage(this.goodsId); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('第二个页面'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('接收到的参数:$goodsId',style: TextStyle(fontSize: 28.0, color: Colors.red),), RaisedButton( child: Text('返回上一页'), onPressed: (){ Navigator.pop(context,'第二个页面返回的id:$goodsId'); }, ) ], ), ), ); } }4、main.dart利用onGenerateRoute注入路由:
import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:fluro/fluro.dart'; import './routers/application.dart'; import './routers/routers.dart'; import './pages/first_page.dart'; void main(){ runApp(MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key key}) : super(key: key); @override Widget build(BuildContext context) { final router = FluroRouter(); //给routers.dart里面的传递FluroRouter传递router实例对象 Routes.configureRoutes(router); //给Application的router赋值router实例对象 Application.router = router; return Container( child: MaterialApp( title: 'Fluro路由导航', debugShowCheckedModeBanner: false, //generator生成的意思,生成路由的回调函数,当导航的命名路由的时候,会使用这个来生成路由 onGenerateRoute: Application.router.generator, home: FirstPage(), ), ); } }