Flutter Mall Web——1启动页

上一篇文章进行了Flutter Web项目的体验，接下来将会实现商城的web端。

首先来实现启动页，web启用图片资源的方式比移动端的要方便很多不需要在pubspec文件中进行配置只需要在web目录下新建assets，assets目录下新建images目录如下图所示：

1.png
接下来完成一个启动页显示一张图片
Picture类用来管理图片资源，SplashView启动页来显示一张本地图片如下图所示
2.png
3.png
实现的效果
4.png
启动页完成以后需要跳转到主页面，这时候路由就需要上场了，路由本项目中用到的是fluro
先需要将fluro作为依赖添加到本项目中
5.png
然后执行flutter pub get将远程库下载到本地
编写router_handler这里是编写路由的规则，页面直接传递参数、参数值都是在这里完成的，项目里面的所有路由的handler都统一写在这个类面，这里只是简单的进行了页面的跳转，后面项目中将会介绍到传递参数。
6.png
路由配置及静态化
这里需要注意的一点是第一个页面的路由按照规则是需要配置成“/”，不然就会报错
7.png
为了全局都使用同一个router这里将router静态化
8.png
接下来全局注入router就可以开始愉快的使用router了
9.png
将整个项目的路由跳转统一放在NavigatorUtils中，从启动页跳到首页的时候将启动页移除所以replace参数设置为true
10.png
项目中用到的字体Style、颜色、文字、图片分别用一个类统一管理方便以后全局修改
QQ图片20191207200944.png
接下来实现启动页停留3秒进入主页
11.png
这篇文章主要实现这些功能。