程式設計師如果敲一會就停半天，抱著一杯茶，表情擰巴，那才是在程式設計

在Flutter3。3版本以上，支援Material3，使用Material3樣式首先是要配置啟用Material3。

Material3 主要體現在 圓角風格、顏色、文字樣式等方面。

（此處已新增書籍卡片，請到今日頭條客戶端檢視）

1 配置啟用 Material3

檢視當前 Flutter的版本

flutter ——version

在程式的入口 MaterialApp中設定主題ThemeData中的useMaterial3屬性為true。

///flutter應用程式中的入口函式void main（） => runApp（TextApp（））；///應用的根佈局class TextApp extends StatelessWidget { @override Widget build（BuildContext context） { ///構建Materia Desin 風格的應用程式 return MaterialApp（ title： “Material3”， ///在主題中啟用 theme： ThemeData（ brightness： Brightness。light， colorSchemeSeed： Colors。blue， //啟用 useMaterial3： true， ）， ///預設的首頁面 home： Material3Home（）， ）； }}

2 按鈕樣式的改變

按鈕預設的圓角大小改變

ElevatedButton、TextButton、OutlinedButton、FloatingActionButton

2。1 ElevatedButton

ElevatedButton（ onPressed： （）{}， child： const Text（“Elevated”）， ），

2。2 ElevatedButton 自定義樣式

ElevatedButton 可透過 style 來設定樣式，onPrimary 屬性來設定前景色，比如這裡的文字的顏色，primary 用來設定背景色，也就是這裡的ElevatedButton按鈕的填充顏色。

ElevatedButton（ style： ElevatedButton。styleFrom（ // 前景色 // ignore： deprecated_member_use onPrimary： Theme。of（context）。colorScheme。onPrimary， // 背景色 // ignore： deprecated_member_use primary： Theme。of（context）。colorScheme。primary， ）。copyWith（elevation： ButtonStyleButton。allOrNull（0。0））， onPressed： （）{}， child： const Text（‘Filled’）， ），

2。3 OutlinedButton

OutlinedButton（ onPressed： （）{}， child： const Text（“Outlined”）， ），

2。4 FloatingActionButton。small

FloatingActionButton。small（ onPressed： （） {}， child： const Icon（Icons。add）， ），

2。5 FloatingActionButton

FloatingActionButton（ onPressed： （） {}， child： const Icon（Icons。add）， ），

2。6 FloatingActionButton。extended

FloatingActionButton。extended（ onPressed： （） {}， icon： const Icon（Icons。add）， label： const Text（“Create”）， ），

2。7 FloatingActionButton。large

FloatingActionButton。large（ onPressed： （） {}， child： const Icon（Icons。add）， ），

3 AlertDialog 的邊框圓角改變

void openDialog（BuildContext context） { showDialog（ context： context， builder： （context） => AlertDialog（ title： const Text（“Basic Dialog Title”）， content： const Text（ “A dialog is a type of modal window that appears in front of app content to provide critical information， or prompt for a decision to be made。”）， actions： ［ TextButton（ child： const Text（‘Dismiss’）， onPressed： （） => Navigator。of（context）。pop（）， ）， TextButton（ child： const Text（‘Action’）， onPressed： （） => Navigator。of（context）。pop（）， ）， ］， ）， ）； }

4 主題文字樣式的預設大小改變

final textTheme = Theme。of（context） 。textTheme 。apply（displayColor： Theme。of（context）。colorScheme。onSurface）；TextStyle large =textTheme。displayLarge；TextStyle displayMedium =textTheme。displayMedium；TextStyle displaySmall =textTheme。displaySmall；。。。

5 ColorScheme 的變更

Widget buildMaterial（） { ///當前顏色主題 ColorScheme colorScheme = Theme。of（context）。colorScheme； //背景色 final Color color = colorScheme。surface； //陰影色 Color shadowColor = colorScheme。shadow； Color surfaceTint = colorScheme。primary； return Material（ borderRadius： BorderRadius。all（Radius。circular（4。0））， elevation： 4，//陰影 color： color，//背景色 shadowColor： shadowColor，//陰影色 surfaceTintColor： surfaceTint，// type： MaterialType。card， child： Padding（ padding： const EdgeInsets。all（38。0）， child： Column（ crossAxisAlignment： CrossAxisAlignment。start， children： ［ Text（ ‘測試1’， style： Theme。of（context）。textTheme。labelMedium， ）， Text（ ‘測試2’， style： Theme。of（context）。textTheme。labelMedium， ）， ］， ）， ）， ）； }

完畢