Flutter實戰視頻-移動電商-40.路由_Fluro的全局注入和使用方法

40.路由_Fluro的全局注入和使用方法

路由註冊到頂層，使每一個頁面均可以使用，註冊到頂層就須要在main.dart中

main.dart註冊路由

注入

onGenerateRoute是MaterialApp自帶的路由配置項，

 

首頁跳轉到詳細頁

 

 

 

 

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

 

 

_wrapList火爆專區的商品，點擊進行跳轉

那麼這個/detail是在哪裏定義的呢？看下圖，是在routers.dart中配置的

而後再傳id過去

id在路由的這個地方配置的

 

flutter run 進行測試

咱們details商品頁自己也是比較簡單的，就顯示了接收的商品的goodsId

 

最終代碼

 

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

main.dart

 

 

home_page.dart頁面主要一行代碼，路由跳轉的代碼：

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