動態

詳情 返回 返回

Flutter學習筆記:API - 動態 詳情

本文更新於2024-12-26,使用Flutter 3.3.3。

官方文檔:https://api.flutter.dev或https://api.flutter-io.cn

目錄
  • dart:ui 【UI庫】
    • 枚舉
      • TextDirection —— 文本方向
  • animation 【動畫庫】
      • AnimatedBuilder —— 動畫創建器
      • Animation<T> —— 動畫
      • AnimationController —— 動畫控制器
      • ColorTween —— 顏色補間
      • Curve —— 曲線
      • CurvedAnimation —— 曲線動畫/非線性動畫
      • Curves —— 曲線集
      • Interval —— 時間間隔
      • Locale —— 語系區域
      • Tween<T extends Object?> —— 補間
    • 枚舉
      • AnimationStatus —— 動畫狀態
  • flutter_localizations 【多語言本地化庫】
      • GlobalMaterialLocalizations —— Material風格組件的多語言本地化
      • GlobalWidgetsLocalizations —— 組件的多語言本地化
  • cupertino 【Cupertino(iOS)風格庫】
      • CupertinoActionSheet —— Cupertino設計風格的操作表
      • CupertinoActionSheetAction —— Cupertino設計風格的操作表的操作項
      • CupertinoActivityIndicator —— Cupertino設計風格的動作指示器
      • CupertinoAlertDialog —— Cupertino設計風格的提示框
      • CupertinoApp —— Cupertino設計風格APP
      • CupertinoButton —— Cupertino設計風格的按鈕
      • CupertinoColors —— Cupertino設計風格的顏色集
      • CupertinoDatePicker —— Cupertino設計風格的日期時間選擇器
      • CupertinoIcons —— Cupertino設計風格的圖標集
      • CupertinoNavigationBar —— Cupertino設計風格的導航欄
      • CupertinoPageRoute<T> —— Cupertino設計風格的頁面路由
      • CupertinoPageScaffold —— Cupertino設計風格的單頁面腳手架
      • CupertinoPicker —— Cupertino設計風格的選擇器
      • CupertinoSlider —— Cupertino設計風格的滑塊
      • CupertinoTabBar —— Cupertino設計風格的選項卡欄
      • CupertinoTabScaffold —— Cupertino設計風格的選項卡頁面腳手架
      • CupertinoTabView —— Cupertino設計風格的選項卡頁面內容視圖
      • CupertinoTimerPicker —— Cupertino設計風格的定時器選擇器
    • 枚舉
      • CupertinoTimerPickerMode —— Cupertino設計風格的定時器選擇器模式
    • 函數
      • showCupertinoDialog —— 展示Cupertino設計風格的對話框
      • showCupertinoModalPopup<T> —— 展示Cupertino設計風格的模態彈出對話框
  • driver_extension 【驅動擴展庫】
    • 函數
      • enableFlutterDriverExtension —— 啓用Flutter驅動擴展
  • flutter_driver 【驅動庫】
      • CommonFinders —— 普通查找器
      • FlutterDriver —— Flutter驅動
  • flutter_test 【測試庫】
      • CommonFinders —— 普通查找器
      • WidgetTester —— 組件測試類
    • 常量
      • find —— 查找器
      • findsNothing —— 查找不到組件
      • findsOneWidget —— 查找到一個組件
    • 函數
      • expect —— 測試結果期望
      • group —— 註冊測試組
      • setUpAll —— 註冊在所有測試執行前的動作
      • tearDownAll —— 註冊在所有測試執行後的動作
      • test —— 註冊單元測試
      • testWidgets —— 註冊組件測試
  • foundation 【基礎庫】
    • 屬性
      • debugPrint —— 調試打印
  • gestures 【手勢庫】
      • GestureArenaMember —— 手勢競技員
      • GestureRecognizer —— 手勢識別器
      • PointerEvent —— 指向事件
  • physics 【物理效果庫】
  • material 【Material(Android)風格庫】
      • AboutListTile —— 展示“關於”信息的列表瓦片
      • AlertDialog —— 提示框
      • AppBar —— 應用程序欄
      • BottomNavigationBar —— 底部導航欄
      • Card —— 卡片
      • Checkbox —— 複選框
      • Chip —— 碎片/標籤
      • CircleAvatar —— 圓形頭像
      • CircularProgressIndicator —— 圓形進度條
      • Colors —— 顏色集
      • Divider —— 分隔線
      • Drawer —— 抽屜
      • DrawerHeader —— 抽屜頭
      • ElevatedButton —— 突起按鈕
      • ExpansionPanel —— 可展開面板
      • ExpansionPanelList —— 可展開面板列表
      • FloatingActionButton —— 浮動操作按鈕
      • MaterialApp —— Material設計風格APP
      • MaterialButton —— Material設計風格按鈕
      • MaterialPageRoute<T> —— Material設計風格頁面的路由
      • IconButton —— 圖標按鈕
      • Icons —— 圖標集
      • InkWell —— 水波紋
      • InputDecoration —— 輸入裝飾
      • LinearProgressIndicator —— 水平進度條
      • ListTile —— 列表瓦片
      • OutlinedButton —— 線框按鈕
      • PopupMenuButton<T> —— 彈出式菜單按鈕
      • PopupMenuItem<T> —— 彈出式菜單項
      • Radio<T> —— 單選框
      • Scaffold —— 腳手架
      • ScaffoldMessenger —— 腳手架信使
      • ScaffoldMessengerState —— 腳手架信使狀態
      • SimpleDialog —— 簡單對話框
      • SimpleDialogOption —— 簡單對話框的選項
      • Slider —— 滑塊
      • SnackBar —— 底部提示欄
      • Switch —— 開關
      • Tab —— 選項卡
      • TabBar —— 選項卡欄
      • TabBarView —— 選項卡欄頁面內容視圖
      • TabController —— 水平選項卡控制器
      • TextButton —— 文本按鈕
      • TextField —— 文本框字段
      • TextFormField —— 表單文本框字段
      • Theme —— 主題
      • ThemeData —— 主題數據
      • TimeOfDay —— 一天中的時間
      • Tooltip —— 工具提示
      • UnderlineTabIndicator —— 下劃線
      • UserAccountsDrawerHeader —— 展示用户賬號信息的抽屜頭
    • 枚舉
      • TabBarIndicatorSize —— 選項卡欄指示器大小
    • 函數
      • showDatePicker —— 展示日期選擇器
      • showDialog —— 展示對話框
      • showTimePicker —— 展示時間選擇器
  • painting 【繪圖庫】
      • Alignment —— 對齊
      • AlignmentDirectional —— 對齊方向
      • AssetImage —— 資源圖片
      • Axis —— 座標軸
      • BorderRadius —— 邊框圓角半徑
      • BoxDecoration —— 盒裝飾
      • EdgeInsets —— 邊緣鑲嵌
      • FlutterLogoDecoration —— Flutter的logo裝飾
      • LinearGradient —— 線性漸變
      • NetworkImage —— 網絡圖片
      • ShapeDecoration —— 形狀裝飾
      • TextSpan —— 文本片段
      • TextStyle —— 文本樣式
    • 枚舉
      • ImageRepeat —— 圖片重複方式
      • TextOverflow —— 文本溢出方式
      • VerticalDirection —— 垂直方向
  • path 【跨平台路徑庫】
    • 函數
  • rendering 【渲染庫】
      • BoxConstraints —— 盒約束
      • SliverGridDelegateWithFixedCrossAxisCount —— Sliver家族的固定交叉軸方向元素數量的網格代理
      • SliverGridDelegateWithMaxCrossAxisExtent —— Sliver家族的指定交叉軸方向元素最大尺寸的網格代理
    • 枚舉
      • CrossAxisAlignment —— 交叉軸對齊方式
      • DecorationPosition —— 裝飾位置
      • HitTestBehavior —— 點擊行為
      • MainAxisAlignment —— 主軸對齊方式
      • MainAxisSize —— 主軸所佔空間大小
      • StackFit —— 棧佈局/堆疊佈局的適應方式
    • 屬性
      • debugPaintBaselinesEnabled —— 是否顯示繪圖的基線
      • debugPaintPointersEnabled —— 是否顯示繪圖的點擊位
      • debugPaintSizeEnabled —— 是否顯示繪圖的大小
    • 函數
      • debugDumpLayerTree —— 轉儲層級關係
      • debugDumpRenderTree —— 轉儲渲染層
      • debugDumpSemanticsTree —— 轉儲語義調試
  • scheduler 【調度庫】
    • 屬性
      • debugPrintBeginFrameBanner —— 打印幀開始
      • debugPrintEndFrameBanner —— 打印幀結束
      • timeDilation —— 動畫時間放慢倍數
  • services 【平台服務庫】
      • AssetBundle —— 資源包
      • MethodChannel —— 平台通道
      • TextInputType —— 文本輸入類型
    • 枚舉
      • TextInputAction —— 文本輸入操作
  • widgets 【組件庫】
    • 函數
      • runApp —— 運行應用程序
      • AbsorbPointer —— 吞噬指向事件
      • BottomNavigationBarItem —— 底部導航欄項
      • BouncingScrollPhysics —— 氣球跳躍式滾動物理效果
      • BuildContext —— 構建上下文
      • Builder —— 無狀態組件構建器
      • Center —— 居中
      • ClampingScrollPhysics —— 夾緊滾動物理效果
      • Column —— 列布局/垂直佈局
      • ConstrainedBox —— 約束盒
      • Container —— 容器
      • CustomScrollView —— 自定義滾動視圖
      • DecoratedBox —— 裝飾盒
      • DefaultAssetBundle —— 默認資源包
      • DefaultTextStyle —— 默認文本樣式
      • Element —— 元素
      • Expanded —— 膨脹
      • FadeInImage —— 淡入圖片
      • FocusNode —— 焦點
      • Form —— 表單
      • FormState —— 表單狀態
      • FutureBuilder<T> —— Future構建器
      • Flex —— 彈性佈局
      • FormFieldState<T> —— 表單字段狀態
      • GestureDetector —— 手勢識別
      • GlobalKey<T extends State<StatefulWidget>> —— 全局鍵
      • GridView —— 滾動網格視圖
      • Hero —— hero動畫/共享元素過渡動畫
      • Icon —— 圖標
      • IconData —— 圖標數據
      • IgnorePointer —— 忽略指向事件
      • InheritedWidget —— 共享數據繼承組件
      • Image —— 圖片
      • LeafRenderObjectElement —— 無子組件組件的元素
      • LeafRenderObjectWidget —— 無子組件組件
      • Listener —— 事件監聽器
      • ListView —— 滾動列表視圖
      • Localizations —— 多語言本地化
      • LocalizationsDelegate<T> —— 多語言本地化代理
      • MultiChildRenderObjectWidget —— 多子組件組件
      • MultiChildRenderObjectElement —— 多子組件組件的元素
      • Navigator —— 頁面跳轉導航
      • Notification —— 通知
      • NotificationListener<T extends Notification> —— 通知監聽器
      • Padding —— 內邊距
      • PerformanceOverlay —— 性能圖表
      • Positioned —— 定位
      • Route<T> —— 路由
      • Row —— 行佈局/水平佈局
      • ScrollController —— 滾動控制器
      • SingleChildRenderObjectWidget —— 單子組件組件
      • SingleChildRenderObjectElement —— 單子組件組件的元素
      • SingleChildScrollView —— 單個子組件的滾動視圖
      • SizedBox —— 尺寸盒
      • SliverChildBuilderDelegate —— Sliver家族的子組件創建器代理
      • SliverFixedExtentList —— Sliver家族的固定尺寸列表
      • SliverGrid —— Sliver家族的網格
      • Stack —— 棧佈局/堆疊佈局
      • State<T extends StatefulWidget> —— 狀態
      • StatefulElement —— 有狀態元素
      • StatefulWidget —— 有狀態組件
      • StatelessElement —— 無狀態元素
      • StatelessWidget —— 無狀態組件
      • Text —— 文本
      • TextEditingController —— 文本編輯控制器
      • Transform —— 變換
      • Widget —— 組件
      • WillPopScope —— 返回攔截
      • Wrap —— 流式佈局
    • 函數
      • debugDumpApp —— 轉儲組件層

dart:ui 【UI庫】

import 'dart:ui';

枚舉

TextDirection —— 文本方向

  • 繼承
    Object > Enum > TextDirection
    • rtl → const TextDirection:從右到左。
    • ltr → const TextDirection:從左到右。

animation 【動畫庫】

import 'package:flutter/animation.dart';

Flutter支持120FPS(Frames Per Second,幀每秒)的幀率。

AnimatedBuilder —— 動畫創建器

可用於實現動畫疊加,即交錯動畫。

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > AnimatedWidget > ListenableBuilder > AnimatedBuilder
  • 構造函數
    AnimatedBuilder({
    	Key? key,
    	required Listenable animation,
    	required TransitionBuilder builder,
    	Widget? child
    })
    

Animation<T> —— 動畫

一方面生成動畫的值,另一方面用來得知動畫的狀態。但是無法通過它得知動畫的具象,且和渲染無關。

  • 繼承
    Object > Listenable > Animation
  • 構造函數
    Animation()
    
  • 屬性
    • value → T:動畫的值。
  • 方法
    • addListener(VoidCallback listener) → void:添加事件監聽器。在動畫的值發生變化時觸發。
    • addStatusListener(AnimationStatusListener listener) → void:添加狀態監聽器。在動畫的狀態發生變化時觸發。

AnimationController —— 動畫控制器

管理Animation

  • 繼承
    Object > Listenable > Animation<double> > AnimationController

  • 構造函數

    AnimationController({
    	double? value,
    	Duration? duration,
    	Duration? reverseDuration,
    	String? debugLabel,
    	double lowerBound = 0.0,
    	double upperBound = 1.0,
    	AnimationBehavior animationBehavior = AnimationBehavior.normal,
    	required TickerProvider vsync
    })
    
    • vsync:垂直同步的區域。限制此區域在執行動畫的區域內,可避免消耗過多資源。
  • 屬性

    • duration ↔ Duration?:動畫的持續時間。
  • 方法

    • dispose() → void:銷燬動畫。
    • forward({double? from}) → TickerFuture:正向播放動畫。
    • reset() → void:重置動畫至初始位置。
    • reverse({double? from}) → TickerFuture:反向播放動畫。
    • stop({bool canceled = true}) → void:停止播放動畫。

ColorTween —— 顏色補間

  • 繼承
    Object > Animatable<Color?> > Tween<Color?> > ColorTween
  • 構造函數
    ColorTween({Color? begin, Color? end})
    

Curve —— 曲線

  • 繼承
    Object > ParametricCurve<double> > Curve
  • 構造函數
    Curve()
    

CurvedAnimation —— 曲線動畫/非線性動畫

將動畫的過程抽象成非線性曲線。

  • 繼承
    Object > Listenable > Animation<double> > CurvedAnimation
  • 構造函數
    CurvedAnimation({
    	required Animation<double> parent,
    	required Curve curve,
    	Curve? reverseCurve
    })
    

Curves —— 曲線集

  • 常量
    • bounceIn → const Curve:氣球跳躍式。
    • ease → const Cubic
    • linear → const Curve:線性。

Interval —— 時間間隔

可以用來定義動畫在執行上的時間線順序。

  • 繼承
    Object > ParametricCurve<double> > Curve > Interval
  • 構造函數
    Interval(
    	double begin,
    	double end,
    	{
    	Curve curve = Curves.linear
    	}
    )
    
  • 屬性
    • begin → double:起始時間點在動畫時間軸的百分比。
    • end → double:結束時間點在動畫時間軸的百分比。

Locale —— 語系區域

  • 構造函數
    Locale(String _languageCode, [String? _countryCode])
    

Tween<T extends Object?> —— 補間

定義正在執行動畫的對象所使用的數據範圍內的值。

  • 繼承
    Object > Animatable<T> > Tween
  • 構造函數
    Tween({
    	T? begin,
    	T? end
    })
    
  • 方法
    • animate(Animation<double> parent) → Animation<T>:生成動畫。

枚舉

AnimationStatus —— 動畫狀態

    • dismissed → const AnimationStatus
    • forward → const AnimationStatus
    • reverse → const AnimationStatus
    • completed → const AnimationStatus

flutter_localizations 【多語言本地化庫】

GlobalMaterialLocalizations —— Material風格組件的多語言本地化

  • 常量
    • delegate → const LocalizationsDelegate<MaterialLocalizations>

GlobalWidgetsLocalizations —— 組件的多語言本地化

  • 常量
    • delegate → const LocalizationsDelegate<WidgetsLocalizations>

cupertino 【Cupertino(iOS)風格庫】

import 'package:flutter/cupertino.dart';

與Material的類比關係:

Cupertino Material
CupertinoApp MaterialApp
CupertinoPageScaffold Scaffold
CupertinoTabScaffold Scaffold
CupertinoNavigationBar AppBar
CupertinoTabBar BottomNavigationBar
CupertinoAlertDialog AlertDialog
CupertinoSlider Slider

CupertinoActionSheet —— Cupertino設計風格的操作表

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > CupertinoActionSheet
  • 構造函數
    CupertinoActionSheet({
    	Key? key,
    	Widget? title,
    	Widget? message,
    	List<Widget>? actions,
    	ScrollController? messageScrollController,
    	ScrollController? actionScrollController,
    	Widget? cancelButton
    })
    
  • 屬性
    • actions → List<Widget>?:操作項列表。
    • cancelButton → Widget?:取消按鈕。
    • message → Widget?:描述。
    • title → Widget?:標題。

CupertinoActionSheetAction —— Cupertino設計風格的操作表的操作項

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > CupertinoActionSheetAction
  • 構造函數
    CupertinoActionSheetAction({
    	Key? key,
    	required VoidCallback onPressed,
    	bool isDefaultAction = false,
    	bool isDestructiveAction = false,
    	required Widget child
    })
    

CupertinoActivityIndicator —— Cupertino設計風格的動作指示器

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > CupertinoActivityIndicator
  • 構造函數
    CupertinoActivityIndicator({
    	Key? key,
    	Color? color,
    	bool animating = true,
    	double radius = _kDefaultIndicatorRadius
    })
    
  • 屬性
    • animating → bool:是否具有動畫效果。默認為true。
    • radius → double:半徑。默認為10。

CupertinoAlertDialog —— Cupertino設計風格的提示框

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > CupertinoAlertDialog
  • 構造函數
    CupertinoAlertDialog({
    	Key? key,
    	Widget? title,
    	Widget? content,
    	List<Widget> actions = const <Widget>[],
    	ScrollController? scrollController,
    	ScrollController? actionScrollController,
    	Duration insetAnimationDuration = const Duration(milliseconds: 100),
    	Curve insetAnimationCurve = Curves.decelerate
    })
    
  • 屬性
    • actions → List<Widget>:操作列表。不多於兩個時水平排列,多餘兩個時垂直排列。
    • content → Widget?:內容。
    • title → Widget?:標題。

CupertinoApp —— Cupertino設計風格APP

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > CupertinoApp
  • 構造函數
    CupertinoApp({
    	Key? key,
    	GlobalKey<NavigatorState>? navigatorKey,
    	Widget? home,
    	CupertinoThemeData? theme,
    	Map<String,
    	Widget Function(BuildContext)> routes = const <String, WidgetBuilder>{},
    	String? initialRoute,
    	RouteFactory? onGenerateRoute,
    	InitialRouteListFactory? onGenerateInitialRoutes,
    	RouteFactory? onUnknownRoute,
    	NotificationListenerCallback<NavigationNotification>? onNavigationNotification,
    	List<NavigatorObserver> navigatorObservers = const <NavigatorObserver>[],
    	TransitionBuilder? builder,
    	String title = '',
    	GenerateAppTitle? onGenerateTitle,
    	Color? color,
    	Locale? locale,
    	Iterable<LocalizationsDelegate>? localizationsDelegates,
    	LocaleListResolutionCallback? localeListResolutionCallback,
    	LocaleResolutionCallback? localeResolutionCallback,
    	Iterable<Locale> supportedLocales = const <Locale>[Locale('en', 'US')],
    	bool showPerformanceOverlay = false,
    	bool checkerboardRasterCacheImages = false,
    	bool checkerboardOffscreenLayers = false,
    	bool showSemanticsDebugger = false,
    	bool debugShowCheckedModeBanner = true,
    	Map<ShortcutActivator, Intent>? shortcuts,
    	Map<Type, Action<Intent>>? actions,
    	String? restorationScopeId,
    	ScrollBehavior? scrollBehavior,
    	@Deprecated(
    		'Remove this parameter as it is now ignored. '
    		'CupertinoApp never introduces its own MediaQuery; the View widget takes care of that. '
    		'This feature was deprecated after v3.7.0-29.0.pre.'
    	)
    	bool useInheritedMediaQuery = false})
    

