Accessibility
提升應用程序的可訪問性,使得有視覺或聽覺障礙的用戶也能夠更容易地使用你的應用
Semantics
幫助屏幕閱讀器了解應用程序的結構和內容
ExcludeSemantics
使用這個 widget 來設置不需要被屏幕閱讀器讀取的內容
MergeSemantics
將多個 widget 的信息合併為一個
Animation and motion
增添動畫效果
AnimatedAlign
AnimatedBuilder
AnimatedContainer
AnimatedCrossFade
AnimatedDefaultTextStyle
AnimatedList
AnimatedListState
AnimatedModalBarrier
AnimatedOpacity
AnimatedPhysicalModel
AnimatedPositioned
AnimatedSize
AnimatedWidget
ImplicilyAnimatedWidget
DecoratedBoxTransition
FadeTransition
Hero
PositionedTransition
RotationTransition
ScaleTransition
SizeTransition
SlideTransition
Assets, images, and icons
在應用中顯示圖像和圖標
AssetBundle
靜態文件,例如圖片、字體、圖標等
Icon
顯示圖標
Image
顯示圖像
RawImage
顯示內存中直接提供圖像的位圖數據
Async
處理和顯示異步數據
FutureBuilder
最常用的,構建異步數據處理 widgets
StreamBuilder
用來處理例如持續更新的數據源
Basic
基礎 widget,構成基礎結構和交互元素
Text
顯示文本。可設定樣式、對齊方式等屬性。
Row
水平方向上佈局 child widget
Column
垂直方向上佈局 child widget
Container
設置佈局、填充、邊距、背景色等
Scaffold
Material Design 的佈局結構,包含應用欄、抽屜菜單和底部導航欄等。
AppBar
應用欄,一般用於顯示應用的標題和操作按鈕
Icon
顯示圖標
ElevatedButton
帶有陰影效果的凸起按鈕
FlutterLogo
顯示 Flutter 標誌
Image
顯示圖像
Placeholder
一個灰色的方框,在開發過程中用來占位或測試佈局
Cupertino (iOS-style widgets)
模擬 iOS 風格的 widgets
CupertinoActionSheet
CupertinoActionSheetAction
CupertinoActivityIndicator
CupertinoAdaptiveTextSelectionToolbar
CupertinoAlertDialog
CupertinoApp
CupertinoButton
CupertinoCheckBox
CupertinoColors
CupertinoContextMenu
CupertinoContextMenuAction
CupertinoDatePicker
CupertinoDesktopTextSelectionControls
CupertinoDesktopTextselectionToolbar
CupertinoDialogAction
CupertinoDialogRoute
CupertinoDynamicColor
CupertinoFormRow
CupertinoFormSelection
CupertinoFullscreenDialogTransition
CupertinoThemeData
CupertinoListSection
CupertinoListTile
CupertinoTileChevron
CupertinoLocalizations
CupertinoMagnifier
CupertinoModalPopupRoute
CupertinoNavigationBar
CupertinoNavigationBarBackButton
CupertinoPage
CupertinoPageRoute
CupertinoPageScaffold
CupertinoPageTransition
CupertinoPicker
CupertinoPickerDafualtSelectionOverlay
CupertinoPopupSurface
CupertinoRadio
CupertinoScrollbar
CupertinoScrollBehavior
CupertinoSearchTextField
CupertinoSegmentedControl
CupertinoSlider
CupertinoSliderSegmentedControl
CupertinoSliverNavigationBar
CupertinoSliverRefreshControl
CupertinoSpellCheckSuggestionsToolbar
CuppertinoTabBar
CupertinoTabController
CupertinoTabScaffold
CupertinoTabView
CupertinoTextField
CupertinoTextFormFieldRow
CupertinoTextMagnifier
CupertinoTextSelectionControls
CupertinoTextSelectoinToolbar
CupertinoTextSelectionToolbarButton
CupertinoTextThememData
CupertinoTheme
CupertinoThemeData
CupertinoThumbPainter
CupertinoTimerPicker
Input
處理用戶輸入和表單數據
Autocomplete
顯示一個建議列表提供自動補全功能
Form
用於組織和管理多個 FormFields 的容器
FormField
包含輸入控件(如 TextField)及其驗證和狀態管理邏輯
KeyboardListener
監聽鍵盤事件,例如按鍵按下、釋放等
Interaction models
處理用戶交互事件,包括管理和響應用戶操作
Touch Interactions
AbsorbPointer
阻止其child widget 接收觸摸事件
Dismissible
創建可滑動的列表項。用戶可以通過滑動來刪除或更改項目。
DragTarget
接收拖放操作中的拖動數據
Draggable
允許 widget 被拖動
DraggableScrollableSheet
創建一個可以拖動和滾動的底部工作表
GestureDetector
用於檢測和處理手勢,如點擊、長按、拖動等
IgnorePointer
與 AbsorbPointer 類似,但它只是忽略觸摸事件,而不會阻止child widget 的相應。
InteractioveViewer
允許用戶縮放和拖動其child widget
LongPressDraggable
允許用戶在長按時拖動 widget
Scrollable
處理滾動
Routing
Hero
不同頁面之間創建動畫過渡效果
Navigator
管理應用中的頁面堆疊,如 push 和 pop 等操作
Layout
佈局,如何安排和顯示 widget 以構建界面
Single-child layout
Aligh
用於將child widget 在其父 widget 中對齊
AspectRatio
使其child widget 具有指定的寬高比
Baseline
用於對齊child widget 的基線
Center
將其child widget 放置在父 widget 的中心
ConstrainedBox
對child widget 應用額外的約束,如最大和最小尺寸
Container
用於添加填充、邊框、顏色、尺寸等
CustomSingleChildLayout
自定義單個child widget 的佈局邏輯
Expanded
用於擴展child widget 以填充可用的空間,通常與 Row 或 Column 一起使用
FittedBox
將其child widget 按指定的比例縮放以適應其父 widget
FractionallySizedBox
將其child widget 按父 widget 的比例縮放
IntrinsicHeight
確保其child widget 的高度為內部內容的最小高度
IntrinsicWidth
確保其child widget 的寬度為內部內容的最小寬度
LimitedBox
用於設置child widget 的最大尺寸,當其父 widget 的尺寸是無限大的時候特別有用。
Offstage
將其child widget 隱藏,但仍然保留其佔用的空間
Padding
為child widget 添加內邊距
SizeBox
用於指定child widget 的固定尺寸
OverflowBox
允許child widget 擴展超出其父 widget 的邊界
SizeOverflowBox
是 OverflowBox 的一個特化版本,用於處理尺寸溢出
Transform
用於對其child widget 應用變換,如旋轉、縮放或平移
Multi-child layout
Column
將child widget 垂直排列
CustomMultiChildLayout
自定義多個child widget 的佈局邏輯
Flow
將child widget 按自定義方式流動,適用於需要複雜佈局的情況
GridView
顯示多列多行的網格布局
IndexedStack
顯示堆疊中的指定索引的child widget,其他child widget 隱藏
LayoutBuilder
允許根據父 widget 的尺寸動態構建其child widget
ListBody
用於垂直或水平排列其child widget
ListView
顯示垂直或水平滾動的列表,適合處理動態數據列表
Row
將child widget 水平排列
Stack
將child widget 疊加在一起。Stack 的child widget 可以定位在特定位置
Table
顯示表格佈局,行和列可以包含多個child widget
Wrap
將child widget 按行或列包裝排列,當空間不足時自動換行
Sliver
用於構建高效滾動的視圖,通常與 CustomScrollView 一起使用
CupertinoSlicerNacigationBar
可隨滾動效果調整高度的頂部導航列
CupertinoSliverRefreshControl
下拉刷新控件
CustomScrollView
創建自定義的滾動視圖,可以包含多個 sliver
SlicerAppBar
隨滾動效果變化的應用欄,通常用於創建隨滾動收縮的標題區域
SlicerChildBuilderDelegate
用於懶加載列表子項。與 SliverList 和 SliverGrid 一起使用
SliverList
創建滾動列表視圖
SliverGrid
創建滾動網格視圖
SliverChildListDelegate
用於靜態子項列表
SlicerFixedExtentList
用於創建固定高度的滾動列表
SliverPadding
在其他 sliver 周圍添加填充
SliverPersistentHeader
創建持久的標題區域,通常用於固定標題
SliverToBoxAdapter
將常規 widget 包裝為 sliver
Material components
基於 Google 的 Material Design 規範構建的 UI 元件
Action
Common buttons
ElevatedButton
帶有陰影和浮動效果的按鈕,適合用於突出主要操作
FilledButton
完全填充的按鈕,提供更強的視覺突出效果
FilledButton.tonal
色調較低的填充按鈕,相比於 FilledButton,視覺效果較為柔和
OutlinedButton
帶有邊框的按鈕,但沒有填充背景。它適合用於次要操作
TextButton
無邊框無背景的按鈕,最為簡單。通常用於工具欄或對話框中的次要操作
FloatingActionButtin
用於主要操作,通常位於屏幕右下角
Small
Regular
Large
Extended
延伸的浮動操作按鈕,帶有文本標籤
IconButton
僅包含圖標的按鈕
SegmentedButton
一組按鈕顯示多個選項
Communication
Badge
顯示小徽章,例如通知數量
LinearProgressIndicator
線性進度指示器
SnackBar
短暫的消息提示,通常顯示在屏幕底部
Containment
AlertDialog
彈出對話框,用於重要信息或確認操作
Bottom sheet
從屏幕底部滑入的面板
Card
容器,具有圓角和陰影
Divider
用於分隔列表項的線條
ListTile
列表中的單個項目,通常包含圖標和文本
Navigation
AppBar
應用欄,顯示應用名稱和操作
Bottom app bar
底部應用欄,通常與 FloatingActionButton 一起使用
NavigationBar
底部用於不同頁面導航
NavigationDrawer
側邊導航欄,可以從屏幕邊緣滑入,顯示應用的不同頁面或功能
Navigation rail
固定的側邊導航面板,用於在應用的主要部分之間導航
TabBar
用於顯示標籤,通常與 TabBarView 一起使用
Selection
Checkbox
勾選框,用於表示二選一選項
Chip
顯示屬性、標籤或簡短的描述,通常用於可選的標籤或進行過濾操作
DatePicker
日期選擇器
TimePicker
時間選擇器
Menu
彈出菜單,用於顯示多個選項
Radio
單選按鈕,用於多個互斥選項
Slider
滑塊,用於選擇範圍內的值
Switch
開關,用於表示開啟或關閉狀態
Text inputs
TextField
文本輸入欄位
Paitnig and effects
自訂繪圖和應用視覺效果
BackgropFilter
應用背景模糊或其他效果
ClipOval
將child widget剪裁為橢圓形
ClipPath
使用自定義的路徑來剪裁child widget
ClipRect
將child widget剪裁為矩形
CustonPaint
繪製圖形和其他自定義繪圖
DecoratedBox
將裝飾應用於child widget
FractionalTranslation
按照相對於自身大小的比例來平移child widget
Opacity
調整child widget的不透明度
RotatedBox
按 90 度的增量旋轉child widget
Transform
應用 2D 變換,例如旋轉、縮放和平移
Scrolling
用於顯示可滾動的內容
CustonScrollView
自定義滾動視圖,可以創建複雜的滾動效果,包含不同類型的滾動內容
DraggableScrollableSheet
可拖動的滾動表單,可用於創建部分屏幕顯示的滾動表單
GridView
顯示網格佈局的滾動視圖
ListView
顯示線性佈局的滾動視圖
NestedScrollView
內嵌滾動視圖,允許創建嵌套滾動效果
NotificationListener
監聽滾動通知的 widget,可用於檢測滾動事件
PageView
顯示可以水平或垂直滾動的頁面視圖
RefreshIndicator
包裹滾動視圖以添加下拉刷新功能
ReorderableListView
支持拖放重新排序的滾動列表
ScrollConfiguration
用於自定義滾動行為(控制滾動效果、物理效果)和視圖的全局配置
Scrollable
自定義可滾動區域的低級別 widget
Scrollbar
顯示滾動條,讓用戶更容易看到可滾動內容
SingleChildScrollView
創建單個child widget的滾動視圖,適合於內容少、只需垂直或水平滾動的單個 widget
Styling
處理應用程式中的佈局、樣式和整體外觀設定
MediaQuery
提供有關設備屏幕大小、方向、顯示密度等信息。通常用於響應式設計中,根據不同設備調整 UI
Padding
在child widget周圍添加內邊距
Theme
配置應用的整體外觀和感覺。可以定義應用中的顏色、字體、形狀等
Text
用於顯示和格式化文本的基本組件
DefaultTextStyle
設定其child widget 的默認文本樣式。所有child widget 都會繼承這個文本樣式
RichText
顯示具有不同樣式的多段文本
Text
顯示簡單的單一樣式文本。它是最常用的文本 widget