無意間發現這個頻道, 發現蠻不錯的, 最近自學Flutter來發現這真的是一個很不錯的玩具(?), 不過問題是他的Widget也太多了…
剛好有頻道一次整理起來, 裡面有一些是已知已經在用的, 有一些是目前還不知道要用在哪裡的, 所以想說把他列表起來, 方便之後自己查閱
原始檔：
Introduction screen
簡述：介紹頁面製作
Rich Text
簡述：段落裡面可以有不同的文字格式
https://gist.github.com/markcqhsu/cfb96428cf47f3256aa7b9fa77818db2
Flexible
Expanded
可以讓Widget佔據剩下所有的空間.
Circle Avatar
把圖片切成圓形.
Wrap
Row太多childern的時候, 可以改用Wrap來讓元件可以換行.
FittedBox
讓物件符合Container尺寸.
Splash screen
SnackBar
畫面底部提示訊息.
Visibility
想要讓元件消失/顯示切換的時候可以使用.
Spread Operator
展開運算子, 結合兩個List.
Status Bar Color & NavigationBarColor
Body Behind App Bar
透過extendBodyBehindAppBar: true, 來讓內容可以顯示在App bar背後.
SafeArea
避免元件被擋住.
ClipRRect
讓元件有圓角, 不過如果有使用Container的話, 就直接在decoration裡面設定borderradius即可.
Sliver App Bar
比起原本的appBar, 多了不少的效果, 建議使用.
Future Builder
讀取資料的時候可以使用, 用來顯示讀取進度條.
body: Center(
child: FutureBuilder(
future: getData(),
builder: (context, snapshot) {
return snapshot.connectionState == ConnectionState.waiting
? CircularProgressIndicator()
: Padding(
padding: const EdgeInsets.all(8.0),
);
},
)
),Platform Checking
因為iOS/Android的畫面會有區別, 如果要配合不同的平台的話, 可以特別去做判斷.Cupertino 開頭的就是蘋果平台的.
Platform.isAndroid? CircularProgressIndicartor():CupertinoActivityIndicator()MediaQuery
取得手機畫面大小.
GoogleFonts
透過GoogleFonts來設定字型.
child:Text(
"Google Fonts",
style:GoogleFonts.aguafinoScript().copWith(fontSize:60),
),Selectable Text
如果想要文字可以被使用者選取, 可以用SelectableText()
Hero
Hero動畫, 好像是Flutter的特色之一, 但還沒有真的用到, 看起來是圖片變化的動畫效果.
Animated Icon
Animated Container
Null-Aware Operator
child: Text(
textInformation ?? "No information",
),Lint
Launcher Icon
Interactive Viewer
能夠放大圖片, 事實上也是因為這個功能讓我想把這篇整理一下來參考.
child: InteractiveViewer(
child:Image.network("https://ssss/sss.png")),
)