Flutter笔记65：Fluro路由组件的简单使用

这里是根据教程来的，Flutter Fluro路由组件的简单使用：

1、在pubspec.yaml引入Fluro组件：

dependencies:
  flutter:
    sdk: flutter
  fluro: ^1.7.6

2、在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(),
      ),
    );
  }
}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！