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

摘要:
id=${val['goodsId']}');
40.路由_Fluro的全局注入和使用方法

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

main.dart注册路由

Flutter实战视频-移动电商-40.路由_Fluro的全局注入和使用方法第1张

注入

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

Flutter实战视频-移动电商-40.路由_Fluro的全局注入和使用方法第2张

首页跳转到详细页

Flutter实战视频-移动电商-40.路由_Fluro的全局注入和使用方法第3张

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

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

Flutter实战视频-移动电商-40.路由_Fluro的全局注入和使用方法第4张

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

Flutter实战视频-移动电商-40.路由_Fluro的全局注入和使用方法第5张

然后再传id过去

Flutter实战视频-移动电商-40.路由_Fluro的全局注入和使用方法第6张

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

Flutter实战视频-移动电商-40.路由_Fluro的全局注入和使用方法第7张

flutter run 进行测试

Flutter实战视频-移动电商-40.路由_Fluro的全局注入和使用方法第8张

Flutter实战视频-移动电商-40.路由_Fluro的全局注入和使用方法第9张

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

Flutter实战视频-移动电商-40.路由_Fluro的全局注入和使用方法第10张

最终代码
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';
voidmain(){
 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,));
}
classMyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final router=Router();//Router就是我们的Fluro
    Routes.configurreRoutes(router);//注册router
    Application.router=router;//静态化
    returnContainer(
      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']}');

免责声明:文章转载自《Flutter实战视频-移动电商-40.路由_Fluro的全局注入和使用方法》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇下拉框处理(select)spring Websocket 报 No suitab le default RequestUpgradeStrategy found下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

随便看看

微信扫码网页登录,redirect_uri参数错误解决方法

对于微信开放平台[管理中心/应用程序详细信息]中设置的[开发信息][授权回调域],只需填写域名,无需https://,也无需特定页面。您不需要填写完整的请求路径,如图所示:https://open.weixin.qq.com/connect/qrconnect?appid=您的APPID&direct_Uri=回调和响应的特定地址_type=code...

EwoMail 开源邮件服务器安装教程

本教程示例中使用的主要域名是ewomail.cn。设置主机名EwoMail将在安装后默认使用带有域名前缀mail的主机名。例如,mail.ewomail。cn将系统主机名更改为mail.ewomail.cn。查看当前主机名hostname-f修改主机名,修改文件/etc/sysconfig/network修改文件/etc/hosts,添加mail.ewoma...

带EFI支持的GRUB2安装全记录

--引导目录#定义引导目录。默认前缀是/boot/grub2,因此我们可以直接定义/。但是,如果您将其安装在EFI系统上,则可以直接写入EFI的装载点=====2016-02-26===============在新版本的grub2中找不到引导目录参数。特别是,在安装EFI时,需要将其更改为--EFI目录,否则您将找不到EFI目录的错误。grub2-insta...

EasyPoi导入验证功能

1准备好要导入的Excel,注意Excel的标题要和domain中的@Excel一样1导入验证包支持˂!...

Oracle分组查询

2). 在分组函数中使用NVL函数–NVL函数可以强制分组函数包含具有空值的记录3)当存在空数据和空数据时,可以组合单行函数来使用,例如:计算员工的平均奖金。如果没有奖金,它将被视为0 selectcount(*),count,avg,avgfromemp--补充注释1)当最小和最大计数字符类型时,它们将根据字符序列计数最小和最大。如果值为空,则MIN和MA...

chm 转 txt

CHM格式可以转换为TXT。如果命令行可以在Windows下使用,为了便于描述,以作者的机器为例。E:11文件夹中有一个123.chm文件。按照以下步骤将CHM转换为TXT文件。步骤1:将CHM文件解压缩到TXT1中,启动CMD控制台,并导航到E:11目录,即123.CHM所在的文件夹2。输入命令将其解压缩到TXT3解压缩状态。解压缩后,打开123文件夹,其...