Flutter移动电商实战 --（40）路由_Fluro的全局注入和使用方法

素颜马尾好姑娘i 2023-06-01 06:04 6阅读 0赞

路由注册到顶层，使每个页面都可以使用，注册到顶层就需要在main.dart中

# main.dart注册路由 #

![1090399-20190908222928162-720543967.png][]

# 注入 #

onGenerateRoute是MaterialApp自带的路由配置项，

![1090399-20190908222948852-1045388269.png][]

# 首页跳转到详细页 #

![1090399-20190908223020128-482996127.png][]

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

\_wrapList火爆专区的商品，点击进行跳转

![1090399-20190908223058491-258902005.png][]

那么这个/detail是在哪里定义的呢？看下图，是在routers.dart中配置的

![1090399-20190908223129702-1182625077.png][]

然后再传id过去

![1090399-20190908223159767-1217623902.png][]

id在路由的这个地方配置的

![1090399-20190908223231605-1047021622.png][]

# flutter run 进行测试 #

![1090399-20190908223303087-2112369349.png][]

![1090399-20190908223331954-1801093146.png][]

我们details商品页本身也是比较简单的，就显示了接收的商品的goodsId

![1090399-20190908223404419-1294479474.png][]

# 最终代码 #

main.dart

import 'package:flutter/material.dart';
    import './pages/index_page.dart';
    import 'package:provide/provide.dart';
    import './provide/counter.dart';
    import './provide/child_category.dart';
    import './provide/category_goods_list.dart';
    import 'package:fluro/fluro.dart';
    import './routers/routers.dart';
    import './routers/application.dart';
    
    
    void main(){
     var counter=Counter();
     var childCategory=ChildCategory();
     var categoryGoodsListProvide=CategoryGoodsListProvide();
     var providers=Providers();
     //final router=Router();//Router就是我们的Fluro
     //注册 依赖
     providers
     ..provide(Provider<Counter>.value(counter))
     ..provide(Provider<CategoryGoodsListProvide>.value(categoryGoodsListProvide))
     ..provide(Provider<ChildCategory>.value(childCategory)); 
      runApp(ProviderNode(child: MyApp(),providers: providers,));
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
    
        final router=Router();//Router就是我们的Fluro
        Routes.configurreRoutes(router);//注册router
        Application.router=router;//静态化
    
        return Container(
          child:MaterialApp(
            title:'百姓生活+',
            onGenerateRoute: Application.router.generator,
            debugShowCheckedModeBanner: false,
            theme: ThemeData(
              primaryColor: Colors.pink
            ),
            home: IndexPage(),
          )
        );
      }
    }

home\_page.dart页面主要一行代码，路由跳转的代码：

Application.router.navigateTo(context, '/detail?id=${val['goodsId']}');

转载于:https://www.cnblogs.com/crazycode2/p/11488621.html

[1090399-20190908222928162-720543967.png]: /images/20230601/1a2d02d7f53042a7a8b3b9f0eec729d2.png
[1090399-20190908222948852-1045388269.png]: /images/20230601/4e3859e75c3344c1a24cc2f39aee49d7.png
[1090399-20190908223020128-482996127.png]: /images/20230601/4ac2c5746c444a4dbded115942f4f197.png
[1090399-20190908223058491-258902005.png]: /images/20230601/4c4f718e807f4ad9a922bd48ddcd837f.png
[1090399-20190908223129702-1182625077.png]: /images/20230601/3b54b437ab3642aab95155eff171c467.png
[1090399-20190908223159767-1217623902.png]: /images/20230601/669c81aef98c4cbdbb8baf1d6a16d156.png
[1090399-20190908223231605-1047021622.png]: /images/20230601/2d11cf60933c4cb899642c2e195a86f6.png
[1090399-20190908223303087-2112369349.png]: /images/20230601/471a164c24ed43f6a9f5ef39fed50ef0.png
[1090399-20190908223331954-1801093146.png]: /images/20230601/064dc4271ea942159c40a2dfa3f87a7c.png
[1090399-20190908223404419-1294479474.png]: /images/20230601/8e2e3b50b3654681af4ca256a403c072.png