Flutter中主題風格

2021-10-06 10:30:22 字數 1555 閱讀 6201

flutter中主題風格可通過theme主題, 那麼應用程式中的某些widget, 就會直接使用主題的樣式。

一、全域性theme

theme: themedata(

// 1.亮度

brightness: brightness.light,

// 2.primaryswatch傳入不是color, 而是materialcolor(包含了primarycolor和accentcolor)

primaryswatch: colors.red,

// 3.primarycolor: 單獨設定導航和tabbar的顏色

primarycolor: colors.orange,

// 4.accentcolor: 單獨設定floatingactionbutton\switch

accentcolor: colors.green,

// 5.button的主題

buttontheme: buttonthemedata(

height: 25,

minwidth: 10,

buttoncolor: colors.yellow

),// 6.card的主題

cardtheme: cardtheme(

color: colors.greenaccent,

elevation: 10

),// 7.text的主題

texttheme: texttheme(

body1: textstyle(fontsize: 16, color: colors.red),

body2: textstyle(fontsize: 20),

display1: textstyle(fontsize: 14),

display2: textstyle(fontsize: 16),

display3: textstyle(fontsize: 18),

display4: textstyle(fontsize: 20),

)),

假如此時我們另乙個介面不想用全域性配置的橘黃色,可能另乙個介面是紅色主題,此時正確的做法是在建立乙個themedata,通過theme.of(context).copywith(primarycolor: colors.purple)來設定主題色, 示例**如下:

class _onepagestate extends state

}

二、暗黑theme適配darttheme兩個引數來配合,**如下:

class _onepagestate extends state

}

以上就是關於theme

主題設定 flutter主題設定

theme元件可以為material全域性 區域性 假如我們要給floatingactionbutton設定主題樣式 直接寫個theme包裹floatingactionbutton元件 然後設定data,接收型別依然是themedata,裡面填寫我們的引數 如果沒有設定區域性主題則預設使用全域性主題...

關於Flutter主題色

provider 跨元件狀態共享 為flutter定義主題色提供了方法。了解主題色,首先需要知道flutter定義主題的方法 我們可以在main.dart 內使用 初始化路由 initialroute 定義路由 ongenerateroute ongenerateroute,測試書籤 debugsh...

MTK主題風格追蹤

剛接觸mtk的人也許會感覺到它的主題風格很神奇,感覺只要稍微的改一些東西就可以改變使其風格 迥異,控制風格的這些東西何去何從呢?雖然不知道路徑也不會影響任何的工作,可是知道還是好一 些,畢竟心裡亮堂一些。以前曾經查過它的路徑,可是當時感覺亂亂的,後來因為有事就放在一邊了 今天閒來無事,就找了一下,沒...