CupertinoButton —— Cupertino設計風格的按鈕

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > CupertinoButton
  • 構造函數
    CupertinoButton({
    	Key? key,
    	required Widget child,
    	EdgeInsetsGeometry? padding,
    	Color? color,
    	Color disabledColor = CupertinoColors.quaternarySystemFill,
    	double? minSize = kMinInteractiveDimensionCupertino,
    	double? pressedOpacity = 0.4,
    	BorderRadius? borderRadius = const BorderRadius.all(Radius.circular(8.0)),
    	AlignmentGeometry alignment = Alignment.center,
    	Color? focusColor,
    	FocusNode? focusNode,
    	ValueChanged<bool>? onFocusChange,
    	bool autofocus = false,
    	required VoidCallback? onPressed
    })
    
  • 屬性
    • borderRadius → BorderRadius?:圓角的半徑。僅在設置了color時生效。
    • child → Widget:子組件。
    • color → Color?:顏色。默認無顏色。
    • disabledColor → Color:在不可用時的顏色。
    • enabled → bool:是否可用。默認為false。可通過給onPressed賦值來使其可用。
    • onPressed → VoidCallback?:點擊時的回調。

CupertinoColors —— Cupertino設計風格的顏色集

CupertinoDatePicker —— Cupertino設計風格的日期時間選擇器

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > CupertinoDatePicker
  • 構造函數
    CupertinoDatePicker({
    	Key? key,
    	CupertinoDatePickerMode mode = CupertinoDatePickerMode.dateAndTime,
    	required ValueChanged<DateTime> onDateTimeChanged,
    	DateTime? initialDateTime,
    	DateTime? minimumDate,
    	DateTime? maximumDate,
    	int minimumYear = 1,
    	int? maximumYear,
    	int minuteInterval = 1,
    	bool use24hFormat = false,
    	DatePickerDateOrder? dateOrder,
    	Color? backgroundColor,
    	bool showDayOfWeek = false,
    	double itemExtent = _kItemExtent,
    	SelectionOverlayBuilder? selectionOverlayBuilder
    })
    
  • 屬性
    • initialDateTime → DateTime:初始日期時間。
    • onDateTimeChanged → ValueChanged<DateTime>:日期時間改變時的回調。
    • use24hFormat → bool:是否使用24小時制。

CupertinoIcons —— Cupertino設計風格的圖標集

CupertinoNavigationBar —— Cupertino設計風格的導航欄

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > CupertinoNavigationBar
  • 構造函數
    CupertinoNavigationBar({
    	Key? key,
    	Widget? leading,
    	bool automaticallyImplyLeading = true,
    	bool automaticallyImplyMiddle = true,
    	String? previousPageTitle,
    	Widget? middle,
    	Widget? trailing,
    	Border? border = _kDefaultNavBarBorder,
    	Color? backgroundColor,
    	Brightness? brightness,
    	EdgeInsetsDirectional? padding,
    	bool transitionBetweenRoutes = true,
    	Object heroTag = _defaultHeroTag
    })
    
  • 屬性
    • automaticallyImplyLeading → bool:是否自動生成左側的返回按鈕。默認為true。
    • backgroundColor → Color?:背景色。
    • leading → Widget?:導航欄開頭的組件。
    • middle → Widget?:導航欄中間的組件。
    • previousPageTitle → String?:上一個頁面的標題。在左側返回按鈕旁顯示。
    • trailing → Widget?:導航欄結尾的組件。

CupertinoPageRoute<T> —— Cupertino設計風格的頁面路由

  • 繼承
    Object > Route<T> > OverlayRoute<T> > TransitionRoute<T> > ModalRoute<T> > PageRoute<T> > CupertinoPageRoute
  • 構造函數
    CupertinoPageRoute({
    	required WidgetBuilder builder,
    	String? title,
    	RouteSettings? settings,
    	bool maintainState = true,
    	bool fullscreenDialog = false,
    	bool allowSnapshotting = true,
    	bool barrierDismissible = false
    })
    

CupertinoPageScaffold —— Cupertino設計風格的單頁面腳手架

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > CupertinoPageScaffold
  • 構造函數
    CupertinoPageScaffold({
    	Key? key,
    	ObstructingPreferredSizeWidget? navigationBar,
    	Color? backgroundColor,
    	bool resizeToAvoidBottomInset = true,
    	required Widget child
    })
    
  • 屬性
    • backgroundColor → Color?:腳手架內所有組件的顏色。
    • child → Widget:界面主要內容。
    • navigationBar → ObstructingPreferredSizeWidget?:頂部導航欄。

CupertinoPicker —— Cupertino設計風格的選擇器

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > CupertinoPicker

  • 構造函數

    CupertinoPicker({
    	Key? key,
    	double diameterRatio = _kDefaultDiameterRatio,
    	Color? backgroundColor,
    	double offAxisFraction = 0.0,
    	bool useMagnifier = false,
    	double magnification = 1.0,
    	FixedExtentScrollController? scrollController,
    	double squeeze = _kSqueeze,
    	required double itemExtent,
    	required ValueChanged<int>? onSelectedItemChanged,
    	required List<Widget> children,
    	Widget? selectionOverlay = const CupertinoPickerDefaultSelectionOverlay(),
    	bool looping = false
    })
    
    • children:子組件列表。
    • looping:是否循環顯示。
  • 屬性

    • backgroundColor → Color?:背景色。
    • itemExtent → double:每個項的高度。
    • onSelectedItemChanged → ValueChanged<int>?:選中項變化時的回調。

CupertinoSlider —— Cupertino設計風格的滑塊

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > CupertinoSlider
  • 構造函數
    CupertinoSlider({
    	Key? key,
    	required double value,
    	required ValueChanged<double>? onChanged,
    	ValueChanged<double>? onChangeStart,
    	ValueChanged<double>? onChangeEnd,
    	double min = 0.0,
    	double max = 1.0,
    	int? divisions,
    	Color? activeColor,
    	Color thumbColor = CupertinoColors.white
    })
    

CupertinoTabBar —— Cupertino設計風格的選項卡欄

  • 繼承
    Object > DiagnosticableTree > Widget > StatelessWidget > CupertinoTabBar
  • 構造函數
    CupertinoTabBar({
    	Key? key,
    	required List<BottomNavigationBarItem> items,
    	ValueChanged<int>? onTap,
    	int currentIndex = 0,
    	Color? backgroundColor,
    	Color? activeColor,
    	Color inactiveColor = _kDefaultTabBarInactiveColor,
    	double iconSize = 30.0,
    	double height = _kTabBarHeight,
    	Border? border = const Border(top: BorderSide(color: _kDefaultTabBarBorderColor, width: 0.0))
    })
    
  • 屬性
    • activeColor → Color?:選中選項卡的顏色。
    • currentIndex → int:選中選項卡的下標。
    • inactiveColor → Color:未選中選項卡的顏色。
    • items → List<BottomNavigationBarItem>:描述選項卡的樣式和個數。
    • onTap → ValueChanged<int>?:選項卡被點擊的回調。

CupertinoTabScaffold —— Cupertino設計風格的選項卡頁面腳手架

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > CupertinoTabScaffold
  • 構造函數
    CupertinoTabScaffold({
    	Key? key,
    	required CupertinoTabBar tabBar,
    	required IndexedWidgetBuilder tabBuilder,
    	CupertinoTabController? controller,
    	Color? backgroundColor,
    	bool resizeToAvoidBottomInset = true,
    	String? restorationId
    })
    
  • 屬性
    • tabBar → CupertinoTabBar:選項卡欄。
    • tabBuilder → IndexedWidgetBuilder:選項卡頁面內容構建器。

CupertinoTabView —— Cupertino設計風格的選項卡頁面內容視圖

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > CupertinoTabView
  • 構造函數
    CupertinoTabView({
    	Key? key,
    	WidgetBuilder? builder,
    	GlobalKey<NavigatorState>? navigatorKey,
    	String? defaultTitle,
    	Map<String,
    	WidgetBuilder>? routes,
    	RouteFactory? onGenerateRoute,
    	RouteFactory? onUnknownRoute,
    	List<NavigatorObserver> navigatorObservers = const <NavigatorObserver>[],
    	String? restorationScopeId
    })
    
  • builder → WidgetBuilder?:內容構建器。

CupertinoTimerPicker —— Cupertino設計風格的定時器選擇器

可選範圍是0至23小時59分59秒。

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > CupertinoTimerPicker
  • 構造函數
    CupertinoTimerPicker({
    	Key? key,
    	CupertinoTimerPickerMode mode = CupertinoTimerPickerMode.hms,
    	Duration initialTimerDuration = Duration.zero,
    	int minuteInterval = 1,
    	int secondInterval = 1,
    	AlignmentGeometry alignment = Alignment.center,
    	Color? backgroundColor,
    	double itemExtent = _kItemExtent,
    	required ValueChanged<Duration> onTimerDurationChanged,
    	SelectionOverlayBuilder? selectionOverlayBuilder
    })
    
  • 屬性
    • initialTimerDuration → Duration:初始定時值。
    • mode → CupertinoTimerPickerMode:定時器模式。
    • onTimerDurationChanged → ValueChanged<Duration>:定時值改變時的回調。

枚舉

CupertinoTimerPickerMode —— Cupertino設計風格的定時器選擇器模式

  • hm → const CupertinoTimerPickerMode:時分。
  • ms → const CupertinoTimerPickerMode:分秒。
  • hms → const CupertinoTimerPickerMode:時分秒。

函數

showCupertinoDialog —— 展示Cupertino設計風格的對話框

Future<T?> showCupertinoDialog<T>({
	required BuildContext context,
	required WidgetBuilder builder,
	String? barrierLabel,
	bool useRootNavigator = true,
	bool barrierDismissible = false,
	RouteSettings? routeSettings,
	Offset? anchorPoint,
})

showCupertinoModalPopup<T> —— 展示Cupertino設計風格的模態彈出對話框

Future<T?> showCupertinoModalPopup<T>({
	required BuildContext context,
	required WidgetBuilder builder,
	ImageFilter? filter,
	Color barrierColor = kCupertinoModalBarrierColor,
	bool barrierDismissible = true,
	bool useRootNavigator = true,
	bool semanticsDismissible = false,
	RouteSettings? routeSettings,
	Offset? anchorPoint,
})

driver_extension 【驅動擴展庫】

函數

enableFlutterDriverExtension —— 啓用Flutter驅動擴展

void enableFlutterDriverExtension({
	DataHandler? handler,
	bool silenceErrors = false,
	bool enableTextEntryEmulation = true,
	List<FinderExtension>? finders,
	List<CommandExtension>? commands,
})

flutter_driver 【驅動庫】

CommonFinders —— 普通查找器

  • 方法
    • byValueKey(dynamic key) → SerializableFinder

FlutterDriver —— Flutter驅動

  • 構造函數
    FlutterDriver.connectedTo({FlutterWebConnection? webConnection, VmService? serviceClient, Isolate? appIsolate})
    
  • 方法
    • close() → Future<void>
    • getText(SerializableFinder finder, {Duration? timeout}) → Future<String>
    • tap(SerializableFinder finder, {Duration? timeout}) → Future<void>

flutter_test 【測試庫】

CommonFinders —— 普通查找器

  • 方法
    • byIcon(IconData icon, {bool skipOffstage = true}) → Finder
    • text(String text, {bool findRichText = false, bool skipOffstage = true}) → Finder

WidgetTester —— 組件測試類

  • 方法
    • pump([Duration? duration, EnginePhase phase = EnginePhase.sendSemanticsUpdate]) → Future<void>:重建組件。
    • pumpWidget(Widget widget, {Duration? duration, EnginePhase phase = EnginePhase.sendSemanticsUpdate, bool wrapWithView = true}) → Future<void>:在後台創建組件。
    • tap(FinderBase<Element> finder, {int? pointer, int buttons = kPrimaryButton, bool warnIfMissed = true, PointerDeviceKind kind = PointerDeviceKind.touch}) → Future<void>:模擬點擊。

常量

find —— 查找器

find → const CommonFinders

findsNothing —— 查找不到組件

findsNothing → const Matcher

findsOneWidget —— 查找到一個組件

findsOneWidget → const Matcher

函數

expect —— 測試結果期望

void expect(
	dynamic actual,
	dynamic matcher, {
	String? reason,
	dynamic skip,
})

group —— 註冊測試組

@isTestGroup
void group(
	Object description,
	void body(), {
	dynamic skip,
	int? retry,
})

setUpAll —— 註冊在所有測試執行前的動作

void setUpAll( dynamic body() )

tearDownAll —— 註冊在所有測試執行後的動作

void tearDownAll( dynamic body() )

test —— 註冊單元測試

@isTest
void test(
	Object description,
	dynamic body(), {
	String? testOn,
	Timeout? timeout,
	dynamic skip,
	dynamic tags,
	Map<String, dynamic>? onPlatform,
	int? retry,
})

testWidgets —— 註冊組件測試

@isTest
void testWidgets(
	String description,
	WidgetTesterCallback callback, {
	bool? skip,
	Timeout? timeout,
	bool semanticsEnabled = true,
	TestVariant<Object?> variant = const DefaultTestVariant(),
	dynamic tags,
	int? retry,
	LeakTesting? experimentalLeakTesting,
})

foundation 【基礎庫】

自動導入。

屬性

debugPrint —— 調試打印

debugPrint ↔ DebugPrintCallback

gestures 【手勢庫】

import 'package:flutter/gestures.dart';

GestureArenaMember —— 手勢競技員

  • 構造函數
    GestureArenaMember()
    

GestureRecognizer —— 手勢識別器

內部結合Listener實現。

  • 繼承
    Object > GestureArenaMember > GestureRecognizer
  • 構造函數
    GestureRecognizer({
    	Object? debugOwner,
    	Set<PointerDeviceKind>? supportedDevices,
    	AllowedButtonsFilter allowedButtonsFilter = _defaultButtonAcceptBehavior
    })
    

PointerEvent —— 指向事件

  • 屬性
    • orientation → double:移動方向。
    • pressure → double:壓力。

physics 【物理效果庫】

import 'package:flutter/physics.dart';

此庫是對animation庫的再封裝。

material 【Material(Android)風格庫】

import 'package:flutter/material.dart';

AboutListTile —— 展示“關於”信息的列表瓦片

  • 繼承
    Object > DiagnosticableTree > Widget > StatelessWidget > AboutListTile
  • 構造函數
    AboutListTile({
    	Key? key,
    	Widget? icon,
    	Widget? child,
    	String? applicationName,
    	String? applicationVersion,
    	Widget? applicationIcon,
    	String? applicationLegalese,
    	List<Widget>? aboutBoxChildren,
    	bool? dense
    })
    

AlertDialog —— 提示框

  • 繼承
    Object > DiagnosticableTree > Widget > StatelessWidget > AlertDialog
  • 構造函數
    AlertDialog({
    	Key? key,
    	Widget? icon,
    	EdgeInsetsGeometry? iconPadding,
    	Color? iconColor,
    	Widget? title,
    	EdgeInsetsGeometry? titlePadding,
    	TextStyle? titleTextStyle,
    	Widget? content,
    	EdgeInsetsGeometry? contentPadding,
    	TextStyle? contentTextStyle,
    	List<Widget>? actions,
    	EdgeInsetsGeometry? actionsPadding,
    	MainAxisAlignment? actionsAlignment,
    	OverflowBarAlignment? actionsOverflowAlignment,
    	VerticalDirection? actionsOverflowDirection,
    	double? actionsOverflowButtonSpacing,
    	EdgeInsetsGeometry? buttonPadding,
    	Color? backgroundColor,
    	double? elevation,
    	Color? shadowColor,
    	Color? surfaceTintColor,
    	String? semanticLabel,
    	EdgeInsets? insetPadding,
    	Clip? clipBehavior,
    	ShapeBorder? shape,
    	AlignmentGeometry? alignment,
    	bool scrollable = false
    })
    
  • 屬性
    • actions → List<Widget>?:操作列表。總是橫向排列。
    • content → Widget?:提示內容。
    • title → Widget?:標題。

AppBar —— 應用程序欄

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > AppBar
  • 構造函數
    AppBar({
    	Key? key,
    	Widget? leading,
    	bool automaticallyImplyLeading = true,
    	Widget? title,
    	List<Widget>? actions,
    	Widget? flexibleSpace,
    	PreferredSizeWidget? bottom,
    	double? elevation,
    	double? scrolledUnderElevation,
    	ScrollNotificationPredicate notificationPredicate = defaultScrollNotificationPredicate,
    	Color? shadowColor,
    	Color? surfaceTintColor,
    	ShapeBorder? shape,
    	Color? backgroundColor,
    	Color? foregroundColor,
    	IconThemeData? iconTheme,
    	IconThemeData? actionsIconTheme,
    	bool primary = true,
    	bool? centerTitle,
    	bool excludeHeaderSemantics = false,
    	double? titleSpacing,
    	double toolbarOpacity = 1.0,
    	double bottomOpacity = 1.0,
    	double? toolbarHeight,
    	double? leadingWidth,
    	TextStyle? toolbarTextStyle,
    	TextStyle? titleTextStyle,
    	SystemUiOverlayStyle? systemOverlayStyle,
    	bool forceMaterialTransparency = false,
    	Clip? clipBehavior
    })
    
  • 屬性
    • actions → List<Widget>?:標題之後的組件列表。
    • bottom → PreferredSizeWidget?:底部組件。
    • centerTitle → bool?:標題是否居中。如為false,則靠近起點位置。
    • leading → Widget?:左上角組件。位於標題之前。
    • title → Widget?:標題。

BottomNavigationBar —— 底部導航欄

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > BottomNavigationBar
  • 構造函數
    BottomNavigationBar({
    	Key? key,
    	required List<BottomNavigationBarItem> items,
    	ValueChanged<int>? onTap,
    	int currentIndex = 0,
    	double? elevation,
    	BottomNavigationBarType? type,
    	Color? fixedColor,
    	Color? backgroundColor,
    	double iconSize = 24.0,
    	Color? selectedItemColor,
    	Color? unselectedItemColor,
    	IconThemeData? selectedIconTheme,
    	IconThemeData? unselectedIconTheme,
    	double selectedFontSize = 14.0,
    	double unselectedFontSize = 12.0,
    	TextStyle? selectedLabelStyle,
    	TextStyle? unselectedLabelStyle,
    	bool? showSelectedLabels,
    	bool? showUnselectedLabels,
    	MouseCursor? mouseCursor,
    	bool? enableFeedback,
    	BottomNavigationBarLandscapeLayout? landscapeLayout,
    	bool useLegacyColorScheme = true
    })
    
  • 屬性
    • currentIndex → int:選中選項卡的下標。
    • items → List<BottomNavigationBarItem>:描述選項卡的樣式和個數。
    • onTap → ValueChanged<int>?:選項卡被點擊的回調。

Card —— 卡片

內容不允許滾動。

  • 繼承
    Object > DiagnosticableTree > Widget > StatelessWidget > Card
  • 構造函數
    Card({
    	Key? key,
    	Color? color,
    	Color? shadowColor,
    	Color? surfaceTintColor,
    	double? elevation,
    	ShapeBorder? shape,
    	bool borderOnForeground = true,
    	EdgeInsetsGeometry? margin,
    	Clip? clipBehavior,
    	Widget? child,
    	bool semanticContainer = true
    })
    
  • 屬性
    • child → Widget?:子組件。
    • shape → ShapeBorder?:形狀。

