flutter实战项目08 fluro路由

1，在ymal文件中引入 fluro: “^1.6.3”； 2，在pages文件夹下创建跳转页面 例：商品详情页detail_page.dart

import package:flutter/material.dart;
class DetailPage extends StatelessWidget {
  final String goodsId;//接收商品id
  DetailPage(this.goodsId);
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(child: Text("${goodsId}")),
    );
  }
}

3,在routers文件夹下创建handler页面 例：商品详情页 router_handler.dart

import package:flutter/material.dart;
import package:fluro/fluro.dart;
import ../pages/detail_page.dart;

Handler detailHandler = Handler(
   handlerFunc:(BuildContext context,Map<String,List<String>> params){
     String goodsId = params[id].first;//传入商品id
     return DetailPage(goodsId);//返回DetailPage页面
   }
);

4，在routers文件夹下创建routers.dart页面

import package:flutter/material.dart;
import package:fluro/fluro.dart;
import ./router_handler.dart;

class Routes {
  static String root = /;//根目录
  static String detailsPage = /detail;//详情页路由
  static void configureRoutes(Router router){
    //如果找不到页面
    router.notFoundHandler = new Handler(
      handlerFunc: (BuildContext context,Map<String,List<String>> params){
        print("router not found");
      }
    );
    router.define(detailsPage, handler: detailHandler);//配置页面路由
  }
}

4，路由静态化 在routers文件夹下创建application.dart

import package:fluro/fluro.dart;
class Application{
  static Router router;
}

5,在main.dart中引入路由

import ./routers/routers.dart;
import ./routers/application.dart

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    //路由配置
    final router =  Router();
    Routes.configureRoutes(router);
    Application.router = router;

    return Container(
      child: MaterialApp(
        title: KeyString.mainTitle,//flutter商城
        onGenerateRoute: Application.router.generator,//配置路由
        debugShowCheckedModeBanner: false,//隐藏右上角debugger
        theme: ThemeData(
          primaryColor: KeyColor.primayColor,//主题颜色
        ),
        home: IndexPage()
      )
    );
  }
}

6，在相应地方做路由跳转

import ../routers/application.dart;
onTap: (){
     Application.router.navigateTo(context, "detail?id=${el[goodsId]}");
},