https://space.bilibili.com/64169458/channel/detail?cid=131083
SafeArea
this.left = true,
this.top = true,
this.right = true,
this.bottom = true,
this.minimum = EdgeInsets.zero,
this.maintainBottomViewPadding = false,
SafeArea 如果頂部和底部都是圓角,比如iPhone,如果不指定top的話,bottom也會有padding,用在title的時候就有問題
Expanded
擴張
int flex = 1, // 擴張系數
配合Row Column 使用,除去精確寬高之后,可以占滿剩下的布局
Wrap
類似流式布局,當一行空間放不下時,會把控件放到下一行,適用于標簽類的布局和小圖標
this.direction = Axis.horizontal,
this.alignment = WrapAlignment.start,
this.spacing = 0.0,
this.runAlignment = WrapAlignment.start,
this.runSpacing = 0.0,
this.crossAxisAlignment = WrapCrossAlignment.start,
this.textDirection,
this.verticalDirection = VerticalDirection.down,
this.clipBehavior = Clip.hardEdge,
AnimatedContainer
Container的動畫,以Animated開頭的有很多類似的組件
this.alignment,
this.padding,
Color color,
Decoration decoration,
this.foregroundDecoration,
double width,
double height,
BoxConstraints constraints,
this.margin,
this.transform,
this.child,
Curve curve = Curves.linear,
@required Duration duration,
VoidCallback onEnd,
Opacity
漸變動畫,漸顯漸隱的效果,但是位置被占著。
0是transparent,1是顯示
AnimatedOpacity 可以添加動畫
FutureBuilder
異步組件
FadeTransition
淡入淡出Widget
FloatingActionButton
配合Scaffold和bottomNavigationBar可以把這個放到中間
PageView
PageView在增刪更新不及時的時候,需要增加key,
Table
表格
defaultVerticalAlignment可以設置table里面的item對齊方式
SliverAppBar
需要和CustomScrollView一起使用,可以實現推上去的效果
SliverGrid SliverList
Grid和List同時在一個滾動視圖里面
FadeInImage
異步圖片占位圖
FadeInImage.memoryNetwork
透明占位圖:kTransparentImage
StreamBuilder
事件流控件
InheritedModel
provider里面用到,子控件狀態跟隨父控件狀態
ClipRRect
clip round rect
圓角裁切,類似的還有ClipOval ClipPath之類
Hero
過渡動畫,兩個Navigator之間可以做過渡
CustomPaint
自定義畫筆
Tooltip
給視力不佳的人使用,增加提示信息
FittedBox
當子控件大于父控件的時候,讓子控件適配父控件
fit
alignment
LayoutBuilder
可以獲得父控件的布局約束,大小
AbsorbPointer
禁止點擊、滑動
Transform
各種復雜動畫
ImageFilter
圖片處理,模糊、傾斜、旋轉等
配合BackdropFilter使用,達到模糊效果,前模糊、背景模糊、局部模糊
詳情見高斯模糊
Align
比例用法
Positioned
配合Stack使用,放置位置
AnimatedBuilder
動畫組件
Dismissible
左滑刪除,左滑右滑都可以操作
Dismissible 小部件可通過向左或向右滑動來清除列表項。對于多方向滑動,它支持兩種背景,如果您的 UI 需要用戶垂直滑動,則有一個方向屬性!
SizedBox
使用 SizedBox,您可以設置任何部件的確切大小。可以指定兩個維度;或者只指定一個維度,讓 Flutter 布局規則設定另一個維度。
子控件設置width和height不生效,和父控件一樣大的時候,可以套這個或者UnconstrainedBox
ValueListenableBuilder
使用 ValueListenableBuilder 來為您的用戶界面進行實時的數據更新。同樣適用于動畫類控件!
Draggable
配合DragTarget使用,可以實現拖動控件
AnimatedList
列表刪除插入動畫
Flexible
靈活布局,可以按比例放置
MediaQuery
獲取用戶設備大小、方向、系統UI的遮擋部分(類似SafeArea)
Spacer
自定義間距
InheritedWidget
允許跨組件更新數據,provider使用了這個
AnimatedIcon
使用 AnimatedIcon 小部件將動畫圖標直接拖放到您的應用程序中。Flutter 還有很多靜態圖標可供選擇。
播放暫停動畫很好看
AspectRatio
寬高比控件
LimitedBox
父控件無約束時為子控件提供默認大小
父控件有大小,LimitedBox無效
Placeholder
占位控件
RichText
富文本,配合TextSpan使用
ReorderableListView
ReorderableListView 展示出一個項目列表,用戶可以通過拖動項目到他們想要的地方來重新排序。
AnimatedSwitcher
兩個控件切換動畫,配合key使用可以動其中一個控件
AnimatedPositioned
滑動的Positioned動畫
AnimatedPadding
Padding改變時,可以有動效
AnimatedPadding 是在 Widget 和屏幕邊框之間提供平滑緩沖區和空格的好方法。使用此選項可動態更改 Widget 的填充,并使其在兩個值之間設置動畫。
IndexedStack
這個類似Visibility,具體見對比
Semantics
為UI提供額外含義,有50多個屬性
ConstrainedBox
Flutter ConstrainedBox Widget 非常適合添加 Widget 大小調整行為的要求。在 ConstrainedBox 中包裝 Widget 可讓您指定其最小和最大寬度和高度。
Stack
如果您曾想要重疊元素,那么 Stack 小部件就是為您準備的!Stack 允許您將多個小部件疊加在一起。 例如,您可以使用 Stack 在圖像上添加文本。
疊加超出父控件大小,可以選擇剪裁掉
AnimatedOpacity
淡入淡出的動畫
FractionallySizedBox
有時您的設計需要相對的維度。 FractionallySizedBox 允許您將子項的大小調整為總可用空間的一小部分。
比例布局,在Row和Column要套一個Flexible
ListView
ListView.builder只加載可見部分
cacheExtent緩存屏幕外內容
Container
您是否有需要一些設計的 widget,例如背景顏色,形狀或某些大小限制?嘗試將其包裝在 Container 中!可幫助您組成,裝飾和定位子 widget。
ListTile
為什么要花費數小時來實現行、列、容器以及各種間距和樣式的完美項目布局?你只需要 ListTile 就能搞定! ListTile 為你實現 Material Design 模式的列表項,你只需要關注其中的內容即可
SelectableText
您是否曾經想過要使應用程序中的一些文本可被選擇呢? SelectableText 正是適合您的 widget!
DataTable
您是否有一些重要數據要以表格的方式顯示給用戶?使用 DataTable 定義列,行并自動調整單元格大小!
Slider
滑動進度條
AlertDialog
系統彈窗,不好用
AnimatedCrossFade
交叉淡入本是電影術語,意指一要素漸進淡入另一要素。若 Flutter widget 也有類似功能不是實用嗎? 這方面,AnimatedCrossFade 就是解決方案。
切換組件
60. DraggableScrollableSheet
您是否想將小部件拖到屏幕上? 小部件是否具有可滾動的內容? DraggableScrollableSheet 可以幫助您!
showModalBottomSheet的升級版,可以放大Sheet的區域
ColorFiltered
ToggleButtons
您想讓用戶從多個相關選項中選擇嗎? 將 ToggleButtons 添加到您的應用程序會有所幫助!
CupertinoActionSheet
您是否正在構建一個需要向用戶提供一系列下一步操作選項的 iOS 風格應用程序? CupertinoActionSheet 是適合您的 Widget!
TweenAnimationBuilder
您是否想要一個簡單的動畫,但是沒有一個內置的隱式動畫 widget 能解決問題? TweenAnimationBuilder 可以滿足您所有自定義動畫的需求,而無需擔心 AnimationController!
65. Image
您的 app 需要顯示圖片嗎?讓 Flutter 助您一臂之力。無論圖片來源是 assets (有時稱為資源)、網絡、文件系統還是 RAM (隨機存取內存)等等,都可利用 Image 這個 widget 顯示于屏幕。
66. DefaultTabController & TabBar
您需要將 widget 置入標簽頁嗎?您可以使用 DefaultTabController、TabBar 和 TabBarView 小部件。
Drawer
需要為其他頁面提供導航?歡迎嘗試使用 Drawer!
SnackBar
您是否想在應用中顯示快速消息?那么 SnackBar 非常適合您!SnackBar 可以讓您在應用程序的底部彈出一條消息幾秒鐘。
ListWheelScrollView
ListViews 能讓使用者瀏覽或選擇屏幕無法一次顯示的 item。不過有時候,一般的 ListView 太過枯燥乏味,好在有ListWheelScrollView。而本集視頻會揭曉其實用之處。
可以試一下實現之前輪盤效果
ShaderMask
著色器可以把控件疊加顏色,可以做ListView的陰影
NotificationListener
你知道 widget 可以分派通知 (notification) 嗎?例如 ListView 這類含有Scrollable組件的Widget,就會分派滾動通知。這方面可利用 NotificationListener 來處理這類通知。
72. Builder
大多數情況下,Flutter 中的部件在構建時,不會查找父部件的額外信息。但有時,編碼時會遇到的一些狀況是相同 BuildMethod 下,子部件需要存取父部件中的 BuildContext,這就是 Builder 部件的用途。
閉包思想,在獲取點擊位置的時候用到了,見文檔
ClipPath
您是否希望 widget 具有獨特的形狀? ClipPath 允許您定義自己的 widget 形狀!給定一個 CustomerClipper 和您定義的路徑,ClipPath 將把 widget 的可見區域限制在此路徑內。
CircularProgressIndicator and LinearProgressIndicator
您想要顯示 Material App 的任務完成進度或是它正在執行任務嗎?我們有一些 widget 可以派上用場!您可以使用 CircularProgressIndicator,以圓形進度條顯示進度。若喜歡用線性的進度條 請使用 LinearProgressIndicator。
Divider
當兩個 Widget 彼此之間需要一些空間時,在它們之間繪制一條線會很有幫助。無論您有需要分開的 Widget 還是 Widget 組,Divider Widget 都非常有用。了解如何劃分 Widget 并準確獲得所需尺寸!
ThemeData統一主題,可以把分割線統一處理
IgnorePointer
防止用戶與 app 的某些部分進行交互可能會派上用場。當 UI 改變了用戶的點擊使用方式時,這實際上是一個非常常見且令人沮喪的問題。您可以通過禁用 app 中的所有交互式元素來解決此問題,或者可以使用 IgnorePointer。
- CupertinoActivityIndicator
如果您在 UI 中使用 Cupertino Widget,而您的應用程序需要加載指示器,那么可以選用 CupertinoActivityIndicator Widget!
iOS的圓形加載中
ClipOval
有時,圖片或屏幕的其他部分看起來可能過于方正。而 ClipOval Widget 可將其子級裁剪為圓形和橢圓形。因此請發揮創意加以善用。
AnimatedWidget
是個抽象類,動畫有許多不同的選項。在許多情況下,只需使用 AnimatedWidget 即可使 widget 實現動畫。了解一些已經為您構建的動畫 widget,以及如何構建自己的動畫 widget!
Padding
內邊距
CheckboxListTile
有時候,應用程序需要一個地方來放置法律條款、版本號、許可證和所有其他的小字號附加條款。不能到最后一刻才開始創建這部分。如果您遇到這種情況,有一個 Flutter Widgets 可以幫您解決!
多選
AboutDialog
83. Package:async
如果您使用 Dart 編碼,則可能已經使用了 SDK 內置的異步支持,例如 Streams。您是否知道還有一個異步軟件包,其中包含許多有用的附加內容?