以开发一款APP来讲解使用到的相关知识。
一、使用AndroidStudio 创建Flutter Application
二、创建Splash页
一般开屏页，就是展示一张图片。
-
图片加载方式 book.flutterchina.club/chapter3/im…
本地图片
- 需要先设置图片路径。pubspec.yaml assets: - assets/images/splash_bg.png
- 创建Image
Image(
image: AssetImage("assets/images/splash_bg.png"),
width:double.infinity // 强制在宽度上撑满
height:
color:
fit://缩放模式
alignment:Alignment.center //对齐方式
);
或
Image.asset("assets/images/splash_bg.png",
width: 100.0
)
- 布局 有时不需要图片全屏，因为图片缩放可能会导致变形，这时可以使用Container包一层，来设置背景。
return Container(
color: Colors.blue,
child: Image.asset(
"assets/images/splash_bg.png",
width: double.infinity,
height: double.infinity,
fit: BoxFit.contain,
alignment: Alignment.center,
),
);
在android中，存在启动空白页的情况。解决办法，参考 juejin.cn/post/684490…
- 延迟跳转到下个页面
Flutter中State生命周期
Flutter自带函数
Future.delayed(Duration(milliseconds: 500), () {
});
或者使用Rxdart
Observable.just(1).delay(new Duration(milliseconds: 500)).listen((_) {
});
三、新手引导页 Swiper
可以使用Flutter提供的轮播组件Swiper。
四、开屏和新手引导切换 Offstage
可以将开屏widget和新手引导widget统一在一个页面展示，只是分别切换widget。
可以自己实现控制widget的显示和隐藏，也可以使用Flutter提供的Offstage组件。
源码：
A widget that lays the child out as if it was in the tree, but without
painting anything, without making the child available for hit testing, and
without taking any room in the parent.
Animations continue to run in offstage children, and therefore use battery
and CPU time, regardless of whether the animations end up being visible.
[Offstage] can be used to measure the dimensions of a widget without
bringing it on screen (yet). To hide a widget from view while it is not
needed, prefer removing the widget from the tree entirely rather than
keeping it alive in an [Offstage] subtree.
查看其RenderOffstage可知，Offstage并不是通过插入或者删除自己在widget tree中的节点，来达到显示以及隐藏的效果，而是通过设置自身尺寸、不响应hitTest以及不绘制，来达到展示与隐藏的效果。 上面官方也建议，如果widget确定不需要展示，最好remove掉。
五、新手引导保存
使用Flutter Plugin中的shared_preferences。 github.com/flutter/plu…