Checkbox —— 複選框

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > Checkbox
  • 構造函數
    Checkbox({
    	Key? key,
    	required bool? value,
    	bool tristate = false,
    	required ValueChanged<bool?>? onChanged,
    	MouseCursor? mouseCursor,
    	Color? activeColor,
    	MaterialStateProperty<Color?>? fillColor,
    	Color? checkColor,
    	Color? focusColor,
    	Color? hoverColor,
    	MaterialStateProperty<Color?>? overlayColor,
    	double? splashRadius,
    	MaterialTapTargetSize? materialTapTargetSize,
    	VisualDensity? visualDensity,
    	FocusNode? focusNode,
    	bool autofocus = false,
    	OutlinedBorder? shape, 
    	BorderSide? side,
    	bool isError = false,
    	String? semanticLabel
    })
    

Chip —— 碎片/標籤

  • 繼承
    Object > DiagnosticableTree > Widget > StatelessWidget > Chip
  • 構造函數
    Chip({
    	Key? key,
    	Widget? avatar,
    	required Widget label,
    	TextStyle? labelStyle,
    	EdgeInsetsGeometry? labelPadding,
    	Widget? deleteIcon,
    	VoidCallback? onDeleted,
    	Color? deleteIconColor,
    	String? deleteButtonTooltipMessage,
    	BorderSide? side,
    	OutlinedBorder? shape,
    	Clip clipBehavior = Clip.none, 
    	FocusNode? focusNode,
    	bool autofocus = false,
    	MaterialStateProperty<Color?>? color,
    	Color? backgroundColor,
    	EdgeInsetsGeometry? padding,
    	VisualDensity? visualDensity,
    	MaterialTapTargetSize? materialTapTargetSize,
    	double? elevation,
    	Color? shadowColor,
    	Color? surfaceTintColor,
    	IconThemeData? iconTheme,
    	BoxConstraints? avatarBoxConstraints,
    	BoxConstraints? deleteIconBoxConstraints,
    	ChipAnimationStyle? chipAnimationStyle
    })
    
  • 屬性
    • avatar → Widget?:主體內容之前的小圖標。
    • backgroundColor → Color?:背景色。
    • deleteButtonTooltipMessage → String?:當刪除圖標長按時的提示內容。
    • deleteIcon → Widget?:右側刪除圖標。
    • deleteIconColor → Color?:右側刪除圖標的顏色。
    • label → Widget:主體內容。
    • onDeleted → VoidCallback?:被刪除時的回調。
    • shape → OutlinedBorder?:形狀。

CircleAvatar —— 圓形頭像

  • 繼承
    Object > DiagnosticableTree > Widget > StatelessWidget > CircleAvatar
  • 構造函數
    CircleAvatar({
    	Key? key,
    	Widget? child,
    	Color? backgroundColor,
    	ImageProvider<Object>? backgroundImage,
    	ImageProvider<Object>? foregroundImage,
    	ImageErrorListener? onBackgroundImageError,
    	ImageErrorListener? onForegroundImageError,
    	Color? foregroundColor,
    	double? radius,
    	double? minRadius,
    	double? maxRadius
    })
    

CircularProgressIndicator —— 圓形進度條

  • 繼承
    Object > DiagnosticableTree > Widget StatefulWidget > ProgressIndicator > CircularProgressIndicator
  • 構造函數
    CircularProgressIndicator({
    	Key? key,
    	double? value,
    	Color? backgroundColor,
    	Color? color,
    	Animation<Color?>? valueColor,
    	double strokeWidth = 4.0,
    	double strokeAlign = strokeAlignCenter,
    	String? semanticsLabel,
    	String? semanticsValue,
    	StrokeCap? strokeCap
    })
    
  • 屬性
    • value → double?:當前進度值。範圍從0到1。如為null,則只顯示動畫效果。

Colors —— 顏色集

Divider —— 分隔線

  • 繼承
    Object > DiagnosticableTree > Widget > StatelessWidget > Divider
  • 構造函數
    Divider({
    	Key? key,
    	double? height,
    	double? thickness,
    	double? indent,
    	double? endIndent,
    	Color? color
    })
    

Drawer —— 抽屜

  • 繼承
    Object > DiagnosticableTree > Widget > StatelessWidget > Drawer
  • 構造函數
    Drawer({
    	Key? key,
    	Color? backgroundColor,
    	double? elevation,
    	Color? shadowColor,
    	Color? surfaceTintColor,
    	ShapeBorder? shape,
    	double? width,
    	Widget? child,
    	String? semanticLabel,
    	Clip? clipBehavior
    })
    

DrawerHeader —— 抽屜頭

  • 繼承
    Object > DiagnosticableTree > Widget > StatelessWidget > DrawerHeader
  • 構造函數
    DrawerHeader({
    	Key? key,
    	Decoration? decoration,
    	EdgeInsetsGeometry? margin = const EdgeInsets.only(bottom: 8.0),
    	EdgeInsetsGeometry padding = const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 8.0),
    	Duration duration = const Duration(milliseconds: 250),
    	Curve curve = Curves.fastOutSlowIn,
    	required Widget? child
    })
    

ElevatedButton —— 突起按鈕

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > ButtonStyleButton > ElevatedButton
  • 構造函數
    ElevatedButton({
    	Key? key,
    	required VoidCallback? onPressed,
    	VoidCallback? onLongPress,
    	ValueChanged<bool>? onHover,
    	ValueChanged<bool>? onFocusChange,
    	ButtonStyle? style,
    	FocusNode? focusNode,
    	bool autofocus = false,
    	Clip? clipBehavior,
    	MaterialStatesController? statesController,
    	required Widget? child,
    	IconAlignment iconAlignment = IconAlignment.start
    })
    

ExpansionPanel —— 可展開面板

  • 構造函數
    ExpansionPanel({
    	required ExpansionPanelHeaderBuilder headerBuilder,
    	required Widget body,
    	bool isExpanded = false,
    	bool canTapOnHeader = false,
    	Color? backgroundColor,
    	Color? splashColor,
    	Color? highlightColor
    })
    
  • 屬性
    • body → Widget:展開的內容。
    • headerBuilder → ExpansionPanelHeaderBuilder:標頭構建器。
    • isExpanded → bool:是否展開。

ExpansionPanelList —— 可展開面板列表

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > ExpansionPanelList
  • 構造函數
    ExpansionPanelList({
    	Key? key,
    	List<ExpansionPanel> children = const <ExpansionPanel>[],
    	ExpansionPanelCallback? expansionCallback,
    	Duration animationDuration = kThemeAnimationDuration,
    	EdgeInsets expandedHeaderPadding = _kPanelHeaderExpandedDefaultPadding,
    	Color? dividerColor,
    	double elevation = 2,
    	Color? expandIconColor,
    	double materialGapSize = 16.0
    })
    
  • 屬性
    • children → List<ExpansionPanel>:子組件列表。
    • expansionCallback → ExpansionPanelCallback?:每個子組件展開/縮起時的回調。

FloatingActionButton —— 浮動操作按鈕

  • 繼承
    Object > DiagnosticableTree > Widget > StatelessWidget > FloatingActionButton

  • 構造函數

    FloatingActionButton({
    	Key? key,
    	Widget? child,
    	String? tooltip,
    	Color? foregroundColor,
    	Color? backgroundColor,
    	Color? focusColor,
    	Color? hoverColor,
    	Color? splashColor,
    	Object? heroTag = const _DefaultHeroTag(),
    	double? elevation,
    	double? focusElevation,
    	double? hoverElevation,
    	double? highlightElevation,
    	double? disabledElevation,
    	required VoidCallback? onPressed,
    	MouseCursor? mouseCursor,
    	bool mini = false,
    	ShapeBorder? shape,
    	Clip clipBehavior = Clip.none,
    	FocusNode? focusNode,
    	bool autofocus = false,
    	MaterialTapTargetSize? materialTapTargetSize,
    	bool isExtended = false,
    	bool? enableFeedback
    })
    
    FloatingActionButton.extended({
    	Key? key,
    	String? tooltip,
    	Color? foregroundColor,
    	Color? backgroundColor,
    	Color? focusColor,
    	Color? hoverColor,
    	Object? heroTag = const _DefaultHeroTag(),
    	double? elevation,
    	double? focusElevation,
    	double? hoverElevation,
    	Color? splashColor,
    	double? highlightElevation,
    	double? disabledElevation,
    	required VoidCallback? onPressed,
    	MouseCursor? mouseCursor = SystemMouseCursors.click,
    	ShapeBorder? shape,
    	bool isExtended = true,
    	MaterialTapTargetSize? materialTapTargetSize,
    	Clip clipBehavior = Clip.none,
    	FocusNode? focusNode,
    	bool autofocus = false,
    	double? extendedIconLabelSpacing,
    	EdgeInsetsGeometry? extendedPadding,
    	TextStyle? extendedTextStyle,
    	Widget? icon,
    	required Widget label,
    	bool? enableFeedback
    })
    
  • 屬性

    • child → Widget?:子組件。
    • heroTag → Object?:共享元素過渡動畫所使用的標籤。
    • mini → bool:控制按鈕的大小。
    • isExtended → bool:是否是拉長的按鈕。
    • onPressed → VoidCallback?:點擊回調。

MaterialApp —— Material設計風格APP

必需由MaterialApp包裝Material設計風格的組件。

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > MaterialApp

  • 構造函數

    MaterialApp({
    	Key? key,
    	GlobalKey<NavigatorState>? navigatorKey,
    	GlobalKey<ScaffoldMessengerState>? scaffoldMessengerKey,
    	Widget? home,
    	Map<String,
    	WidgetBuilder> routes = const <String, WidgetBuilder>{},
    	String? initialRoute,
    	RouteFactory? onGenerateRoute,
    	InitialRouteListFactory? onGenerateInitialRoutes,
    	RouteFactory? onUnknownRoute,
    	NotificationListenerCallback<NavigationNotification>? onNavigationNotification,
    	List<NavigatorObserver> navigatorObservers = const <NavigatorObserver>[],
    	TransitionBuilder? builder,
    	String title = '',
    	GenerateAppTitle? onGenerateTitle,
    	Color? color,
    	ThemeData? theme,
    	ThemeData? darkTheme,
    	ThemeData? highContrastTheme,
    	ThemeData? highContrastDarkTheme,
    	ThemeMode? themeMode = ThemeMode.system,
    	Duration themeAnimationDuration = kThemeAnimationDuration,
    	Curve themeAnimationCurve = Curves.linear,
    	Locale? locale,
    	Iterable<LocalizationsDelegate>? localizationsDelegates,
    	LocaleListResolutionCallback? localeListResolutionCallback,
    	LocaleResolutionCallback? localeResolutionCallback,
    	Iterable<Locale> supportedLocales = const <Locale>[Locale('en', 'US')],
    	bool debugShowMaterialGrid = false,
    	bool showPerformanceOverlay = false,
    	bool checkerboardRasterCacheImages = false,
    	bool checkerboardOffscreenLayers = false,
    	bool showSemanticsDebugger = false,
    	bool debugShowCheckedModeBanner = true,
    	Map<ShortcutActivator, Intent>? shortcuts,
    	Map<Type, Action<Intent>>? actions,
    	String? restorationScopeId,
    	ScrollBehavior? scrollBehavior,
    	@Deprecated(
    		'Remove this parameter as it is now ignored. '
    		'MaterialApp never introduces its own MediaQuery; the View widget takes care of that. '
    		'This feature was deprecated after v3.7.0-29.0.pre.'
    	)
    	bool useInheritedMediaQuery = false,
    	AnimationStyle? themeAnimationStyle
    })
    
    • theme:APP的主題。
  • 屬性

    • color → Color?:應用圖標的顏色,顯示在系統的最近任務視圖中。
    • debugShowCheckedModeBanner → bool:調試模式下是否顯示右上角的“DEBUG”條幅。發佈模式下忽略此字段,總是不顯示。
    • debugShowMaterialGrid → bool:是否顯示基線網格。
    • home → Widget?:APP主界面。
    • localeListResolutionCallback → LocaleListResolutionCallback?:選擇語系區域時的回調。
    • localizationsDelegates → Iterable<LocalizationsDelegate>?:多語言本地化代理列表。
    • onGenerateTitle → GenerateAppTitle?
    • routes → Map<String, WidgetBuilder>?:頁面跳轉靜態定義路由。
    • showPerformanceOverlay → bool:是否顯示性能圖表。
    • showSemanticsDebugger → bool:是否啓用語義調試。
    • supportedLocales → Iterable<Locale>:支持的語系區域列表。
    • title → String:APP的標題。通常顯示在系統的最近任務視圖中。

MaterialButton —— Material設計風格按鈕

  • 繼承
    Object > DiagnosticableTree > Widget > StatelessWidget > MaterialButton
  • 構造函數
    MaterialButton({
    	Key? key,
    	required VoidCallback? onPressed,
    	VoidCallback? onLongPress,
    	ValueChanged<bool>? onHighlightChanged,
    	MouseCursor? mouseCursor,
    	ButtonTextTheme? textTheme,
    	Color? textColor,
    	Color? disabledTextColor,
    	Color? color,
    	Color? disabledColor,
    	Color? focusColor,
    	Color? hoverColor,
    	Color? highlightColor,
    	Color? splashColor,
    	Brightness? colorBrightness,
    	double? elevation,
    	double? focusElevation,
    	double? hoverElevation,
    	double? highlightElevation,
    	double? disabledElevation,
    	EdgeInsetsGeometry? padding,
    	VisualDensity? visualDensity,
    	ShapeBorder? shape,
    	Clip clipBehavior = Clip.none,
    	FocusNode? focusNode,
    	bool autofocus = false,
    	MaterialTapTargetSize? materialTapTargetSize,
    	Duration? animationDuration,
    	double? minWidth,
    	double? height,
    	bool enableFeedback = true,
    	Widget? child
    })
    

MaterialPageRoute<T> —— Material設計風格頁面的路由

  • 繼承
    Object > Route<T> > OverlayRoute<T> > TransitionRoute<T> > ModalRoute<T> > PageRoute<T> > MaterialPageRoute
  • 構造函數
    MaterialPageRoute({
    	required WidgetBuilder builder,
    	RouteSettings? settings,
    	bool? requestFocus,
    	bool maintainState = true,
    	bool fullscreenDialog = false,
    	bool allowSnapshotting = true,
    	bool barrierDismissible = false
    })
    

IconButton —— 圖標按鈕

點擊時產生圓形背景和水波紋效果。

  • 繼承
    Object > DiagnosticableTree > Widget > StatelessWidget > IconButton
  • 構造函數
    IconButton({
    	Key? key,
    	double? iconSize,
    	VisualDensity? visualDensity,
    	EdgeInsetsGeometry? padding,
    	AlignmentGeometry? alignment,
    	double? splashRadius,
    	Color? color,
    	Color? focusColor,
    	Color? hoverColor,
    	Color? highlightColor,
    	Color? splashColor,
    	Color? disabledColor,
    	required VoidCallback? onPressed,
    	MouseCursor? mouseCursor,
    	FocusNode? focusNode,
    	bool autofocus = false,
    	String? tooltip,
    	bool? enableFeedback,
    	BoxConstraints? constraints,
    	ButtonStyle? style,
    	bool? isSelected,
    	Widget? selectedIcon,
    	required Widget icon
    })
    
  • 屬性
    • disabledColor → Color?
    • highlightColor → Color?
    • icon → Widget:圖標。
    • iconSize → double?:圖標大小。
    • onPressed → VoidCallback?:點擊回調。

Icons —— 圖標集

  • 常量
    • phone → const IconData:電話圖標。

InkWell —— 水波紋

點擊產生水波紋效果。

  • 繼承
    Object > DiagnosticableTree > Widget > StatelessWidget > InkResponse > InkWell
  • 構造函數
    InkWell({
    	Key? key,
    	Widget? child,
    	GestureTapCallback? onTap,
    	GestureTapCallback? onDoubleTap,
    	GestureLongPressCallback? onLongPress,
    	GestureTapDownCallback? onTapDown,
    	GestureTapUpCallback? onTapUp,
    	GestureTapCallback? onTapCancel,
    	GestureTapCallback? onSecondaryTap,
    	GestureTapUpCallback? onSecondaryTapUp,
    	GestureTapDownCallback? onSecondaryTapDown,
    	GestureTapCallback? onSecondaryTapCancel,
    	ValueChanged<bool>? onHighlightChanged,
    	ValueChanged<bool>? onHover,
    	MouseCursor? mouseCursor,
    	Color? focusColor,
    	Color? hoverColor,
    	Color? highlightColor,
    	MaterialStateProperty<Color?>? overlayColor,
    	Color? splashColor,
    	InteractiveInkFeatureFactory? splashFactory,
    	double? radius,
    	BorderRadius? borderRadius,
    	ShapeBorder? customBorder,
    	bool? enableFeedback = true,
    	bool excludeFromSemantics = false,
    	FocusNode? focusNode,
    	bool canRequestFocus = true,
    	ValueChanged<bool>? onFocusChange,
    	bool autofocus = false,
    	MaterialStatesController? statesController,
    	Duration? hoverDuration
    })
    

InputDecoration —— 輸入裝飾

  • 構造函數
    InputDecoration({
    	Widget? icon,
    	Color? iconColor,
    	Widget? label,
    	String? labelText,
    	TextStyle? labelStyle,
    	TextStyle? floatingLabelStyle,
    	Widget? helper,
    	String? helperText,
    	TextStyle? helperStyle,
    	int? helperMaxLines,
    	String? hintText,
    	TextStyle? hintStyle,
    	TextDirection? hintTextDirection,
    	int? hintMaxLines,
    	Duration? hintFadeDuration,
    	Widget? error,
    	String? errorText,
    	TextStyle? errorStyle,
    	int? errorMaxLines,
    	FloatingLabelBehavior? floatingLabelBehavior,
    	FloatingLabelAlignment? floatingLabelAlignment,
    	bool? isCollapsed,
    	bool? isDense,
    	EdgeInsetsGeometry? contentPadding,
    	Widget? prefixIcon,
    	BoxConstraints? prefixIconConstraints,
    	Widget? prefix,
    	String? prefixText,
    	TextStyle? prefixStyle,
    	Color? prefixIconColor,
    	Widget? suffixIcon,
    	Widget? suffix,
    	String? suffixText,
    	TextStyle? suffixStyle,
    	Color? suffixIconColor,
    	BoxConstraints? suffixIconConstraints,
    	Widget? counter,
    	String? counterText,
    	TextStyle? counterStyle,
    	bool? filled,
    	Color? fillColor,
    	Color? focusColor,
    	Color? hoverColor,
    	InputBorder? errorBorder,
    	InputBorder? focusedBorder,
    	InputBorder? focusedErrorBorder,
    	InputBorder? disabledBorder,
    	InputBorder? enabledBorder,
    	InputBorder? border,
    	bool enabled = true,
    	String? semanticCounterText,
    	bool? alignLabelWithHint,
    	BoxConstraints? constraints
    })
    
  • 屬性
    • hintText → String?:提示文本。
    • labelText → String?:標題文本。
    • prefixIcon → Widget?:首部圖標。

LinearProgressIndicator —— 水平進度條

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > ProgressIndicator > LinearProgressIndicator
  • 構造函數
    LinearProgressIndicator({
    	Key? key,
    	double? value,
    	Color? backgroundColor,
    	Color? color,
    	Animation<Color?>? valueColor,
    	double? minHeight,
    	String? semanticsLabel,
    	String? semanticsValue,
    	BorderRadiusGeometry borderRadius = BorderRadius.zero
    })
    
  • 屬性
    • value → double?:當前進度值。範圍從0到1。如為null,則只顯示動畫效果。

