Material 元件小部件
Flutter 提供了各種視覺、行為和動效豐富的小部件,它們實現了 Material 3 設計規範。Material 3 是 Flutter 的預設設計語言,能幫助你設計和構建美觀、實用的應用程式,並可適應任何平臺。
要檢視這些及其他小部件的實際應用,請檢視 Material 3 演示 Web 應用程式。
動作
#
可點選的塊,用於啟動操作,例如傳送電子郵件、共享文件或點贊評論。

包含圖示的可點選塊,始終保持關鍵操作觸手可及。

可觸發動作的可點選塊。這些更寬的塊可以容納文字標籤並提供更大的目標區域。
可點選的圖示,用於提示應用使用者執行補充操作。

單個或多個可選擇的可點選塊,幫助人們選擇選項、切換檢視或排序元素。
通訊
#
類似圖示的塊,用於傳達動態內容,如計數或狀態。可包含標籤或數字。

隨著正在進行的過程(例如載入應用程式或提交表單)完成而改變顏色的垂直線。

關於應用程式程序的簡短訊息,顯示在螢幕底部。
容器
#
懸浮容器,提示應用程式使用者提供更多資料或做出決策。

將補充內容固定在螢幕底部的容器。

用於容納簡短相關內容的容器,以圓角和陰影框顯示。

用於在列表和容器中對內容進行分組的細線。

單行固定高度的列表項,通常包含一些文字以及開頭或結尾的圖示。
導航
#
在螢幕頂部顯示內容和操作的容器。

在螢幕底部顯示導航和關鍵操作的容器。

持久容器,可用於在應用程式中切換主要目的地。

從應用程式左側滑出,用於導航到應用程式其他部分的容器。

在平板電腦和桌面螢幕左側的持久容器,用於導航到應用程式的各個部分。

分層容器,用於在不同的螢幕、資料集和其他互動之間組織內容。
選擇
#
表單控制元件,應用程式使用者可以設定或清除以從一組選項中選擇一個或多個。

小塊,簡化資訊輸入、選擇、內容過濾或觸發操作。

日曆介面,用於選擇日期或日期範圍。

在臨時表面上顯示一系列選擇的容器。

表單控制元件,應用程式使用者可以設定或清除以從一組選項中僅選擇一個。

表單控制元件,用於選擇值範圍。

切換控制元件,將單個專案的狀態更改為開或關。

時鐘介面,用於選擇和設定特定時間。
文字輸入
#在Material 2 小部件目錄和小部件目錄的其他類別中查詢更多小部件。



