本頭條核心宗旨

歡迎來到「技術(shù)剛剛好」作者，「技術(shù)剛剛好」是個(gè)人維護(hù)，每天至少更新一篇Flutter技術(shù)文章，實(shí)時(shí)為大家播報(bào)Flutter最新消息。如果你剛好也在關(guān)注Flutter這門技術(shù)，那就跟我一起學(xué)習(xí)進(jìn)步吧，你的贊，收藏，轉(zhuǎn)發(fā)是對(duì)我個(gè)人最大的支持，維護(hù)不易，歡迎關(guān)注。

技術(shù)剛剛好經(jīng)歷

近幾年，移動(dòng)端跨平臺(tái)開發(fā)技術(shù)層出不窮，從Facebook家的ReactNative，到阿里家WEEX，前端技術(shù)在移動(dòng)端跨平臺(tái)開發(fā)中大展身手，技術(shù)剛剛好作為一名Android開發(fā)，經(jīng)歷了從Reactjs到Vuejs的不斷學(xué)習(xí)。而在2018年，我們的主角變成了Flutter，這是Goolge開源的一個(gè)移動(dòng)端跨平臺(tái)解決方案，可以快速開發(fā)精美的移動(dòng)App。希望跟大家一起學(xué)習(xí)，一起進(jìn)步！

本文核心要點(diǎn)

Theme Widget可以為Material APP 定義主題數(shù)據(jù)（ThemeData），Material組件庫里很多Widget都使用了主題數(shù)據(jù)，如導(dǎo)航欄顏色、標(biāo)題字體、Icon樣式等。Theme內(nèi)會(huì)使用InheritedWidget來為其子樹Widget共享樣式數(shù)據(jù)。

DEMO

main.dart文件解說

import 'package:flutter/material.dart';void main() {  runApp(MaterialApp(    debugShowCheckedModeBanner: false,    home: MyHome(),    // Set the theme's primary color, accent color,    //這段代碼是關(guān)鍵    theme: ThemeData(      primarySwatch: Colors.green,//設(shè)置顏色      accentColor: Colors.lightGreenAccent,//      // Set background color      backgroundColor: Colors.black12,    ),  ));}class MyHome extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      // AppBar      appBar: AppBar(        // AppBar Title        title: Text("Using Theme"),      ),      body: Container(        // Another way to set the background color        decoration: BoxDecoration(color: Colors.black87),        child: Center(          child: Container(            // use the theme accent color as background color for this widget            color: Theme.of(context).accentColor,            child: Text(              'Hello World!',              // Set text style as per theme              style: Theme.of(context).textTheme.title,            ),          ),        ),      ),      floatingActionButton: Theme(        // override the accent color of theme for this widget only        data: Theme.of(context).copyWith(          colorScheme:              Theme.of(context).colorScheme.copyWith(secondary: Colors.pinkAccent),        ),        child: FloatingActionButton(          onPressed: null,          child: Icon(Icons.add),        ),      ),    );  }}

primarySwatch

flutter的主題（build下面的theme）中有個(gè)主題顏色（primarySwatch）：

目前的主題顏色(primarySwatch)只有下面幾個(gè)值可以選擇，其他的暫不支持:

red,

pink,

purple,

deepPurple,

indigo,

blue,

lightBlue,

cyan,

teal,

green,

lightGreen,

lime,

yellow,

amber,

orange,

deepOrange,

brown,

blueGrey,

如果我要把主題色改成白色，或者黑色的話，用上面的就會(huì)報(bào)錯(cuò)啦，因?yàn)樵趐rimarySwatch中的顏色是調(diào)用 MaterialColor這種顏色類，內(nèi)部會(huì)有一個(gè)主色，一個(gè)map存儲(chǔ)固定的幾種主色周邊的顏色。

primaryColor：如果要把頂部導(dǎo)航欄和狀態(tài)欄的顏色修改成黑色或者白色，需要用到這個(gè)屬性：

謝謝觀看技術(shù)剛剛好的文章，技術(shù)剛剛好是個(gè)人維護(hù)，每天至少更新一篇Flutter技術(shù)文章，實(shí)時(shí)為大家播報(bào)Flutter最新消息。如果你剛好也在關(guān)注Flutter這門技術(shù)，那就跟我一起學(xué)習(xí)進(jìn)步吧，你的贊，收藏，轉(zhuǎn)發(fā)是對(duì)我個(gè)人最大的支持，維護(hù)不易，歡迎關(guān)注。

推薦閱讀：十大運(yùn)動(dòng)app推薦