ListTile —— 列表瓦片

  • 繼承
    Object > DiagnosticableTree > Widget > StatelessWidget > ListTile
  • 構造函數
    ListTile({
    	Key? key,
    	Widget? leading,
    	Widget? title,
    	Widget? subtitle,
    	Widget? trailing,
    	bool isThreeLine = false,
    	bool? dense,
    	VisualDensity? visualDensity,
    	ShapeBorder? shape,
    	ListTileStyle? style,
    	Color? selectedColor,
    	Color? iconColor,
    	Color? textColor,
    	TextStyle? titleTextStyle,
    	TextStyle? subtitleTextStyle,
    	TextStyle? leadingAndTrailingTextStyle,
    	EdgeInsetsGeometry? contentPadding,
    	bool enabled = true,
    	GestureTapCallback? onTap,
    	GestureLongPressCallback? onLongPress,
    	ValueChanged<bool>? onFocusChange,
    	MouseCursor? mouseCursor,
    	bool selected = false,
    	Color? focusColor,
    	Color? hoverColor,
    	Color? splashColor,
    	FocusNode? focusNode,
    	bool autofocus = false,
    	Color? tileColor,
    	Color? selectedTileColor,
    	bool? enableFeedback,
    	double? horizontalTitleGap,
    	double? minVerticalPadding,
    	double? minLeadingWidth,
    	double? minTileHeight,
    	ListTileTitleAlignment? titleAlignment
    })
    

OutlinedButton —— 線框按鈕

未點擊時有淺淺的邊框,背景透明;點擊時邊框亮起,顯示背景色並伴有水波紋擴散。

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > ButtonStyleButton > OutlinedButton
  • 構造函數
    OutlinedButton({
    	Key? key,
    	required VoidCallback? onPressed,
    	VoidCallback? onLongPress,
    	ValueChanged<bool>? onHover,
    	ValueChanged<bool>? onFocusChange,
    	ButtonStyle? style,
    	FocusNode? focusNode,
    	bool autofocus = false,
    	Clip? clipBehavior,
    	MaterialStatesController? statesController,
    	required Widget? child,
    	IconAlignment iconAlignment = IconAlignment.start
    })
    

PopupMenuButton<T> —— 彈出式菜單按鈕

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > PopupMenuButton
  • 構造函數
    PopupMenuButton({
    	Key? key,
    	required PopupMenuItemBuilder<T> itemBuilder,
    	T? initialValue,
    	VoidCallback? onOpened,
    	PopupMenuItemSelected<T>? onSelected,
    	PopupMenuCanceled? onCanceled,
    	String? tooltip,
    	double? elevation,
    	Color? shadowColor,
    	Color? surfaceTintColor,
    	EdgeInsetsGeometry padding = const EdgeInsets.all(8.0),
    	EdgeInsetsGeometry? menuPadding,
    	Widget? child,
    	double? splashRadius,
    	Widget? icon,
    	double? iconSize,
    	Offset offset = Offset.zero,
    	bool enabled = true,
    	ShapeBorder? shape,
    	Color? color,
    	Color? iconColor,
    	bool? enableFeedback,
    	BoxConstraints? constraints,
    	PopupMenuPosition? position,
    	Clip clipBehavior = Clip.none,
    	bool useRootNavigator = false,
    	AnimationStyle? popUpAnimationStyle,
    	RouteSettings? routeSettings,
    	ButtonStyle? style
    })
    
  • 屬性
    • child → Widget?:子組件。
    • itemBuilder → PopupMenuItemBuilder<T>:彈出式菜單項構建器。
    • onCanceled → PopupMenuCanceled?:彈出式菜單關閉時的回調。只在沒有選中菜單項時運行。
    • onSelected → PopupMenuItemSelected<T>?:菜單項被選中後的回調。

PopupMenuItem<T> —— 彈出式菜單項

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > PopupMenuEntry<T> > PopupMenuItem
  • 構造函數
    PopupMenuItem({
    	Key? key,
    	T? value,
    	VoidCallback? onTap,
    	bool enabled = true,
    	double height = kMinInteractiveDimension,
    	EdgeInsets? padding,
    	TextStyle? textStyle,
    	MaterialStateProperty<TextStyle?>? labelTextStyle,
    	MouseCursor? mouseCursor,
    	required Widget? child
    })
    

Radio<T> —— 單選框

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > Radio
  • 構造函數
    Radio({
    	Key? key,
    	required T value,
    	required T? groupValue,
    	required ValueChanged<T?>? onChanged,
    	MouseCursor? mouseCursor,
    	bool toggleable = false,
    	Color? activeColor,
    	MaterialStateProperty<Color?>? fillColor,
    	Color? focusColor,
    	Color? hoverColor,
    	MaterialStateProperty<Color?>? overlayColor,
    	double? splashRadius,
    	MaterialTapTargetSize? materialTapTargetSize,
    	VisualDensity? visualDensity,
    	FocusNode? focusNode,
    	bool autofocus = false
    })
    

Scaffold —— 腳手架

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > Scaffold
  • 構造函數
    Scaffold({
    	Key? key,
    	PreferredSizeWidget? appBar,
    	Widget? body,
    	Widget? floatingActionButton,
    	FloatingActionButtonLocation? floatingActionButtonLocation,
    	FloatingActionButtonAnimator? floatingActionButtonAnimator,
    	List<Widget>? persistentFooterButtons,
    	AlignmentDirectional persistentFooterAlignment = AlignmentDirectional.centerEnd,
    	Widget? drawer,
    	DrawerCallback? onDrawerChanged,
    	Widget? endDrawer,
    	DrawerCallback? onEndDrawerChanged,
    	Widget? bottomNavigationBar,
    	Widget? bottomSheet,
    	Color? backgroundColor,
    	bool? resizeToAvoidBottomInset,
    	bool primary = true,
    	DragStartBehavior drawerDragStartBehavior = DragStartBehavior.start,
    	bool extendBody = false,
    	bool extendBodyBehindAppBar = false,
    	Color? drawerScrimColor,
    	double? drawerEdgeDragWidth,
    	bool drawerEnableOpenDragGesture = true,
    	bool endDrawerEnableOpenDragGesture = true,
    	String? restorationId
    })
    
  • 屬性
    • appBar → PreferredSizeWidget?:頂部應用程序欄。由一個標題欄和其它可能的組件組成。
    • body → Widget?:界面主要內容。
    • bottomNavigationBar → Widget?:底部導航欄。
    • drawer → Widget?:從左側滑出的抽屜組件。
    • floatingActionButton → Widget?:浮動操作按鈕。Z軸它位於整個界面之上。
    • floatingActionButtonLocation → FloatingActionButtonLocation?:浮動操作按鈕的位置。默認在界面右下角。

ScaffoldMessenger —— 腳手架信使

  • 靜態方法
    • of(BuildContext context) → ScaffoldMessengerState

ScaffoldMessengerState —— 腳手架信使狀態

  • 方法
    • showSnackBar(SnackBar snackBar, {AnimationStyle? snackBarAnimationStyle}) → ScaffoldFeatureController<SnackBar, SnackBarClosedReason>

SimpleDialog —— 簡單對話框

  • 繼承
    Object > DiagnosticableTree > Widget > StatelessWidget > SimpleDialog
  • 構造函數
    SimpleDialog({
    	Key? key,
    	Widget? title,
    	EdgeInsetsGeometry titlePadding = const EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 0.0),
    	TextStyle? titleTextStyle,
    	List<Widget>? children,
    	EdgeInsetsGeometry contentPadding = const EdgeInsets.fromLTRB(0.0, 12.0, 0.0, 16.0),
    	Color? backgroundColor,
    	double? elevation,
    	Color? shadowColor,
    	Color? surfaceTintColor,
    	String? semanticLabel,
    	EdgeInsets? insetPadding,
    	Clip? clipBehavior,
    	ShapeBorder? shape,
    	AlignmentGeometry? alignment
    })
    
  • 屬性
    • children → List<Widget>?:子組件列表。總是縱向排列。
    • title → Widget?:標題。

SimpleDialogOption —— 簡單對話框的選項

  • 繼承
    Object > DiagnosticableTree > Widget > StatelessWidget > SimpleDialogOption
  • 構造函數
    SimpleDialogOption({
    	Key? key,
    	VoidCallback? onPressed,
    	EdgeInsets? padding,
    	Widget? child
    })
    

Slider —— 滑塊

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > Slider
  • 構造函數
    Slider({
    	Key? key,
    	required double value,
    	double? secondaryTrackValue,
    	required ValueChanged<double>? onChanged,
    	ValueChanged<double>? onChangeStart,
    	ValueChanged<double>? onChangeEnd,
    	double min = 0.0,
    	double max = 1.0,
    	int? divisions,
    	String? label,
    	Color? activeColor,
    	Color? inactiveColor,
    	Color? secondaryActiveColor,
    	Color? thumbColor,
    	MaterialStateProperty<Color?>? overlayColor,
    	MouseCursor? mouseCursor,
    	SemanticFormatterCallback? semanticFormatterCallback,
    	FocusNode? focusNode,
    	bool autofocus = false,
    	SliderInteraction? allowedInteraction
    })
    
  • 屬性
    • activeColor → Color?:滑過部分的顏色。
    • inactiveColor → Color?:未滑過部分的顏色。
    • max → double:最大位置值。
    • min → double:最小位置值。
    • onChanged → ValueChanged<double>?:滑動過程中的回調。Slider不維護任何狀態,需要在此方法中重繪滑塊。
    • onChangeEnd → ValueChanged<double>?:滑動結束的回調。
    • onChangeStart → ValueChanged<double>?:滑動開始的回調。
    • value → double:當前位置值。

SnackBar —— 底部提示欄

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > SnackBar
  • 構造函數
    SnackBar({
    	Key? key,
    	required Widget content,
    	Color? backgroundColor,
    	double? elevation,
    	EdgeInsetsGeometry? margin,
    	EdgeInsetsGeometry? padding,
    	double? width,
    	ShapeBorder? shape,
    	HitTestBehavior? hitTestBehavior,
    	SnackBarBehavior? behavior,
    	SnackBarAction? action,
    	double? actionOverflowThreshold,
    	bool? showCloseIcon,
    	Color? closeIconColor,
    	Duration duration = _snackBarDisplayDuration,
    	Animation<double>? animation,
    	VoidCallback? onVisible,
    	DismissDirection? dismissDirection,
    	Clip clipBehavior = Clip.hardEdge
    })
    

*屬性
* action → SnackBarAction?:用來觸發一個快捷操作。
* backgroundColor → Color?:背景色。默認為深灰色。
* content → Widget:內容。
* duration → Duration:顯示的持續時長。

Switch —— 開關

  • 繼承
    Object > DiagnosticableTree > Widget > StatelessWidget > Switch
  • 構造函數
    Switch({
    	Key? key,
    	required bool value,
    	required ValueChanged\<bool>? onChanged,
    	Color? activeColor,
    	Color? activeTrackColor,
    	Color? inactiveThumbColor,
    	Color? inactiveTrackColor,
    	ImageProvider<Object>? activeThumbImage,
    	ImageErrorListener? onActiveThumbImageError,
    	ImageProvider<Object>? inactiveThumbImage,
    	ImageErrorListener? onInactiveThumbImageError,
    	MaterialStateProperty<Color?>? thumbColor,
    	MaterialStateProperty<Color?>? trackColor,
    	MaterialStateProperty<Color?>? trackOutlineColor,
    	MaterialStateProperty<double?>? trackOutlineWidth,
    	MaterialStateProperty<Icon?>? thumbIcon,
    	MaterialTapTargetSize? materialTapTargetSize,
    	DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    	MouseCursor? mouseCursor,
    	Color? focusColor,
    	Color? hoverColor,
    	MaterialStateProperty<Color?>? overlayColor,
    	double? splashRadius,
    	FocusNode? focusNode,
    	ValueChanged<bool>? onFocusChange,
    	bool autofocus = false
    })
    

Tab —— 選項卡

  • 繼承
    Object > DiagnosticableTree > Widget > StatelessWidget > Tab
  • 構造函數
    Tab({
    	Key? key,
    	String? text,
    	Widget? icon,
    	EdgeInsetsGeometry? iconMargin,
    	double? height,
    	Widget? child
    })
    

TabBar —— 選項卡欄

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > TabBar
  • 構造函數
    TabBar({
    	Key? key,
    	required List<Widget> tabs,
    	TabController? controller,
    	bool isScrollable = false,
    	EdgeInsetsGeometry? padding,
    	Color? indicatorColor,
    	bool automaticIndicatorColorAdjustment = true,
    	double indicatorWeight = 2.0,
    	EdgeInsetsGeometry indicatorPadding = EdgeInsets.zero,
    	Decoration? indicator,
    	TabBarIndicatorSize? indicatorSize,
    	Color? dividerColor,
    	double? dividerHeight,
    	Color? labelColor,
    	TextStyle? labelStyle,
    	EdgeInsetsGeometry? labelPadding,
    	Color? unselectedLabelColor,
    	TextStyle? unselectedLabelStyle,
    	DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    	MaterialStateProperty<Color?>? overlayColor,
    	MouseCursor? mouseCursor,
    	bool? enableFeedback,
    	ValueChanged<int>? onTap,
    	ScrollPhysics? physics,
    	InteractiveInkFeatureFactory? splashFactory,
    	BorderRadius? splashBorderRadius,
    	TabAlignment? tabAlignment,
    	TextScaler? textScaler
    })
    
  • 屬性
    • controller → TabController?:選項卡控制器。
    • indicatorColor → Color?:選項卡下方的選中指示器顏色。
    • indicatorSize → TabBarIndicatorSize?:選項卡的寬度。
    • indicatorWeight → double:選項卡下方的選中指示器高度。
    • tabs → List<Widget>:選項卡列表。

TabBarView —— 選項卡欄頁面內容視圖

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > TabBarView
  • 構造函數
    TabBarView({
    	Key? key,
    	required List<Widget> children,
    	TabController? controller,
    	ScrollPhysics? physics,
    	DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    	double viewportFraction = 1.0,
    	Clip clipBehavior = Clip.hardEdge
    })
    

TabController —— 水平選項卡控制器

  • 繼承
    Object > ChangeNotifier > TabController
  • 構造函數
    TabController({
    	int initialIndex = 0,
    	Duration? animationDuration,
    	required int length,
    	required TickerProvider vsync
    })
    
  • 方法
    • dispose() → void

TextButton —— 文本按鈕

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > ButtonStyleButton > TextButton
  • 構造函數
    TextButton({
    	Key? key,
    	required VoidCallback? onPressed,
    	VoidCallback? onLongPress,
    	ValueChanged<bool>? onHover,
    	ValueChanged<bool>? onFocusChange,
    	ButtonStyle? style,
    	FocusNode? focusNode,
    	bool autofocus = false,
    	Clip? clipBehavior,
    	MaterialStatesController? statesController,
    	bool? isSemanticButton = true,
    	required Widget child,
    	IconAlignment iconAlignment = IconAlignment.start
    })
    

TextField —— 文本框字段

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > TextField
  • 構造函數
    TextField({
    	Key? key,
    	Object groupId = EditableText,
    	TextEditingController? controller,
    	FocusNode? focusNode,
    	UndoHistoryController? undoController,
    	InputDecoration? decoration = const InputDecoration(),
    	TextInputType? keyboardType,
    	TextInputAction? textInputAction,
    	TextCapitalization textCapitalization = TextCapitalization.none,
    	TextStyle? style,
    	StrutStyle? strutStyle,
    	TextAlign textAlign = TextAlign.start,
    	TextAlignVertical? textAlignVertical,
    	TextDirection? textDirection,
    	bool readOnly = false,
    	@Deprecated(
    		'Use `contextMenuBuilder` instead. '
    		'This feature was deprecated after v3.3.0-0.5.pre.'
    	)
    	ToolbarOptions? toolbarOptions,
    	bool? showCursor,
    	bool autofocus = false,
    	MaterialStatesController? statesController,
    	String obscuringCharacter = '•',
    	bool obscureText = false,
    	bool autocorrect = true,
    	SmartDashesType? smartDashesType,
    	SmartQuotesType? smartQuotesType,
    	bool enableSuggestions = true,
    	int? maxLines = 1,
    	int? minLines,
    	bool expands = false,
    	int? maxLength,
    	MaxLengthEnforcement? maxLengthEnforcement,
    	ValueChanged<String>? onChanged,
    	VoidCallback? onEditingComplete,
    	ValueChanged<String>? onSubmitted,
    	AppPrivateCommandCallback? onAppPrivateCommand,
    	List<TextInputFormatter>? inputFormatters,
    	bool? enabled,
    	bool? ignorePointers,
    	double cursorWidth = 2.0,
    	double? cursorHeight,
    	Radius? cursorRadius,
    	bool? cursorOpacityAnimates,
    	Color? cursorColor,
    	Color? cursorErrorColor,
    	BoxHeightStyle selectionHeightStyle = ui.BoxHeightStyle.tight,
    	BoxWidthStyle selectionWidthStyle = ui.BoxWidthStyle.tight,
    	Brightness? keyboardAppearance,
    	EdgeInsets scrollPadding = const EdgeInsets.all(20.0),
    	DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    	bool? enableInteractiveSelection,
    	TextSelectionControls? selectionControls,
    	GestureTapCallback? onTap,
    	bool onTapAlwaysCalled = false,
    	TapRegionCallback? onTapOutside,
    	MouseCursor? mouseCursor,
    	InputCounterWidgetBuilder? buildCounter,
    	ScrollController? scrollController,
    	ScrollPhysics? scrollPhysics,
    	Iterable<String>? autofillHints = const <String>[],
    	ContentInsertionConfiguration? contentInsertionConfiguration,
    	Clip clipBehavior = Clip.hardEdge,
    	String? restorationId,
    	bool scribbleEnabled = true,
    	bool enableIMEPersonalizedLearning = true,
    	EditableTextContextMenuBuilder? contextMenuBuilder = _defaultContextMenuBuilder,
    	bool canRequestFocus = true,
    	SpellCheckConfiguration? spellCheckConfiguration,
    	TextMagnifierConfiguration? magnifierConfiguration
    })
    
  • 屬性
    • autofocus → bool:是否自動獲取焦點。
    • controller → TextEditingController?:文本編輯控制器。
    • decoration → InputDecoration?:輸入裝飾。
    • maxLines → int?:最大行數。默認為1。
    • maxLength → int?:文本最大長度。如指定,則當前長度和最大長度會顯示在文本框右下角。
    • maxLengthEnforcement → MaxLengthEnforcement?
    • keyboardType → TextInputType:彈出軟鍵盤的類型。
    • obscureText → bool:是否隱藏文本明文。
    • onChanged → ValueChanged<String>?:文本內容變更時的回調。
    • onEditingComplete → VoidCallback?:文本編輯完成時的回調。
    • onSubmitted → ValueChanged<String>?:文本提交時的回調。
    • textInputAction → TextInputAction?:文本輸入操作。

