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…