Flutter学习笔记(二) 搭建App

以开发一款APP来说解使用到的相关知识。

1、使用AndroidStudio 建立Flutter Application

2、建立Splash页

通常开屏页，就是展现一张图片。

1. 图片加载方式 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
    )
复制代码

2. 布局 有时不须要图片全屏，由于图片缩放可能会致使变形，这时可使用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.im/post/5b4439…

3. 延迟跳转到下个页面

Flutter中State生命周期

segmentfault.com/a/119000001…

Flutter自带函数

Future.delayed(Duration(milliseconds: 500), () {
});
复制代码

或者使用Rxdart

Observable.just(1).delay(new Duration(milliseconds: 500)).listen((_) {
    });
复制代码

3、新手引导页 Swiper

可使用Flutter提供的轮播组件Swiper。

github.com/best-flutte…

4、开屏和新手引导切换 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掉。

5、新手引导保存

使用Flutter Plugin中的shared_preferences。 github.com/flutter/plu…