TextFormField —— 表單文本框字段

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > FormField<String> > TextFormField
  • 構造函數
    TextFormField({
    	Key? key,
    	Object groupId = EditableText,
    	TextEditingController? controller,
    	String? initialValue,
    	FocusNode? focusNode,
    	String? forceErrorText,
    	InputDecoration? decoration = const InputDecoration(),
    	TextInputType? keyboardType,
    	TextCapitalization textCapitalization = TextCapitalization.none,
    	TextInputAction? textInputAction,
    	TextStyle? style,
    	StrutStyle? strutStyle,
    	TextDirection? textDirection,
    	TextAlign textAlign = TextAlign.start,
    	TextAlignVertical? textAlignVertical,
    	bool autofocus = false,
    	bool readOnly = false,
    	@Deprecated(
    		'Use `contextMenuBuilder` instead. '
    		'This feature was deprecated after v3.3.0-0.5.pre.'
    	)
    	ToolbarOptions? toolbarOptions,
    	bool? showCursor,
    	String obscuringCharacter = '•',
    	bool obscureText = false,
    	bool autocorrect = true,
    	SmartDashesType? smartDashesType,
    	SmartQuotesType? smartQuotesType,
    	bool enableSuggestions = true,
    	MaxLengthEnforcement? maxLengthEnforcement,
    	int? maxLines = 1,
    	int? minLines,
    	bool expands = false,
    	int? maxLength,
    	ValueChanged<String>? onChanged,
    	GestureTapCallback? onTap,
    	bool onTapAlwaysCalled = false,
    	TapRegionCallback? onTapOutside,
    	VoidCallback? onEditingComplete,
    	ValueChanged<String>? onFieldSubmitted,
    	FormFieldSetter<String>? onSaved,
    	FormFieldValidator<String>? validator,
    	List<TextInputFormatter>? inputFormatters,
    	bool? enabled,
    	bool? ignorePointers,
    	double cursorWidth = 2.0,
    	double? cursorHeight,
    	Radius? cursorRadius,
    	Color? cursorColor,
    	Color? cursorErrorColor,
    	Brightness? keyboardAppearance,
    	EdgeInsets scrollPadding = const EdgeInsets.all(20.0),
    	bool? enableInteractiveSelection,
    	TextSelectionControls? selectionControls,
    	InputCounterWidgetBuilder? buildCounter,
    	ScrollPhysics? scrollPhysics,
    	Iterable<String>? autofillHints,
    	AutovalidateMode? autovalidateMode,
    	ScrollController? scrollController,
    	String? restorationId,
    	bool enableIMEPersonalizedLearning = true,
    	MouseCursor? mouseCursor,
    	EditableTextContextMenuBuilder? contextMenuBuilder = _defaultContextMenuBuilder,
    	SpellCheckConfiguration? spellCheckConfiguration,
    	TextMagnifierConfiguration? magnifierConfiguration,
    	UndoHistoryController? undoController,
    	AppPrivateCommandCallback? onAppPrivateCommand,
    	bool? cursorOpacityAnimates,
    	BoxHeightStyle selectionHeightStyle = ui.BoxHeightStyle.tight,
    	BoxWidthStyle selectionWidthStyle = ui.BoxWidthStyle.tight,
    	DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    	ContentInsertionConfiguration? contentInsertionConfiguration,
    	MaterialStatesController? statesController,
    	Clip clipBehavior = Clip.hardEdge,
    	bool scribbleEnabled = true,
    	bool canRequestFocus = true
    })
    
  • 屬性
    • onSaved → FormFieldSetter<String>?:文本保存時的回調。
    • validator → FormFieldValidator<String>?:文本內容校驗器。

Theme —— 主題

  • 繼承
    Object > DiagnosticableTree > Widget > StatelessWidget > Theme
  • 構造函數
    Theme({
    	Key? key,
    	required ThemeData data,
    	required Widget child
    })
    
  • 屬性
    • child → Widget:子組件。
    • data → ThemeData:主題數據。
  • 靜態方法
    • of(BuildContext context) → ThemeData:獲取上下文的主題數據。

ThemeData —— 主題數據

  • 構造函數

    ThemeData({
    	Iterable<Adaptation<Object>>? adaptations,
    	bool? applyElevationOverlayColor,
    	NoDefaultCupertinoThemeData? cupertinoOverrideTheme,
    	Iterable<ThemeExtension>? extensions,
    	InputDecorationTheme? inputDecorationTheme,
    	MaterialTapTargetSize? materialTapTargetSize,
    	PageTransitionsTheme? pageTransitionsTheme,
    	TargetPlatform? platform,
    	ScrollbarThemeData? scrollbarTheme,
    	InteractiveInkFeatureFactory? splashFactory,
    	bool? useMaterial3,
    	VisualDensity? visualDensity,
    	ColorScheme? colorScheme,
    	Brightness? brightness,
    	Color? colorSchemeSeed,
    	Color? canvasColor,
    	Color? cardColor,
    	Color? dialogBackgroundColor,
    	Color? disabledColor,
    	Color? dividerColor,
    	Color? focusColor,
    	Color? highlightColor,
    	Color? hintColor,
    	Color? hoverColor,
    	Color? indicatorColor,
    	Color? primaryColor,
    	Color? primaryColorDark,
    	Color? primaryColorLight,
    	MaterialColor? primarySwatch,
    	Color? scaffoldBackgroundColor,
    	Color? secondaryHeaderColor,
    	Color? shadowColor,
    	Color? splashColor,
    	Color? unselectedWidgetColor,
    	String? fontFamily,
    	List<String>? fontFamilyFallback,
    	String? package,
    	IconThemeData? iconTheme,
    	IconThemeData? primaryIconTheme,
    	TextTheme? primaryTextTheme,
    	TextTheme? textTheme,
    	Typography? typography,
    	ActionIconThemeData? actionIconTheme,
    	AppBarTheme? appBarTheme,
    	BadgeThemeData? badgeTheme,
    	MaterialBannerThemeData? bannerTheme,
    	BottomAppBarTheme? bottomAppBarTheme,
    	BottomNavigationBarThemeData? bottomNavigationBarTheme,
    	BottomSheetThemeData? bottomSheetTheme,
    	ButtonThemeData? buttonTheme,
    	CardTheme? cardTheme,
    	CheckboxThemeData? checkboxTheme,
    	ChipThemeData? chipTheme,
    	DataTableThemeData? dataTableTheme,
    	DatePickerThemeData? datePickerTheme,
    	DialogTheme? dialogTheme,
    	DividerThemeData? dividerTheme,
    	DrawerThemeData? drawerTheme,
    	DropdownMenuThemeData? dropdownMenuTheme,
    	ElevatedButtonThemeData? elevatedButtonTheme,
    	ExpansionTileThemeData? expansionTileTheme,
    	FilledButtonThemeData? filledButtonTheme,
    	FloatingActionButtonThemeData? floatingActionButtonTheme,
    	IconButtonThemeData? iconButtonTheme,
    	ListTileThemeData? listTileTheme,
    	MenuBarThemeData? menuBarTheme,
    	MenuButtonThemeData? menuButtonTheme,
    	MenuThemeData? menuTheme,
    	NavigationBarThemeData? navigationBarTheme,
    	NavigationDrawerThemeData? navigationDrawerTheme,
    	NavigationRailThemeData? navigationRailTheme,
    	OutlinedButtonThemeData? outlinedButtonTheme,
    	PopupMenuThemeData? popupMenuTheme,
    	ProgressIndicatorThemeData? progressIndicatorTheme,
    	RadioThemeData? radioTheme,
    	SearchBarThemeData? searchBarTheme,
    	SearchViewThemeData? searchViewTheme,
    	SegmentedButtonThemeData? segmentedButtonTheme,
    	SliderThemeData? sliderTheme,
    	SnackBarThemeData? snackBarTheme,
    	SwitchThemeData? switchTheme,
    	TabBarTheme? tabBarTheme,
    	TextButtonThemeData? textButtonTheme,
    	TextSelectionThemeData? textSelectionTheme,
    	TimePickerThemeData? timePickerTheme,
    	ToggleButtonsThemeData? toggleButtonsTheme,
    	TooltipThemeData? tooltipTheme,
    	@Deprecated(
    		'Use OverflowBar instead. '
    		'This feature was deprecated after v3.21.0-10.0.pre.'
    	)
    	ButtonBarThemeData? buttonBarTheme
    })
    
    • fontFamily:字體族。
  • 屬性

    • primaryColor → Color:主顏色。
  • 方法

    • copyWith({Iterable<Adaptation<Object>>? adaptations, bool? applyElevationOverlayColor, NoDefaultCupertinoThemeData? cupertinoOverrideTheme, Iterable<ThemeExtension>? extensions, InputDecorationTheme? inputDecorationTheme, MaterialTapTargetSize? materialTapTargetSize, PageTransitionsTheme? pageTransitionsTheme, TargetPlatform? platform, ScrollbarThemeData? scrollbarTheme, InteractiveInkFeatureFactory? splashFactory, VisualDensity? visualDensity, ColorScheme? colorScheme, Brightness? brightness, Color? canvasColor, Color? cardColor, Color? dialogBackgroundColor, Color? disabledColor, Color? dividerColor, Color? focusColor, Color? highlightColor, Color? hintColor, Color? hoverColor, Color? indicatorColor, Color? primaryColor, Color? primaryColorDark, Color? primaryColorLight, Color? scaffoldBackgroundColor, Color? secondaryHeaderColor, Color? shadowColor, Color? splashColor, Color? unselectedWidgetColor, IconThemeData? iconTheme, IconThemeData? primaryIconTheme, TextTheme? primaryTextTheme, TextTheme? textTheme, Typography? typography, ActionIconThemeData? actionIconTheme, AppBarTheme? appBarTheme, BadgeThemeData? badgeTheme, MaterialBannerThemeData? bannerTheme, BottomAppBarTheme? bottomAppBarTheme, BottomNavigationBarThemeData? bottomNavigationBarTheme, BottomSheetThemeData? bottomSheetTheme, ButtonThemeData? buttonTheme, CardTheme? cardTheme, CheckboxThemeData? checkboxTheme, ChipThemeData? chipTheme, DataTableThemeData? dataTableTheme, DatePickerThemeData? datePickerTheme, DialogTheme? dialogTheme, DividerThemeData? dividerTheme, DrawerThemeData? drawerTheme, DropdownMenuThemeData? dropdownMenuTheme, ElevatedButtonThemeData? elevatedButtonTheme, ExpansionTileThemeData? expansionTileTheme, FilledButtonThemeData? filledButtonTheme, FloatingActionButtonThemeData? floatingActionButtonTheme, IconButtonThemeData? iconButtonTheme, ListTileThemeData? listTileTheme, MenuBarThemeData? menuBarTheme, MenuButtonThemeData? menuButtonTheme, MenuThemeData? menuTheme, NavigationBarThemeData? navigationBarTheme, NavigationDrawerThemeData? navigationDrawerTheme, NavigationRailThemeData? navigationRailTheme, OutlinedButtonThemeData? outlinedButtonTheme, PopupMenuThemeData? popupMenuTheme, ProgressIndicatorThemeData? progressIndicatorTheme, RadioThemeData? radioTheme, SearchBarThemeData? searchBarTheme, SearchViewThemeData? searchViewTheme, SegmentedButtonThemeData? segmentedButtonTheme, SliderThemeData? sliderTheme, SnackBarThemeData? snackBarTheme, SwitchThemeData? switchTheme, TabBarTheme? tabBarTheme, TextButtonThemeData? textButtonTheme, TextSelectionThemeData? textSelectionTheme, TimePickerThemeData? timePickerTheme, ToggleButtonsThemeData? toggleButtonsTheme, TooltipThemeData? tooltipTheme, bool? useMaterial3, ButtonBarThemeData? buttonBarTheme}) → ThemeData:複製並自定義部分屬性。

TimeOfDay —— 一天中的時間

  • 構造函數

    TimeOfDay({required int hour, required int minute})
    

    當前時間:

    TimeOfDay.now()
    

Tooltip —— 工具提示

在長按時進行提示。

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > Tooltip
  • 構造函數
    Tooltip({
    	Key? key,
    	String? message,
    	InlineSpan? richMessage,
    	double? height,
    	EdgeInsetsGeometry? padding,
    	EdgeInsetsGeometry? margin,
    	double? verticalOffset,
    	bool? preferBelow,
    	bool? excludeFromSemantics,
    	Decoration? decoration,
    	TextStyle? textStyle,
    	TextAlign? textAlign,
    	Duration? waitDuration,
    	Duration? showDuration,
    	Duration? exitDuration,
    	bool enableTapToDismiss = true,
    	TooltipTriggerMode? triggerMode,
    	bool? enableFeedback,
    	TooltipTriggeredCallback? onTriggered,
    	Widget? child
    })
    
  • 屬性
    • child → Widget?

UnderlineTabIndicator —— 下劃線

為子組件添加下劃線。

  • 繼承
    Object > Decoration > UnderlineTabIndicator
  • 構造函數
    UnderlineTabIndicator({
    	BorderRadius? borderRadius,
    	BorderSide borderSide = const BorderSide(width: 2.0, color: Colors.white),
    	EdgeInsetsGeometry insets = EdgeInsets.zero
    })
    

UserAccountsDrawerHeader —— 展示用户賬號信息的抽屜頭

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > UserAccountsDrawerHeader
  • 構造函數
    UserAccountsDrawerHeader({
    	Key? key,
    	Decoration? decoration,
    	EdgeInsetsGeometry? margin = const EdgeInsets.only(bottom: 8.0),
    	Widget? currentAccountPicture,
    	List<Widget>? otherAccountsPictures,
    	Size currentAccountPictureSize = const Size.square(72.0),
    	Size otherAccountsPicturesSize = const Size.square(40.0),
    	required Widget? accountName,
    	required Widget? accountEmail,
    	VoidCallback? onDetailsPressed,
    	Color arrowColor = Colors.white
    })
    

枚舉

TabBarIndicatorSize —— 選項卡欄指示器大小

    • label → const TabBarIndicatorSize:每個選項卡調整為適合實際內容的寬度。
    • tab → const TabBarIndicatorSize:所有選項卡等寬,均分空間。

函數

showDatePicker —— 展示日期選擇器

調用系統的組件。

Future<DateTime?> showDatePicker({
	required BuildContext context,
	DateTime? initialDate,
	required DateTime firstDate,
	required DateTime lastDate,
	DateTime? currentDate,
	DatePickerEntryMode initialEntryMode = DatePickerEntryMode.calendar,
	SelectableDayPredicate? selectableDayPredicate,
	String? helpText,
	String? cancelText,
	String? confirmText,
	Locale? locale,
	bool barrierDismissible = true,
	Color? barrierColor,
	String? barrierLabel,
	bool useRootNavigator = true,
	RouteSettings? routeSettings,
	TextDirection? textDirection,
	TransitionBuilder? builder,
	DatePickerMode initialDatePickerMode = DatePickerMode.day,
	String? errorFormatText,
	String? errorInvalidText,
	String? fieldHintText,
	String? fieldLabelText,
	TextInputType? keyboardType,
	Offset? anchorPoint,
	ValueChanged<DatePickerEntryMode>? onDatePickerModeChange,
	Icon? switchToInputEntryModeIcon,
	Icon? switchToCalendarEntryModeIcon,
})
  • context:構建上下文。
  • firstDate:可選擇的開始日期。
  • initialDate:初始顯示的日期。
  • lastDate:可選中的結束日期。

showDialog —— 展示對話框

Future<T?> showDialog<T>({
	required BuildContext context,
	required WidgetBuilder builder,
	bool barrierDismissible = true,
	Color? barrierColor,
	String? barrierLabel,
	bool useSafeArea = true,
	bool useRootNavigator = true,
	RouteSettings? routeSettings,
	Offset? anchorPoint,
	TraversalEdgeBehavior? traversalEdgeBehavior,
})

showTimePicker —— 展示時間選擇器

調用系統的組件。

Future<TimeOfDay?> showTimePicker({
	required BuildContext context,
	required TimeOfDay initialTime,
	TransitionBuilder? builder,
	bool barrierDismissible = true,
	Color? barrierColor,
	String? barrierLabel,
	bool useRootNavigator = true,
	TimePickerEntryMode initialEntryMode = TimePickerEntryMode.dial,
	String? cancelText,
	String? confirmText,
	String? helpText,
	String? errorInvalidText,
	String? hourLabelText,
	String? minuteLabelText,
	RouteSettings? routeSettings,
	EntryModeChangeCallback? onEntryModeChanged,
	Offset? anchorPoint,
	Orientation? orientation,
})
  • context:構建上下文。
  • initialTime:初始顯示的時間。

painting 【繪圖庫】

import 'package:flutter/painting.dart';

Alignment —— 對齊

  • 繼承
    Object > AlignmentGeometry > Alignment
  • 構造函數
    Alignment(double x, double y)
    
  • 常量
    • bottomCenter → const Alignment
    • bottomLeft → const Alignment
    • bottomRight → const Alignment
    • center → const Alignment
    • centerLeft → const Alignment
    • centerRight → const Alignment
    • topCenter → const Alignment
    • topLeft → const Alignment
    • topRight → const Alignment

AlignmentDirectional —— 對齊方向

  • 繼承
    Object > AlignmentGeometry > AlignmentDirectional
  • 構造函數
    AlignmentDirectional(double start, double y)
    
  • 常量
    • bottomCenter → const AlignmentDirectional
    • bottomEnd → const AlignmentDirectional
    • bottomStart → const AlignmentDirectional
    • center → const AlignmentDirectional
    • centerEnd → const AlignmentDirectional
    • centerStart → const AlignmentDirectional
    • topCenter → const AlignmentDirectional
    • topEnd → const AlignmentDirectional
    • topStart → const AlignmentDirectional

AssetImage —— 資源圖片

  • 繼承
    Object > ImageProvider<AssetBundleImageKey> > AssetBundleImageProvider > AssetImage
  • 構造函數
    AssetImage(
    	String assetName,
    	{
    	AssetBundle? bundle,
    	String? package
    	}
    )
    

Axis —— 座標軸

  • 繼承
    Object > Enum > Axis
    • horizontal → const Axis:水平座標軸。
    • vertical → const Axis:垂直座標軸。

BorderRadius —— 邊框圓角半徑

  • 繼承
    Object > BorderRadiusGeometry > BorderRadius
  • 構造函數
    BorderRadius.circular(double radius)
    

BoxDecoration —— 盒裝飾

  • 繼承
    Object > Decoration > BoxDecoration
  • 構造函數
    BoxDecoration({
    	Color? color,
    	DecorationImage? image,
    	BoxBorder? border,
    	BorderRadiusGeometry? borderRadius,
    	List<BoxShadow>? boxShadow,
    	Gradient? gradient,
    	BlendMode? backgroundBlendMode,
    	BoxShape shape = BoxShape.rectangle
    })
    
  • 屬性
    • backgroundBlendMode → BlendMode?:背景混合模式。
    • border → BoxBorder?:邊框。
    • borderRadius → BorderRadiusGeometry?:邊框圓角半徑。
    • boxShadow → List<BoxShadow>?:陰影。
    • color → Color?:顏色。
    • gradient → Gradient?:漸變。
    • image → DecorationImage?:圖片。
    • shape → BoxShape:形狀。

EdgeInsets —— 邊緣鑲嵌

  • 繼承
    Object > EdgeInsetsGeometry > EdgeInsets

  • 構造函數

    所有邊距使用相同的值:

    EdgeInsets.all(double value)
    

    分佈指定四個方向的邊距:

    EdgeInsets.fromLTRB(double left, double top, double right, double bottom)
    

    可只指定某些方向的邊距:

    EdgeInsets.only({double left = 0.0, double top = 0.0, double right = 0.0, double bottom = 0.0})
    

    可只指定某些對稱方向的邊距:

    EdgeInsets.symmetric({double vertical = 0.0, double horizontal = 0.0})
    
  • 常量

    • zero → const EdgeInsets

FlutterLogoDecoration —— Flutter的logo裝飾

  • 繼承
    Object > Decoration > FlutterLogoDecoration
  • 構造函數
    FlutterLogoDecoration({
    	Color textColor = const Color(0xFF757575),
    	FlutterLogoStyle style = FlutterLogoStyle.markOnly,
    	EdgeInsets margin = EdgeInsets.zero
    })
    

LinearGradient —— 線性漸變

  • 繼承
    Object > Gradient > LinearGradient
  • 構造函數
    LinearGradient({
    	AlignmentGeometry begin = Alignment.centerLeft,
    	AlignmentGeometry end = Alignment.centerRight,
    	required List<Color> colors,
    	List<double>? stops,
    	TileMode tileMode = TileMode.clamp,
    	GradientTransform? transform
    })
    

NetworkImage —— 網絡圖片

  • 繼承
    Object > ImageProvider<NetworkImage> > NetworkImage
  • 構造函數
    NetworkImage(
    	String url,
    	{
    	double scale,
    	Map<String, String>? headers
    	}
    )
    

ShapeDecoration —— 形狀裝飾

  • 繼承
    Object > Decoration > ShapeDecoration
  • 構造函數
    ShapeDecoration({
    	Color? color,
    	DecorationImage? image,
    	Gradient? gradient,
    	List<BoxShadow>? shadows,
    	required ShapeBorder shape
    })
    

TextSpan —— 文本片段

  • 繼承
    Object > DiagnosticableTree > InlineSpan > TextSpan
  • 構造函數
    TextSpan({
    	String? text,
    	List<InlineSpan>? children,
    	TextStyle? style,
    	GestureRecognizer? recognizer,
    	MouseCursor? mouseCursor,
    	PointerEnterEventListener? onEnter,
    	PointerExitEventListener? onExit,
    	String? semanticsLabel,
    	Locale? locale,
    	bool? spellOut
    })
    
  • 屬性
    • recognizer → GestureRecognizer?:觸摸事件手勢識別器。

TextStyle —— 文本樣式

  • 構造函數

    TextStyle({
    	bool inherit = true,
    	Color? color,
    	Color? backgroundColor,
    	double? fontSize,
    	FontWeight? fontWeight,
    	FontStyle? fontStyle,
    	double? letterSpacing,
    	double? wordSpacing,
    	TextBaseline? textBaseline,
    	double? height,
    	TextLeadingDistribution? leadingDistribution,
    	Locale? locale,
    	Paint? foreground,
    	Paint? background,
    	List<Shadow>? shadows,
    	List<FontFeature>? fontFeatures,
    	List<FontVariation>? fontVariations,
    	TextDecoration? decoration,
    	Color? decorationColor,
    	TextDecorationStyle? decorationStyle,
    	double? decorationThickness,
    	String? debugLabel,
    	String? fontFamily,
    	List<String>? fontFamilyFallback,
    	String? package,
    	TextOverflow? overflow
    })
    
    • package:包名。字體在某個包中但該字體未在pubspec.yaml中聲明時使用。
  • 屬性

    • background → Paint?:背景色。
    • color → Color?:文本顏色。
    • fontFamily → String?:字體族。
    • fontSize → double?:字體大小。
    • decoration → TextDecoration?:背景裝飾。

枚舉

ImageRepeat —— 圖片重複方式

    • repeat → const ImageRepeat
    • repeatX → const ImageRepeat
    • repeatY → const ImageRepeat
    • noRepeat → const ImageRepeat

TextOverflow —— 文本溢出方式

    • clip → const TextOverflow
    • fade → const TextOverflow
    • ellipsis → const TextOverflow:溢出的文本以“...”方式表示。
    • visible → const TextOverflow

VerticalDirection —— 垂直方向

    • up → const VerticalDirection:從下到上。
    • down → const VerticalDirection:從上到下。

path 【跨平台路徑庫】

import 'package:path/path.dart';

函數

  • join(String part1, [String? part2, String? part3, String? part4, String? part5, String? part6, String? part7, String? part8, String? part9, String? part10, String? part11, String? part12, String? part13, String? part14, String? part15, String? part16]) → String:路徑拼接。

rendering 【渲染庫】

import 'package:flutter/rendering.dart';

BoxConstraints —— 盒約束

  • 繼承
    Object > Constraints > BoxConstraints
  • 構造函數
    BoxConstraints({
    	double minWidth = 0.0,
    	double maxWidth = double.infinity,
    	double minHeight = 0.0,
    	double maxHeight = double.infinity
    })
    
  • 屬性
    • maxHeight → double:最大高度。
    • maxWidth → double:最大寬度。
    • minHeight → double:最小高度。
    • minWidth → double:最小寬度。

SliverGridDelegateWithFixedCrossAxisCount —— Sliver家族的固定交叉軸方向元素數量的網格代理

滾動方向為主軸方向。

  • 繼承
    Object > SliverGridDelegate > SliverGridDelegateWithFixedCrossAxisCount
  • 構造函數
    SliverGridDelegateWithFixedCrossAxisCount({
    	required int crossAxisCount,
    	double mainAxisSpacing = 0.0,
    	double crossAxisSpacing = 0.0,
    	double childAspectRatio = 1.0,
    	double? mainAxisExtent
    })
    
  • 屬性
    • childAspectRatio → double:子組件在交叉軸方向和主軸方向上的尺寸比例。
    • crossAxisCount → int:交叉軸方向元素數量。
    • crossAxisSpacing → double:交叉軸方向子組件間距。
    • mainAxisExtent → double?:主軸方向子組件間距。

SliverGridDelegateWithMaxCrossAxisExtent —— Sliver家族的指定交叉軸方向元素最大尺寸的網格代理

滾動方向為主軸方向。

  • 繼承
    Object > SliverGridDelegate > SliverGridDelegateWithMaxCrossAxisExtent
  • 構造函數
    SliverGridDelegateWithMaxCrossAxisExtent({
    	required double maxCrossAxisExtent,
    	double mainAxisSpacing = 0.0,
    	double crossAxisSpacing = 0.0,
    	double childAspectRatio = 1.0,
    	double? mainAxisExtent
    })
    
  • 屬性
    • maxCrossAxisExtent → double:元素在交叉軸方向上的最大尺寸。因為所有子組件是平均分配交叉軸的空間,實際值會在此值的一個範圍附近。

枚舉

CrossAxisAlignment —— 交叉軸對齊方式

    • start → const CrossAxisAlignment
    • end → const CrossAxisAlignment
    • center → const CrossAxisAlignment
    • stretch → const CrossAxisAlignment
    • baseline → const CrossAxisAlignment

DecorationPosition —— 裝飾位置

    • background → const DecorationPosition:子組件後。
    • foreground → const DecorationPosition:子組件前。

HitTestBehavior —— 點擊行為

    • deferToChild → const HitTestBehavior:事件會逐個在每一層組件上響應。
    • opaque → const HitTestBehavior:強制視作不透明組件,使組件全部空間都可響應事件,阻斷其背後組件的響應。(默認情況下,組件的透明部分會被穿透,不響應事件。)
    • translucent → const HitTestBehavior:強制視作半透明組件,會被穿透,背後組件亦可響應事件。

MainAxisAlignment —— 主軸對齊方式

    • start → const MainAxisAlignment
    • end → const MainAxisAlignment
    • center → const MainAxisAlignment
    • spaceBetween → const MainAxisAlignment
    • spaceAround → const MainAxisAlignment
    • spaceEvenly → const MainAxisAlignment

MainAxisSize —— 主軸所佔空間大小

    • min → const MainAxisSize:儘可能少佔用空間,即可以容納所有子組件的最小尺寸。
    • max → const MainAxisSize:儘可能多佔用空間,即使子組件沒有佔滿。

StackFit —— 棧佈局/堆疊佈局的適應方式

    • loose → const StackFit:使用子組件的大小。
    • expand → const StackFit:填充整個Stack
    • passthrough → const StackFit

屬性

debugPaintBaselinesEnabled —— 是否顯示繪圖的基線

對於具有基線的組件,文字基線以亮綠色顯示,表意基線以橙色顯示。

bool debugPaintBaselinesEnabled

debugPaintPointersEnabled —— 是否顯示繪圖的點擊位

被點擊的組件以深青色高亮顯示。

bool debugPaintPointersEnabled

debugPaintSizeEnabled —— 是否顯示繪圖的大小

邊界以青色邊框顯示,對齊方式以黃色箭頭顯示。

bool debugPaintSizeEnabled

函數

debugDumpLayerTree —— 轉儲層級關係

void debugDumpLayerTree()

debugDumpRenderTree —— 轉儲渲染層

void debugDumpRenderTree()

debugDumpSemanticsTree —— 轉儲語義調試

void debugDumpSemanticsTree([ DebugSemanticsDumpOrder childOrder = DebugSemanticsDumpOrder.traversalOrder ])

scheduler 【調度庫】

import 'package:flutter/scheduler.dart';

屬性

debugPrintBeginFrameBanner —— 打印幀開始

debugPrintBeginFrameBanner ↔ bool

debugPrintEndFrameBanner —— 打印幀結束

debugPrintEndFrameBanner ↔ bool

timeDilation —— 動畫時間放慢倍數

應只在程序啓動後設置一次,否則可能引發一些副作用。

services 【平台服務庫】

import 'package:flutter/services.dart';

AssetBundle —— 資源包

  • 方法
    • loadString(String key, {bool cache = true}) → Future<String>:加載字符串內容。

MethodChannel —— 平台通道

Flutter側稱為客户端(Client),原生側稱為宿主(Host)。消息的傳遞是異步的,保證前台UI不會因此而停止響應。發送和接收消息時,序列化和反序列化會自動進行。

  • 構造函數
    MethodChannel(
    	String name,
    	[
    	MethodCodec codec = const StandardMethodCodec(),
    	BinaryMessenger? binaryMessenger
    	]
    )
    
  • 屬性
    • name → String:通道名稱。在單個應用中所有通道名稱必需唯一,建議通道名稱使用有規律的前綴。
  • 方法
    • invokeMethod<T>(String method, [dynamic arguments]) → Future<T?>:調用原生側的方法。

TextInputType —— 文本輸入類型

  • 常量
    • datetime → const TextInputType:日期時間。
    • emailAddress → const TextInputType:郵箱。
    • number → const TextInputType:數字。
    • phone → const TextInputType:電話號碼。
    • text → const TextInputType:文本。
    • url → const TextInputType:網址。

枚舉

TextInputAction —— 文本輸入操作

    • none → const TextInputAction
    • unspecified → const TextInputAction
    • done → const TextInputAction
    • go → const TextInputAction
    • search → const TextInputAction
    • send → const TextInputAction
    • next → const TextInputAction
    • previous → const TextInputAction
    • continueAction → const TextInputAction
    • join → const TextInputAction
    • route → const TextInputAction
    • emergencyCall → const TextInputAction
    • newline → const TextInputAction

widgets 【組件庫】

import 'package:flutter/widgets.dart';

函數

runApp —— 運行應用程序

runApp(Widget app) → void

AbsorbPointer —— 吞噬指向事件

接收並丟棄事件,子組件無法接收。

  • 繼承
    Object > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > AbsorbPointer
  • 構造函數
    AbsorbPointer({
    	Key? key,
    	bool absorbing = true,
    	@Deprecated(
    		'Use ExcludeSemantics or create a custom absorb pointer widget instead. '
    		'This feature was deprecated after v3.8.0-12.0.pre.'
    	)
    	bool? ignoringSemantics, Widget? child
    })
    

BottomNavigationBarItem —— 底部導航欄項

  • 構造函數
    BottomNavigationBarItem({
    	Key? key,
    	required Widget icon,
    	String? label,
    	Widget? activeIcon,
    	Color? backgroundColor,
    	String? tooltip
    })
    
  • 屬性
    • icon → Widget
    • label → String?

BouncingScrollPhysics —— 氣球跳躍式滾動物理效果

  • 繼承
    Object > ScrollPhysics > BouncingScrollPhysics
  • 構造函數
    BouncingScrollPhysics({
    	ScrollDecelerationRate decelerationRate = ScrollDecelerationRate.normal,
    	ScrollPhysics? parent
    })
    

BuildContext —— 構建上下文

  • 屬性
    • widget → Widget:對應的組件。

Builder —— 無狀態組件構建器

  • 繼承
    Object > DiagnosticableTree > Widget > StatelessWidget > Builder
  • 構造函數
    Builder({
    	Key? key,
    	required WidgetBuilder builder
    })
    

Center —— 居中

  • 繼承
    Object > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > Align > Center
  • 構造函數
    Center({
    	Key? key,
    	double? widthFactor,
    	double? heightFactor,
    	Widget? child
    })
    

ClampingScrollPhysics —— 夾緊滾動物理效果

  • 繼承
    Object > ScrollPhysics > ClampingScrollPhysics
  • 構造函數
    ClampingScrollPhysics({ScrollPhysics? parent})
    

Column —— 列布局/垂直佈局

  • 繼承
    Object > DiagnosticableTree > Widget > RenderObjectWidget > MultiChildRenderObjectWidget > Flex > Column
  • 構造函數
    Column({
    	Key? key,
    	MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    	MainAxisSize mainAxisSize = MainAxisSize.max,
    	CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    	TextDirection? textDirection,
    	VerticalDirection verticalDirection = VerticalDirection.down,
    	TextBaseline? textBaseline,
    	List<Widget> children = const <Widget>[]
    })
    
  • 屬性
    • children → List<Widget>:子組件列表。
    • crossAxisAlignment → CrossAxisAlignment:交叉軸對齊方式。
    • mainAxisAlignment → MainAxisAlignment:主軸對齊方式。當mainAxisSizeMainAxisSize.min時,本屬性不起作用,因為空間已被佔滿。
    • mainAxisSize → MainAxisSize:主軸所佔空間大小。默認為MainAxisSize.max。
    • textDirection → TextDirection?:子組件的水平排布方向。默認跟隨系統,大多為TextDirection.ltr
    • verticalDirection → VerticalDirection:子組件的垂直排布方向。默認為VerticalDirection.down

ConstrainedBox —— 約束盒

當子組件超出最大約束時會顯示異常,當子組件未填滿最小約束時未填充部分顯示背景色。

  • 繼承
    Object > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > ConstrainedBox
  • 構造函數
    ConstrainedBox({
    	Key? key,
    	required BoxConstraints constraints,
    	Widget? child
    })
    
  • 屬性
    • child → Widget?:子組件。
    • constraints → BoxConstraints:盒約束條件。

Container —— 容器

  • 繼承
    Object > DiagnosticableTree > Widget > StatelessWidget > Container
  • 構造函數
    Container({
    	Key? key,
    	AlignmentGeometry? alignment,
    	EdgeInsetsGeometry? padding,
    	Color? color,
    	Decoration? decoration,
    	Decoration? foregroundDecoration,
    	double? width,
    	double? height,
    	BoxConstraints? constraints,
    	EdgeInsetsGeometry? margin,
    	Matrix4? transform,
    	AlignmentGeometry? transformAlignment,
    	Widget? child,
    	Clip clipBehavior = Clip.none
    })
    
  • 屬性:
    • alignment → AlignmentGeometry?
    • child → Widget?
    • color → Color?
    • constraints → BoxConstraints?
    • decoration → Decoration?
    • foregroundDecoration → Decoration?
    • margin → EdgeInsetsGeometry?:外邊距。
    • padding → EdgeInsetsGeometry?:內邊距。
    • transform → Matrix4?

CustomScrollView —— 自定義滾動視圖

  • 繼承
    Object > DiagnosticableTree > Widget > StatelessWidget > ScrollView > CustomScrollView
  • 構造函數
    CustomScrollView({
    	Key? key,
    	Axis scrollDirection = Axis.vertical,
    	bool reverse = false,
    	ScrollController? controller,
    	bool? primary,
    	ScrollPhysics? physics,
    	ScrollBehavior? scrollBehavior,
    	bool shrinkWrap = false,
    	Key? center, double anchor = 0.0,
    	double? cacheExtent,
    	List<Widget> slivers = const <Widget>[],
    	int? semanticChildCount,
    	DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    	ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
    	String? restorationId,
    	Clip clipBehavior = Clip.hardEdge,
    	HitTestBehavior hitTestBehavior = HitTestBehavior.opaque
    })
    
  • 屬性
    • slivers → List<Widget>:子組件列表。必須屬於Sliver家族。

DecoratedBox —— 裝飾盒

為子組件添加視覺效果。

  • 繼承
    Object > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > DecoratedBox
  • 構造函數
    DecoratedBox({
    	Key? key,
    	required Decoration decoration,
    	DecorationPosition position = DecorationPosition.background,
    	Widget? child
    })
    
  • 屬性
    • child → Widget?:子組件。
    • decoration → Decoration:裝飾。
    • position → DecorationPosition:裝飾相對於子組件的位置。

DefaultAssetBundle —— 默認資源包

  • 繼承
    Object > DiagnosticableTree > Widget > ProxyWidget > InheritedWidget > DefaultAssetBundle
  • 靜態方法
    • of(BuildContext context) → AssetBundle:返回構建上下文的資源包。

DefaultTextStyle —— 默認文本樣式

其子組件的文本以此為默認文本樣式。

  • 繼承
    Object > DiagnosticableTree > Widget > ProxyWidget > InheritedWidget > InheritedTheme > DefaultTextStyle
  • 構造函數
    DefaultTextStyle({
    	Key? key,
    	required TextStyle style,
    	TextAlign? textAlign,
    	bool softWrap = true,
    	TextOverflow overflow = TextOverflow.clip,
    	int? maxLines,
    	TextWidthBasis textWidthBasis = TextWidthBasis.parent,
    	TextHeightBehavior? textHeightBehavior,
    	required Widget child
    })
    

Element —— 元素

可見的。

  • 繼承
    Object > DiagnosticableTree > Element
  • 構造函數
    Element(Widget widget)
    

Expanded —— 膨脹

令子組件儘可能地填充可用空間。

  • 繼承
    Object > DiagnosticableTree > Widget > ProxyWidget > ParentDataWidget<FlexParentData> > Flexible > Expanded
  • 構造函數
    Expanded({
    	Key? key,
    	int flex = 1,
    	required Widget child
    })
    
  • 屬性
    • flex → int:彈性係數。子組件佔父組件的比例為:flex/父組件所有子組件的flex之和。

FadeInImage —— 淡入圖片

初始顯示佔位圖片,實際圖片加載完成後淡入替換。

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > FadeInImage
  • 構造函數
    FadeInImage.assetNetwork({
    	Key? key,
    	required String placeholder,
    	ImageErrorWidgetBuilder? placeholderErrorBuilder,
    	required String image,
    	ImageErrorWidgetBuilder? imageErrorBuilder,
    	AssetBundle? bundle,
    	double? placeholderScale,
    	double imageScale = 1.0,
    	bool excludeFromSemantics = false,
    	String? imageSemanticLabel,
    	Duration fadeOutDuration = const Duration(milliseconds: 300),
    	Curve fadeOutCurve = Curves.easeOut,
    	Duration fadeInDuration = const Duration(milliseconds: 700),
    	Curve fadeInCurve = Curves.easeIn,
    	double? width,
    	double? height,
    	BoxFit? fit,
    	Color? color,
    	BlendMode? colorBlendMode,
    	Color? placeholderColor,
    	BlendMode? placeholderColorBlendMode,
    	BoxFit? placeholderFit,
    	FilterQuality filterQuality = FilterQuality.medium,
    	FilterQuality? placeholderFilterQuality,
    	AlignmentGeometry alignment = Alignment.center,
    	ImageRepeat repeat = ImageRepeat.noRepeat,
    	bool matchTextDirection = false,
    	int? placeholderCacheWidth,
    	int? placeholderCacheHeight,
    	int? imageCacheWidth,
    	int? imageCacheHeight
    })
    

FocusNode —— 焦點

  • 構造函數
    FocusNode({
    	String? debugLabel,
    	@Deprecated(
    		'Use onKeyEvent instead. '
    		'This feature was deprecated after v3.18.0-2.0.pre.'
    	)
    	FocusOnKeyCallback? onKey,
    	FocusOnKeyEventCallback? onKeyEvent,
    	bool skipTraversal = false,
    	bool canRequestFocus = true,
    	bool descendantsAreFocusable = true,
    	bool descendantsAreTraversable = true
    })
    

Form —— 表單

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > Form
  • 構造函數
    Form({
    	Key? key,
    	required Widget child,
    	bool? canPop,
    	@Deprecated(
    		'Use onPopInvokedWithResult instead. '
    		'This feature was deprecated after v3.22.0-12.0.pre.'
    	)
    	PopInvokedCallback? onPopInvoked,
    	PopInvokedWithResultCallback<Object?>? onPopInvokedWithResult,
    	@Deprecated(
    		'Use canPop and/or onPopInvokedWithResult instead. '
    		'This feature was deprecated after v3.12.0-1.0.pre.'
    	)
    	WillPopCallback? onWillPop,
    	VoidCallback? onChanged,
    	AutovalidateMode? autovalidateMode
    })
    

FormState —— 表單狀態

  • 繼承
    Object > State<Form> > FormState
  • 構造函數
    FormState()
    
  • 方法
    • reset() → void:表單重置。
    • save() → void:表單保存。
    • validate() → bool:表單校驗。

FutureBuilder<T> —— Future構建器

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > FutureBuilder
  • 構造函數
    FutureBuilder({
    	Key? key,
    	required Future<T>? future,
    	T? initialData,
    	required AsyncWidgetBuilder<T> builder
    })
    

Flex —— 彈性佈局

按比例擺放子組件。要求子組件可以被Expanded包裹。

  • 繼承
    Object > DiagnosticableTree > Widget > RenderObjectWidget > MultiChildRenderObjectWidget > Flex
  • 構造函數
    Flex({
    	Key? key,
    	required Axis direction,
    	MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    	MainAxisSize mainAxisSize = MainAxisSize.max,
    	CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    	TextDirection? textDirection,
    	VerticalDirection verticalDirection = VerticalDirection.down,
    	TextBaseline? textBaseline,
    	Clip clipBehavior = Clip.none,
    	List<Widget> children = const <Widget>[]
    })
    
  • 屬性
    • direction → Axis:子組件的排布方向。

FormFieldState<T> —— 表單字段狀態

  • 繼承
    Object > State<FormField<T>> > FormFieldState
  • 方法
    • reset() → void:重置表單字段至其初始值。
    • save() → void:保存。會調用FormField<T>onSaved方法。
    • validate() → bool:校驗表單內容。會調用FormField<T>validator方法。

GestureDetector —— 手勢識別

內部使用GestureRecognizer實現。

  • 繼承
    Object > DiagnosticableTree > Widget > StatelessWidget > GestureDetector
  • 構造函數
    GestureDetector({
    	Key? key,
    	Widget? child,
    	GestureTapDownCallback? onTapDown,
    	GestureTapUpCallback? onTapUp,
    	GestureTapCallback? onTap,
    	GestureTapCancelCallback? onTapCancel,
    	GestureTapCallback? onSecondaryTap,
    	GestureTapDownCallback? onSecondaryTapDown,
    	GestureTapUpCallback? onSecondaryTapUp,
    	GestureTapCancelCallback? onSecondaryTapCancel,
    	GestureTapDownCallback? onTertiaryTapDown,
    	GestureTapUpCallback? onTertiaryTapUp,
    	GestureTapCancelCallback? onTertiaryTapCancel,
    	GestureTapDownCallback? onDoubleTapDown,
    	GestureTapCallback? onDoubleTap,
    	GestureTapCancelCallback? onDoubleTapCancel,
    	GestureLongPressDownCallback? onLongPressDown,
    	GestureLongPressCancelCallback? onLongPressCancel,
    	GestureLongPressCallback? onLongPress,
    	GestureLongPressStartCallback? onLongPressStart,
    	GestureLongPressMoveUpdateCallback? onLongPressMoveUpdate,
    	GestureLongPressUpCallback? onLongPressUp,
    	GestureLongPressEndCallback? onLongPressEnd,
    	GestureLongPressDownCallback? onSecondaryLongPressDown,
    	GestureLongPressCancelCallback? onSecondaryLongPressCancel,
    	GestureLongPressCallback? onSecondaryLongPress,
    	GestureLongPressStartCallback? onSecondaryLongPressStart,
    	GestureLongPressMoveUpdateCallback? onSecondaryLongPressMoveUpdate,
    	GestureLongPressUpCallback? onSecondaryLongPressUp,
    	GestureLongPressEndCallback? onSecondaryLongPressEnd,
    	GestureLongPressDownCallback? onTertiaryLongPressDown,
    	GestureLongPressCancelCallback? onTertiaryLongPressCancel,
    	GestureLongPressCallback? onTertiaryLongPress,
    	GestureLongPressStartCallback? onTertiaryLongPressStart,
    	GestureLongPressMoveUpdateCallback? onTertiaryLongPressMoveUpdate,
    	GestureLongPressUpCallback? onTertiaryLongPressUp,
    	GestureLongPressEndCallback? onTertiaryLongPressEnd,
    	GestureDragDownCallback? onVerticalDragDown,
    	GestureDragStartCallback? onVerticalDragStart,
    	GestureDragUpdateCallback? onVerticalDragUpdate,
    	GestureDragEndCallback? onVerticalDragEnd,
    	GestureDragCancelCallback? onVerticalDragCancel,
    	GestureDragDownCallback? onHorizontalDragDown,
    	GestureDragStartCallback? onHorizontalDragStart,
    	GestureDragUpdateCallback? onHorizontalDragUpdate,
    	GestureDragEndCallback? onHorizontalDragEnd,
    	GestureDragCancelCallback? onHorizontalDragCancel,
    	GestureForcePressStartCallback? onForcePressStart,
    	GestureForcePressPeakCallback? onForcePressPeak,
    	GestureForcePressUpdateCallback? onForcePressUpdate,
    	GestureForcePressEndCallback? onForcePressEnd,
    	GestureDragDownCallback? onPanDown,
    	GestureDragStartCallback? onPanStart,
    	GestureDragUpdateCallback? onPanUpdate,
    	GestureDragEndCallback? onPanEnd,
    	GestureDragCancelCallback? onPanCancel,
    	GestureScaleStartCallback? onScaleStart,
    	GestureScaleUpdateCallback? onScaleUpdate,
    	GestureScaleEndCallback? onScaleEnd,
    	HitTestBehavior? behavior,
    	bool excludeFromSemantics = false,
    	DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    	bool trackpadScrollCausesScale = false,
    	Offset trackpadScrollToScaleFactor = kDefaultTrackpadScrollToScaleFactor,
    	Set<PointerDeviceKind>? supportedDevices
    })
    
  • 屬性
    • onDoubleTap → GestureTapCallback?:雙擊。
    • onHorizontalDragDown → GestureDragDownCallback?:水平方向的拖拽按下。
    • onHorizontalDragEnd → GestureDragEndCallback?:水平方向的拖拽結束。
    • onHorizontalDragUpdate → GestureDragUpdateCallback?:水平方向的拖拽中。
    • onLongPress → GestureLongPressCallback?:長按。
    • onPanDown → GestureDragDownCallback?:滑動按下。onPanDownonTap共存時可能只有onPanDown事件響應。
    • onPanEnd → GestureDragEndCallback?:滑動結束。
    • onPanUpdate → GestureDragUpdateCallback?:滑動中。
    • onScaleEnd → GestureScaleEndCallback?:縮放結束。
    • onScaleStart → GestureScaleStartCallback?:縮放開始。
    • onScaleUpdate → GestureScaleUpdateCallback?:縮放中。
    • onTap → GestureTapCallback?:單擊。onPanDownonTap共存時可能只有onPanDown事件響應。
    • onVerticalDragDown → GestureDragDownCallback?:垂直方向的拖拽按下。
    • onVerticalDragEnd → GestureDragEndCallback?:垂直方向的拖拽結束。
    • onVerticalDragUpdate → GestureDragUpdateCallback?:垂直方向的拖拽

GlobalKey<T extends State<StatefulWidget>> —— 全局鍵

  • 構造函數
    GlobalKey({String? debugLabel})
    
  • 屬性
    • currentState → T?:引用此鍵的對象的當前狀態。

GridView —— 滾動網格視圖

  • 繼承
    Object > DiagnosticableTree > Widget > StatelessWidget > ScrollView > BoxScrollView > GridView

  • 構造函數

    在有足夠簡單的子組件的情況下使用:

    GridView({
    	Key? key,
    	Axis scrollDirection = Axis.vertical,
    	bool reverse = false,
    	ScrollController? controller,
    	bool? primary,
    	ScrollPhysics? physics,
    	bool shrinkWrap = false,
    	EdgeInsetsGeometry? padding,
    	required SliverGridDelegate gridDelegate,
    	bool addAutomaticKeepAlives = true,
    	bool addRepaintBoundaries = true,
    	bool addSemanticIndexes = true,
    	double? cacheExtent,
    	List<Widget> children = const <Widget>[],
    	int? semanticChildCount,
    	DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    	Clip clipBehavior = Clip.hardEdge,
    	ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
    	String? restorationId,
    	HitTestBehavior hitTestBehavior = HitTestBehavior.opaque
    })
    

    適合在子組件較多的情況下使用:

    GridView.builder({
    	Key? key,
    	Axis scrollDirection = Axis.vertical,
    	bool reverse = false,
    	ScrollController? controller,
    	bool? primary,
    	ScrollPhysics? physics,
    	bool shrinkWrap = false,
    	EdgeInsetsGeometry? padding,
    	required SliverGridDelegate gridDelegate,
    	required NullableIndexedWidgetBuilder itemBuilder,
    	ChildIndexGetter? findChildIndexCallback,
    	int? itemCount,
    	bool addAutomaticKeepAlives = true,
    	bool addRepaintBoundaries = true,
    	bool addSemanticIndexes = true,
    	double? cacheExtent,
    	int? semanticChildCount,
    	DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    	ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
    	String? restorationId,
    	Clip clipBehavior = Clip.hardEdge,
    	HitTestBehavior hitTestBehavior = HitTestBehavior.opaque
    })
    

    等價於使用SliverGridDelegateWithFixedCrossAxisCount的快捷實現;

    GridView.count({
    	Key? key,
    	Axis scrollDirection = Axis.vertical,
    	bool reverse = false, 
    	ScrollController? controller,
    	bool? primary,
    	ScrollPhysics? physics,
    	bool shrinkWrap = false,
    	EdgeInsetsGeometry? padding,
    	required int crossAxisCount,
    	double mainAxisSpacing = 0.0,
    	double crossAxisSpacing = 0.0,
    	double childAspectRatio = 1.0,
    	bool addAutomaticKeepAlives = true,
    	bool addRepaintBoundaries = true,
    	bool addSemanticIndexes = true,
    	double? cacheExtent,
    	List<Widget> children = const <Widget>[],
    	int? semanticChildCount,
    	DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    	ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
    	String? restorationId,
    	Clip clipBehavior = Clip.hardEdge,
    	HitTestBehavior hitTestBehavior = HitTestBehavior.opaque
    })
    

    等價於使用SliverGridDelegateWithMaxCrossAxisExtent的快捷實現;

    GridView.extent({
    	Key? key,
    	Axis scrollDirection = Axis.vertical,
    	bool reverse = false,
    	ScrollController? controller,
    	bool? primary,
    	ScrollPhysics? physics,
    	bool shrinkWrap = false,
    	EdgeInsetsGeometry? padding,
    	required double maxCrossAxisExtent,
    	double mainAxisSpacing = 0.0,
    	double crossAxisSpacing = 0.0,
    	double childAspectRatio = 1.0,
    	bool addAutomaticKeepAlives = true,
    	bool addRepaintBoundaries = true,
    	bool addSemanticIndexes = true,
    	double? cacheExtent, List<Widget> children = const <Widget>[],
    	int? semanticChildCount,
    	DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    	ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
    	String? restorationId,
    	Clip clipBehavior = Clip.hardEdge,
    	HitTestBehavior hitTestBehavior = HitTestBehavior.opaque
    })
    
  • 屬性

    • gridDelegate → SliverGridDelegate:用於創建網格的代理。

Hero —— hero動畫/共享元素過渡動畫

在兩個頁面之間共同存在的內容的動畫。

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > Hero
  • 構造函數
    Hero({
    	Key? key,
    	required Object tag,
    	CreateRectTween? createRectTween,
    	HeroFlightShuttleBuilder? flightShuttleBuilder,
    	HeroPlaceholderBuilder? placeholderBuilder,
    	bool transitionOnUserGestures = false,
    	required Widget child
    })
    
  • 屬性
    • tag → Object:必需前後一致,這樣框架才知道要過渡那個組件。

Icon —— 圖標

  • 繼承
    Object > DiagnosticableTree > Widget > StatelessWidget > Icon
  • 構造函數
    Icon(
    	IconData? icon,
    	{
    	Key? key,
    	double? size,
    	double? fill,
    	double? weight,
    	double? grade,
    	double? opticalSize,
    	Color? color,
    	List<Shadow>? shadows,
    	String? semanticLabel,
    	TextDirection? textDirection,
    	bool? applyTextScaling
    	}
    )
    

IconData —— 圖標數據

  • 構造函數
    IconData(
    	int codePoint,
    	{
    	String? fontFamily,
    	String? fontPackage,
    	bool matchTextDirection = false,
    	List<String>? fontFamilyFallback
    	}
    )
    

IgnorePointer —— 忽略指向事件

不接收事件,但子組件可以接收。

  • 繼承
    Object > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > IgnorePointer
  • 構造函數
    IgnorePointer({
    	Key? key,
    	bool ignoring = true,
    	@Deprecated(
    		'Use ExcludeSemantics or create a custom ignore pointer widget instead. '
    		'This feature was deprecated after v3.8.0-12.0.pre.'
    	)
    	bool? ignoringSemantics, Widget? child
    })
    

InheritedWidget —— 共享數據繼承組件

  • 繼承
    Object > DiagnosticableTree > Widget > ProxyWidget > InheritedWidget
  • 構造函數
    InheritedWidget({Key? key, required Widget child})
    
  • 方法
    • updateShouldNotify(covariant InheritedWidget oldWidget) → bool:通知子組件共享數據是否發生改變。如返回true,子組件中的didChangeDependencies方法會被調用。

Image —— 圖片

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > Image

  • 構造函數

    Image({
    	Key? key,
    	required ImageProvider\<Object> image,
    	ImageFrameBuilder? frameBuilder,
    	ImageLoadingBuilder? loadingBuilder,
    	ImageErrorWidgetBuilder? errorBuilder,
    	String? semanticLabel,
    	bool excludeFromSemantics = false,
    	double? width,
    	double? height,
    	Color? color,
    	Animation<double>? opacity,
    	BlendMode? colorBlendMode,
    	BoxFit? fit,
    	AlignmentGeometry alignment = Alignment.center,
    	ImageRepeat repeat = ImageRepeat.noRepeat,
    	Rect? centerSlice,
    	bool matchTextDirection = false,
    	bool gaplessPlayback = false,
    	bool isAntiAlias = false,
    	FilterQuality filterQuality = FilterQuality.medium
    })
    

    從資源文件夾(於pubspec.yaml中的flutter.assets配置)加載圖片:

    Image.asset(
    	String name,
    	{
    	Key? key,
    	AssetBundle? bundle,
    	ImageFrameBuilder? frameBuilder,
    	ImageErrorWidgetBuilder? errorBuilder,
    	String? semanticLabel,
    	bool excludeFromSemantics = false,
    	double? scale,
    	double? width,
    	double? height,
    	Color? color,
    	Animation<double>? opacity,
    	BlendMode? colorBlendMode,
    	BoxFit? fit,
    	AlignmentGeometry alignment = Alignment.center,
    	ImageRepeat repeat = ImageRepeat.noRepeat,
    	Rect? centerSlice,
    	bool matchTextDirection = false,
    	bool gaplessPlayback = false,
    	bool isAntiAlias = false,
    	String? package,
    	FilterQuality filterQuality = FilterQuality.medium,
    	int? cacheWidth,
    	int? cacheHeight
    })
    

    從文件加載圖片:

    Image.file(
    	File file,
    	{
    	Key? key,
    	double scale = 1.0,
    	ImageFrameBuilder? frameBuilder,
    	ImageErrorWidgetBuilder? errorBuilder,
    	String? semanticLabel,
    	bool excludeFromSemantics = false,
    	double? width,
    	double? height,
    	Color? color,
    	Animation<double>? opacity,
    	BlendMode? colorBlendMode,
    	BoxFit? fit,
    	AlignmentGeometry alignment = Alignment.center,
    	ImageRepeat repeat = ImageRepeat.noRepeat,
    	Rect? centerSlice,
    	bool matchTextDirection = false,
    	bool gaplessPlayback = false,
    	bool isAntiAlias = false,
    	FilterQuality filterQuality = FilterQuality.medium,
    	int? cacheWidth,
    	int? cacheHeight
    })
    

    從網絡加載圖片:

    Image.network(
    	String src,
    	{
    	Key? key,
    	double scale = 1.0,
    	ImageFrameBuilder? frameBuilder,
    	ImageLoadingBuilder? loadingBuilder,
    	ImageErrorWidgetBuilder? errorBuilder,
    	String? semanticLabel,
    	bool excludeFromSemantics = false,
    	double? width,
    	double? height,
    	Color? color,
    	Animation<double>? opacity,
    	BlendMode? colorBlendMode,
    	BoxFit? fit,
    	AlignmentGeometry alignment = Alignment.center,
    	ImageRepeat repeat = ImageRepeat.noRepeat,
    	Rect? centerSlice,
    	bool matchTextDirection = false,
    	bool gaplessPlayback = false,
    	FilterQuality filterQuality = FilterQuality.medium,
    	bool isAntiAlias = false,
    	Map<String, String>? headers,
    	int? cacheWidth,
    	int? cacheHeight
    	}
    )
    
  • 屬性

    • height → double?:高度,單位為像素。
    • repeat → ImageRepeat:圖片重複方式。
    • width → double?:寬度,單位為像素。

LeafRenderObjectElement —— 無子組件組件的元素

LeafRenderObjectWidget —— 無子組件組件

Listener —— 事件監聽器

  • 繼承
    Object > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > Listener
  • 構造函數
    Listener({
    	Key? key,
    	PointerDownEventListener? onPointerDown,
    	PointerMoveEventListener? onPointerMove,
    	PointerUpEventListener? onPointerUp,
    	PointerHoverEventListener? onPointerHover,
    	PointerCancelEventListener? onPointerCancel,
    	PointerPanZoomStartEventListener? onPointerPanZoomStart,
    	PointerPanZoomUpdateEventListener? onPointerPanZoomUpdate,
    	PointerPanZoomEndEventListener? onPointerPanZoomEnd,
    	PointerSignalEventListener? onPointerSignal,
    	HitTestBehavior behavior = HitTestBehavior.deferToChild,
    	Widget? child
    })
    
  • 屬性
    • behavior → HitTestBehavior:當多個組件重疊時的行為。

ListView —— 滾動列表視圖

  • 繼承
    Object > DiagnosticableTree > Widget > StatelessWidget > ScrollView > BoxScrollView > ListView

  • 構造函數

    在有足夠簡單的子組件的情況下使用:

    ListView({
    	Key? key,
    	Axis scrollDirection = Axis.vertical,
    	bool reverse = false,
    	ScrollController? controller,
    	bool? primary,
    	ScrollPhysics? physics,
    	bool shrinkWrap = false,
    	EdgeInsetsGeometry? padding,
    	double? itemExtent,
    	ItemExtentBuilder? itemExtentBuilder,
    	Widget? prototypeItem,
    	bool addAutomaticKeepAlives = true,
    	bool addRepaintBoundaries = true,
    	bool addSemanticIndexes = true,
    	double? cacheExtent,
    	List<Widget> children = const <Widget>[],
    	int? semanticChildCount,
    	DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    	ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
    	String? restorationId,
    	Clip clipBehavior = Clip.hardEdge,
    	HitTestBehavior hitTestBehavior = HitTestBehavior.opaque
    })
    
    • addAutomaticKeepAlives:是否將每個元素包裹在AutomaticKeepAlive中,令子組件超出屏幕時不會被垃圾回收。默認為true。
    • addRepaintBoundaries:是否將每個元素包裹在RepaintBoundary中,令元素在第一次顯示時被記住,即使滾出屏幕後再顯示也無需重新繪製。

    內部使用IndexedWidgetBuilder,子組件僅在顯示時才會被創建,即懶加載,適合在子組件較多的情況下使用:

    ListView.builder({
    	Key? key,
    	Axis scrollDirection = Axis.vertical,
    	bool reverse = false,
    	ScrollController? controller,
    	bool? primary,
    	ScrollPhysics? physics,
    	bool shrinkWrap = false,
    	EdgeInsetsGeometry? padding,
    	double? itemExtent,
    	ItemExtentBuilder? itemExtentBuilder,
    	Widget? prototypeItem,
    	required NullableIndexedWidgetBuilder itemBuilder,
    	ChildIndexGetter? findChildIndexCallback,
    	int? itemCount,
    	bool addAutomaticKeepAlives = true,
    	bool addRepaintBoundaries = true,
    	bool addSemanticIndexes = true,
    	double? cacheExtent,
    	int? semanticChildCount,
    	DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    	ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
    	String? restorationId,
    	Clip clipBehavior = Clip.hardEdge,
    	HitTestBehavior hitTestBehavior = HitTestBehavior.opaque
    })
    
    • itemCount:元素數量。null為無限。
    • itemBuilder:元素創建器。

    增加元素間的分隔線:

    ListView.separated({
    	Key? key,
    	Axis scrollDirection = Axis.vertical,
    	bool reverse = false,
    	ScrollController? controller,
    	bool? primary,
    	ScrollPhysics? physics,
    	bool shrinkWrap = false,
    	EdgeInsetsGeometry? padding,
    	required NullableIndexedWidgetBuilder itemBuilder,
    	ChildIndexGetter? findChildIndexCallback,
    	required IndexedWidgetBuilder separatorBuilder,
    	required int itemCount,
    	bool addAutomaticKeepAlives = true,
    	bool addRepaintBoundaries = true,
    	bool addSemanticIndexes = true,
    	double? cacheExtent,
    	DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    	ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
    	String? restorationId,
    	Clip clipBehavior = Clip.hardEdge,
    	HitTestBehavior hitTestBehavior = HitTestBehavior.opaque
    })
    
    • separatorBuilder:分隔線創建器。

    使用SliverChildDelegate提供自定義子組件的額外屬性:

    ListView.custom({
    	Key? key,
    	Axis scrollDirection = Axis.vertical,
    	bool reverse = false,
    	ScrollController? controller,
    	bool? primary,
    	ScrollPhysics? physics,
    	bool shrinkWrap = false,
    	EdgeInsetsGeometry? padding,
    	double? itemExtent,
    	Widget? prototypeItem,
    	ItemExtentBuilder? itemExtentBuilder,
    	required SliverChildDelegate childrenDelegate,
    	double? cacheExtent,
    	int? semanticChildCount,
    	DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    	ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
    	String? restorationId,
    	Clip clipBehavior = Clip.hardEdge,
    	HitTestBehavior hitTestBehavior = HitTestBehavior.opaque
    })
    
  • 屬性

    • cacheExtent → double?:超出屏幕的子組件的預載數量。
    • childrenDelegate → SliverChildDelegate:用於創建子組件列表的代理。
    • controller → ScrollController?:滾動控制器。
    • itemExtent → double?:列表元素的大小。對垂直滾動的列表為元素高度,對水平滾動的列表為元素寬度。為了優化性能,通常會指定該值,而不是讓框架自己計算。
    • shrinkWrap → bool:是否根據所有子組件的長度來計算自身長度。默認為false。通常ListView應沿滾動方向佔用儘可能多的空間,僅當其處於一個相同滾動方向且無邊界的父組件中並用於處理某些滾動衝突時,設置為true。

Localizations —— 多語言本地化

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > Localizations
  • 構造函數
    Localizations({
    	Key? key,
    	required Locale locale,
    	required List<LocalizationsDelegate> delegates,
    	Widget? child
    })
    
  • 靜態方法
    • localeOf(BuildContext context) → Locale:獲取上下文中的語系區域。
    • of<T>(BuildContext context, Type type) → T?:獲取上下文中的多語言本地化數據源。

LocalizationsDelegate<T> —— 多語言本地化代理

  • 方法
    • isSupported(Locale locale) → bool:是否支持指定的語系區域。
    • load(Locale locale) → Future<T>:當語系區域改變時被調用,加載對應的數據。
    • shouldReload(covariant LocalizationsDelegate<T> old) → bool:當組件的build方法被調用時,是否重新加載語系資源。通常為false。

MultiChildRenderObjectWidget —— 多子組件組件

  • 屬性
    • children → List<Widget>:子組件列表。

MultiChildRenderObjectElement —— 多子組件組件的元素

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > Navigator
  • 構造函數
    Navigator({
    	Key? key,
    	List<Page> pages = const <Page<dynamic>>[],
    	@Deprecated(
    		'Use onDidRemovePage instead. '
    		'This feature was deprecated after v3.16.0-17.0.pre.'
    	)
    	PopPageCallback? onPopPage,
    	String? initialRoute,
    	RouteListFactory onGenerateInitialRoutes = Navigator.defaultGenerateInitialRoutes,
    	RouteFactory? onGenerateRoute,
    	RouteFactory? onUnknownRoute,
    	TransitionDelegate transitionDelegate = const DefaultTransitionDelegate<dynamic>(),
    	bool reportsRouteUpdateToEngine = false,
    	Clip clipBehavior = Clip.hardEdge,
    	List<NavigatorObserver> observers = const <NavigatorObserver>[],
    	bool requestFocus = true,
    	String? restorationScopeId,
    	TraversalEdgeBehavior routeTraversalEdgeBehavior = kDefaultRouteTraversalEdgeBehavior,
    	DidRemovePageCallback? onDidRemovePage
    })
    
  • 靜態方法
    • pop<T extends Object?>(BuildContext context, [T? result]) → void:退出當前頁面,返回上一個頁面。
    • push<T extends Object?>(BuildContext context, Route<T> route) → Future<T?>:跳轉動態定義的頁面。
    • pushNamed<T extends Object?>(BuildContext context, String routeName, {Object? arguments}) → Future<T?>:跳轉靜態定義的頁面。

Notification —— 通知

  • 方法
    • dispatch(BuildContext? target) → void:分發通知。

NotificationListener<T extends Notification> —— 通知監聽器

通知會逐層上報。

  • 繼承
    Object > DiagnosticableTree > Widget > ProxyWidget > NotificationListener
  • 構造函數
    NotificationListener({
    	Key? key,
    	required Widget child,
    	NotificationListenerCallback<T>? onNotification
    })
    
  • 屬性
    • onNotification → NotificationListenerCallback<T>?:通知回調。

Padding —— 內邊距

  • 繼承
    Object > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > Padding
  • 構造函數
    Padding({
    	Key? key,
    	required EdgeInsetsGeometry padding,
    	Widget? child
    })
    
  • 屬性
    • child → Widget?:子組件。
    • padding → EdgeInsetsGeometry:邊距。

PerformanceOverlay —— 性能圖表

顯示GPU和CPU的性能圖表。二者的理想狀態是每秒60幀,即約16毫秒刷新一幀。

  • 繼承
    Object > DiagnosticableTree > Widget > RenderObjectWidget > LeafRenderObjectWidget > PerformanceOverlay
  • 構造函數
    PerformanceOverlay.allEnabled({Key? key})
    

Positioned —— 定位

  • 繼承
    Object > DiagnosticableTree > Widget > ProxyWidget > ParentDataWidget<StackParentData> > Positioned
  • 構造函數
    Positioned({
    	Key? key,
    	double? left,
    	double? top,
    	double? right,
    	double? bottom,
    	double? width,
    	double? height,
    	required Widget child
    })
    
    leftrightwidth只可使用其二;topbottomheight只可使用其二。
  • 屬性
    • bottom → double?:距離父組件的底部距離。
    • height → double?:子組件的高度。
    • left → double?:距離父組件的左側距離。
    • right → double?:距離父組件的右側距離。
    • top → double?:距離父組件的頂部距離。
    • width → double?:子組件的寬度。

Route<T> —— 路由

  • 構造函數
    Route({RouteSettings? settings})
    

Row —— 行佈局/水平佈局

  • 繼承
    Object > DiagnosticableTree > Widget > RenderObjectWidget > MultiChildRenderObjectWidget > Flex > Row
  • 構造函數
    Row({
    	Key? key,
    	MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    	MainAxisSize mainAxisSize = MainAxisSize.max,
    	CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    	TextDirection? textDirection,
    	VerticalDirection verticalDirection = VerticalDirection.down,
    	TextBaseline? textBaseline,
    	List<Widget> children = const <Widget>[]
    })
    
  • 屬性
    • children → List<Widget>:子組件列表。
    • crossAxisAlignment → CrossAxisAlignment:交叉軸對齊方式。
    • mainAxisAlignment → MainAxisAlignment:主軸對齊方式。當mainAxisSizeMainAxisSize.min時,本屬性不起作用,因為空間已被佔滿。
    • mainAxisSize → MainAxisSize:主軸所佔空間大小。默認為MainAxisSize.max。
    • textDirection → TextDirection?:子組件的水平排布方向。默認跟隨系統,大多為TextDirection.ltr
    • verticalDirection → VerticalDirection:子組件的垂直排布方向。默認為VerticalDirection.down

ScrollController —— 滾動控制器

  • 繼承
    Object > ChangeNotifier > ScrollController
  • 構造函數
    ScrollController({
    	double initialScrollOffset = 0.0,
    	bool keepScrollOffset = true,
    	String? debugLabel,
    	ScrollControllerCallback? onAttach,
    	ScrollControllerCallback? onDetach
    })
    
  • 方法
    • addListener(VoidCallback listener) → void:添加事件監聽器。
    • animateTo(double offset, {required Duration duration, required Curve curve}) → Future<void>:使用動畫滾動。
    • jumpTo(double value) → void:不適用動畫滾動。

SingleChildRenderObjectWidget —— 單子組件組件

  • 繼承
    Object > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget
  • 屬性
    • child → Widget?:子組件。

SingleChildRenderObjectElement —— 單子組件組件的元素

SingleChildScrollView —— 單個子組件的滾動視圖

  • 繼承
    Object > DiagnosticableTree > Widget > StatelessWidget > SingleChildScrollView
  • 構造函數
    SingleChildScrollView({
    	Key? key,
    	Axis scrollDirection = Axis.vertical,
    	bool reverse = false,
    	EdgeInsetsGeometry? padding,
    	bool? primary,
    	ScrollPhysics? physics,
    	ScrollController? controller,
    	Widget? child,
    	DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    	Clip clipBehavior = Clip.hardEdge,
    	HitTestBehavior hitTestBehavior = HitTestBehavior.opaque,
    	String? restorationId,
    	ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual
    })
    
  • 屬性
    • child → Widget?:子組件。
    • controller → ScrollController?:滾動控制器。
    • padding → EdgeInsetsGeometry?:外邊距。
    • physics → ScrollPhysics?:滾動到盡頭後繼續滾動的物理效果。
    • primary → bool?:是否是主滑塊。通常在嵌套其它滾動組件時使用。默認為true。
    • reverse → bool:是否反向滾動。默認為false。
    • scrollDirection → Axis:滾動的方向。

SizedBox —— 尺寸盒

  • 繼承
    Object > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > SizedBox
  • 構造函數
    SizedBox({
    	Key? key,
    	double? width,
    	double? height,
    	Widget? child
    })
    

SliverChildBuilderDelegate —— Sliver家族的子組件創建器代理

  • 繼承
    Object > SliverChildDelegate > SliverChildBuilderDelegate
  • 構造函數
    SliverChildBuilderDelegate(
    	NullableIndexedWidgetBuilder builder,
    	{
    	ChildIndexGetter? findChildIndexCallback,
    	int? childCount,
    	bool addAutomaticKeepAlives = true,
    	bool addRepaintBoundaries = true,
    	bool addSemanticIndexes = true,
    	SemanticIndexCallback semanticIndexCallback = _kDefaultSemanticIndexCallback,
    	int semanticIndexOffset = 0
    })
    
  • 方法
    • didFinishLayout(int firstIndex, int lastIndex) → void:再繪製完組件時被調用。

SliverFixedExtentList —— Sliver家族的固定尺寸列表

  • 繼承
    Object > DiagnosticableTree > Widget > RenderObjectWidget > SliverWithKeepAliveWidget > SliverMultiBoxAdaptorWidget > SliverFixedExtentList
  • 構造函數
    SliverFixedExtentList({
    	Key? key,
    	required SliverChildDelegate delegate,
    	required double itemExtent
    })
    

SliverGrid —— Sliver家族的網格

  • 繼承
    Object > DiagnosticableTree > Widget > RenderObjectWidget > SliverWithKeepAliveWidget > SliverMultiBoxAdaptorWidget > SliverGrid
  • 構造函數
    SliverGrid({
    	Key? key,
    	required SliverChildDelegate delegate,
    	required SliverGridDelegate gridDelegate
    })
    

Stack —— 棧佈局/堆疊佈局

  • 繼承
    Object > DiagnosticableTree > Widget > RenderObjectWidget > MultiChildRenderObjectWidget > Stack
  • 構造函數
    Stack({
    	Key? key,
    	AlignmentGeometry alignment = AlignmentDirectional.topStart,
    	TextDirection? textDirection,
    	StackFit fit = StackFit.loose,
    	Clip clipBehavior = Clip.hardEdge,
    	List<Widget> children = const <Widget>[]
    })
    
  • 屬性
    • alignment → AlignmentGeometry:對齊。只對沒有使用Positioned包裹的子組件或已使用Positioned包裹但沒有充足定位信息的子組件使用。
    • children → List<Widget>:子組件列表。
    • fit → StackFit:對沒有定位信息的子組件的尺寸適應方式。
    • textDirection → TextDirection?:子組件的水平排布方向。默認跟隨系統,大多為TextDirection.ltr

State<T extends StatefulWidget> —— 狀態

  • 構造函數
    State()
    
  • 方法
    • build(BuildContext context) → Widget:構建組件。會在一些其它方法(如:setState)後被自動調用。
    • deactivate() → void:從組件樹中移除時被調用。
    • didChangeDependencies() → void:依賴變更時被調用。
    • didUpdateWidget(covariant T oldWidget) → void:重新構建組件時被調用。
    • dispose() → void:從組件樹中永久銷燬時被調用。
    • initState() → void:添加至組件樹中時被調用。
    • reassemble() → void:熱重載時被調用。
    • setState(VoidCallback fn) → void:設置狀態。
  • 屬性
    • widget → T

StatefulElement —— 有狀態元素

  • 繼承
    Object > DiagnosticableTree > Element > ComponentElement > StatefulElement
  • 構造函數
    StatefulElement(StatefulWidget widget)
    

StatefulWidget —— 有狀態組件

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget
  • 構造函數
    StatefulWidget({Key? key})
    
  • 方法
    • createElement() → StatefulElement:創建元素。
    • createState() → State<StatefulWidget>:創建狀態。

StatelessElement —— 無狀態元素

  • 繼承
    Object > DiagnosticableTree > Element > ComponentElement > StatelessElement
  • 構造函數
    StatelessElement(StatelessWidget widget)
    

StatelessWidget —— 無狀態組件

  • 繼承
    Object > DiagnosticableTree > Widget > StatelessWidget
  • 構造函數
    StatelessWidget({Key? key})
    
  • 方法
    • createElement() → StatelessElement:創建元素。
    • build() → Widget:構建組件。

Text —— 文本

  • 繼承
    Object > DiagnosticableTree > Widget > StatelessWidget > Text

  • 構造函數

    Text(
    	String data, 
    	{
    	Key? key,
    	TextStyle? style,
    	StrutStyle? strutStyle,
    	TextAlign? textAlign,
    	TextDirection? textDirection,
    	Locale? locale,
    	bool? softWrap,
    	TextOverflow? overflow,
    	@Deprecated(
    		'Use textScaler instead. '
    		'Use of textScaleFactor was deprecated in preparation for the upcoming nonlinear text scaling support. '
    		'This feature was deprecated after v3.12.0-2.0.pre.'
    	)
    	double? textScaleFactor,
    	TextScaler? textScaler,
    	int? maxLines,
    	String? semanticsLabel,
    	TextWidthBasis? textWidthBasis,
    	TextHeightBehavior? textHeightBehavior,
    	Color? selectionColor
    	}
    )
    
    Text.rich(
    	InlineSpan textSpan,
    	{
    	Key? key,
    	TextStyle? style,
    	StrutStyle? strutStyle,
    	TextAlign? textAlign,
    	TextDirection? textDirection,
    	Locale? locale,
    	bool? softWrap,
    	TextOverflow? overflow,
    	@Deprecated(
    		'Use textScaler instead. '
    		'Use of textScaleFactor was deprecated in preparation for the upcoming nonlinear text scaling support. '
    		'This feature was deprecated after v3.12.0-2.0.pre.'
    	)
    	double? textScaleFactor,
    	TextScaler? textScaler,
    	int? maxLines,
    	String? semanticsLabel,
    	TextWidthBasis? textWidthBasis,
    	TextHeightBehavior? textHeightBehavior,
    	Color? selectionColor
    	}
    )
    
  • 屬性

    • maxLines → int?:顯示的最大行數。默認位自動換行。通常和overflow結合使用。
    • overflow → TextOverflow?:文本超出顯示範圍時的省略方式。
    • style → TextStyle?:文本樣式。
    • textAlign → TextAlign?:文本的對齊方式。

TextEditingController —— 文本編輯控制器

  • 繼承
    Object > ChangeNotifier > ValueNotifier<TextEditingValue> > TextEditingController
  • 構造函數
    TextEditingController({
    	String? text
    })
    
  • 屬性
    • text ↔ String:當前的文本內容。

Transform —— 變換

無論怎樣變換,組件的尺寸始終是未變換時的大小。

  • 繼承
    Object > DiagnosticableTree > Widget > RenderObjectWidget > SingleChildRenderObjectWidget > Transform

  • 構造函數

    矩陣變換:

    Transform({
    	Key? key,
    	required Matrix4 transform,
    	Offset? origin,
    	AlignmentGeometry? alignment,
    	bool transformHitTests = true,
    	FilterQuality? filterQuality,
    	Widget? child
    })
    

    旋轉變換:

    Transform.rotate({
    	Key? key,
    	required double angle,
    	Offset? origin,
    	AlignmentGeometry? alignment = Alignment.center,
    	bool transformHitTests = true,
    	FilterQuality? filterQuality,
    	Widget? child
    })
    

    縮放變換:

    Transform.scale({
    	Key? key,
    	double? scale,
    	double? scaleX,
    	double? scaleY,
    	Offset? origin,
    	AlignmentGeometry? alignment = Alignment.center,
    	bool transformHitTests = true,
    	FilterQuality? filterQuality,
    	Widget? child
    })
    

    平移變換:

    Transform.translate({
    	Key? key,
    	required Offset offset,
    	bool transformHitTests = true,
    	FilterQuality? filterQuality,
    	Widget? child
    })
    

Widget —— 組件

與交互有關的。

  • 構造函數
    Widget({Key? key})
    

WillPopScope —— 返回攔截

  • 繼承
    Object > DiagnosticableTree > Widget > StatefulWidget > WillPopScope
  • 構造函數
    WillPopScope({
    	Key? key,
    	required Widget child,
    	required WillPopCallback? onWillPop
    })
    
  • 屬性
    • child → Widget:彈出提示的組件。
    • onWillPop → WillPopCallback?:頁面返回時的回調。默認的回調返回Future.value(true),表示正常推出頁面。如回調返回Future.value(false)則不退出,停留在當前頁面。

Wrap —— 流式佈局

  • 繼承
    Object > DiagnosticableTree > Widget > RenderObjectWidget > MultiChildRenderObjectWidget > Wrap
  • 構造函數
    Wrap({
    	Key? key,
    	Axis direction = Axis.horizontal,
    	WrapAlignment alignment = WrapAlignment.start,
    	double spacing = 0.0,
    	WrapAlignment runAlignment = WrapAlignment.start,
    	double runSpacing = 0.0,
    	WrapCrossAlignment crossAxisAlignment = WrapCrossAlignment.start,
    	TextDirection? textDirection,
    	VerticalDirection verticalDirection = VerticalDirection.down,
    	Clip clipBehavior = Clip.none,
    	List<Widget> children = const <Widget>[]
    })
    
  • 屬性
    • alignment → WrapAlignment:主軸方向上子組件的對齊方式。
    • direction → Axis:子組件的排布方向。
    • runAlignment → WrapAlignment:交叉軸方向上子組件的對齊方式。
    • runSpacing → double:交叉軸方向上子組件之間的間距。
    • spacing → double:主軸方向上子組件之間的間距。

函數

debugDumpApp —— 轉儲組件層

需至少構建過一次組件,且不能在build方法執行過程中調用。

void debugDumpApp()

轉儲信息實際上是把所有組件按樹形結構羅列出來。如組件被標記為dirty,表示轉儲行為是通過該組件觸發的。

user avatar qngyun1029 頭像 shu_5b5b4cde7027a 頭像 ducafecat 頭像
點贊 3 用戶, 點贊了這篇動態!
點贊

Add a new 評論

Some HTML is okay.