App主题色控制

  • Theme有两种：全局Theme和局部Theme。全局Theme是由应用程序根MaterialApp创建的Theme 。

  • Theme作用：可以设置Widget的主题，提高开发效率和速度，保持App主题统一性或某种一致性。

Theme

Theme组件可以为material APP定义主题数据(ThemeData)。Material组件库里很多组件都使用了主题数据， 如导航栏颜色、标题字体、Icon样式等。Theme内会使用InheritedWidget来为其子树共享样式数据。

设置主题栗子

全局：
/// 全局主题在MaterialApp的theme属性
/// 全局生效
new MaterialApp(
  title: 'demo',
  theme: new ThemeData( // 这里就是参数
    brightness: Brightness.dark,
    primaryColor: Colors.lightBlue[800],
    accentColor: Colors.cyan[600],
  ),
);
局部：
/// 假如我们要给FloatingActionButton设置主题样式
/// 直接写个Theme包裹FloatingActionButton组件
/// 然后设置data，接收类型依然是ThemeData，里面填写我们的参数
/// (如果没有设置局部主题则默认使用全局主题)
new Theme(
  data: new ThemeData(
    accentColor: Colors.yellow,
  ),
  child: new FloatingActionButton(
    onPressed: () {},
    child: new Icon(Icons.add),
  ),
);
扩展父主题：
/// 扩展父主题时无需覆盖所有的主题属性，可以通过使用copyWith方法来实现
new Theme(
  data: Theme.of(context).copyWith(accentColor: Colors.yellow),
  child: new FloatingActionButton(
    onPressed: null,
    child: new Icon(Icons.add),
  ),
);

Theme.of(context)将查找Widget树并返回树中最近的Theme。如果Widget之上有一个单独的Theme定义， 则返回该值。如果不是，则返回App主题。

判断平台显示指定主题：
/// defaultTargetPlatform在foundation包里。
/// /// 我们也可以使用io包里的Platform来进行判断。
/// 那么判断就是
/// theme: Platform.isIOS ? iOSTheme : AndroidTheme,
new MaterialApp(
  theme: defaultTargetPlatform == TargetPlatform.iOS
      ? iOSTheme
      : AndroidTheme,
  title: 'Flutter Theme',
  home: new MyHomePage(),
);
Tips:

Flutter的Color中大多数颜色从100到900，增量为100，加上颜色50，数字越小颜色越浅， 数字越大颜色越深。强调色调只有100、200、400和700。

栗子：

42af1fd77629333d7996d78965bcb796.png

推荐站点(Material design)：

https://material.io/resources/color,

为你的UI创建共享调色板，并衡量任何颜色组合的可观性【非常实用的工具】。

ThemeData(Color类型属性)：

  • accentColor - 前景色(文本、按钮等)
  • backgroundColor - 与primaryColor对比的颜色(例如 用作进度条的剩余部分)。
  • bottomAppBarColor - BottomAppBar的默认颜色。
  • buttonColor - Material中RaisedButtons使用的默认填充色。
  • canvasColor - MaterialType.canvas Material的默认颜色。
  • cardColor - Material被用作Card时的颜色。
  • dialogBackgroundColor - Dialog元素的背景色。
  • disabledColor - 用于Widget无效的颜色，无论任何状态。例如禁用复选框。
  • dividerColor - Dividers和PopupMenuDividers的颜色，也用于ListTiles中间，和DataTables的每行中间.
  • errorColor - 用于输入验证错误的颜色，例如在TextField中。
  • highlightColor - 用于类似墨水喷溅动画或指示菜单被选中的高亮颜色。
  • hintColor - 用于提示文本或占位符文本的颜色，例如在TextField中。
  • indicatorColor - TabBar中选项选中的指示器颜色。
  • primaryColor - App主要部分的背景色(ToolBar,TabBar等)。
  • primaryColorDark - primaryColor的较暗版本。
  • primaryColorLight - primaryColor的较亮版本。
  • scaffoldBackgroundColor - 作为Scaffold基础的Material默认颜色，典型Material应用或应用内页面的背景颜色。
  • secondaryHeaderColor - 有选定行时PaginatedDataTable标题的颜色。
  • selectedRowColor - 选中行时的高亮颜色。
  • splashColor - 墨水喷溅的颜色。
  • textSelectionColor - 文本字段中选中文本的颜色，例如TextField。
  • textSelectionHandleColor - 用于调整当前文本的哪个部分的句柄颜色。
  • toggleableActiveColor - 用于突出显示切换Widget(如Switch，Radio和Checkbox)的活动状态的颜色。
  • unselectedWidgetColor - 用于Widget处于非活动(但已启用)状态的颜色。例如，未选中的复选框。通常与accentColor形成对比。
  • focusColor - 焦点获取时的颜色，例如，一些按钮焦点、输入框焦点。
  • hoverColor - 点击之后徘徊中的颜色，例如，按钮长按，按住之后的颜色。
  • cursorColor - 输入框光标颜色。

ThemeData(Theme相关类型属性)：

  • accentIconTheme - IconThemeData类型，与突出颜色对照的图片主题。
  • accentTextTheme - TextTheme类型，与突出颜色对照的文本主题。
  • chipTheme - ChipThemeData类型，用于渲染Chip的颜色和样式。
  • buttonTheme - ButtonThemeData类型，定义了按钮等控件的默认配置，像RaisedButton和FlatButton。
  • primaryIconTheme - IconThemeData类型，一个与主色对比的图片主题。
  • primaryTextTheme - TextThemeData类型，一个与主色对比的文本主题。
  • iconTheme - IconThemeData类型，与卡片和画布颜色形成对比的图标主题。
  • inputDecorationTheme - InputDecorationTheme类型，InputDecorator，TextField和TextFormField的默认InputDecoration值基于此主题。
  • sliderTheme - SliderThemeData类型，用于渲染Slider的颜色和形状。
  • textTheme - TextTheme类型，与卡片和画布对比的文本颜色。
  • toggleButtonsTheme - ToggleButtonsThemeData类型，Flutter 1.9 全新组件 ToggleButtons 的主题。
  • tabBarTheme - TabBarTheme类型，TabBar的主题样式。
  • tooltipTheme - TooltipThemeData类型，tooltip提示的主题样式。
  • cardTheme - CardTheme类型，卡片的主题样式。
  • pageTransitionsTheme - PageTransitionsTheme类型，页面转场主题样式。
  • appBarTheme - AppBarTheme类型，AppBar主题样式。
  • bottomAppBarTheme - BottomAppBarTheme类型，底部导航主题样式。
  • dialogTheme - DialogTheme类型，对话框主题样式。
  • floatingActionButtonTheme - FloatingActionButtonThemeData类型，FloatingActionButton的主题样式，也就是Scaffold属性的那个。
  • cupertinoOverrideTheme - CupertinoThemeData类型，cupertino覆盖的主题样式。
  • snackBarTheme - SnackBarThemeData类型，弹出的snackBar的主题样式。
  • bottomSheetTheme - BottomSheetThemeData类型，底部滑出对话框的主题样式。
  • popupMenuTheme - PopupMenuThemeData类型，弹出菜单对话框的主题样式。
  • bannerTheme - MaterialBannerThemeData类型，Material材质的Banner主题样式。
  • dividerTheme - DividerThemeData类型，Divider组件的主题样式，也就是那个横向线条组件。

ThemeData(其他类型属性)：

  • accentColorBrightness - Brightness类型，accentColor的亮度。用于确定放置在突出颜色顶部的文本和图标的颜色(例如FloatingButton上的图标)。
  • brightness - Brightness类型，应用程序整体主题的亮度。由按钮等Widget使用，以确定在不使用主色或强调色时要选择的颜色。
  • platform - TargetPlatform类型，Widget需要适配的目标类型。
  • splashFactory - InteractiveInkFeatureFactory类型，定义InkWall和InkResponse生成的墨水喷溅的外观。
  • primaryColorBrightness - Brightness类型，primaryColor的亮度。
  • fontFamily - String类型，字体样式。
  • applyElevationOverlayColor bool类型，是否应用elevation覆盖颜色。
  • materialTapTargetSize - MaterialTapTargetSize类型，Chip等组件的尺寸主题设置，如：设置为MaterialTapTargetSize.shrinkWrap时，clip距顶部距离为0；设置为MaterialTapTargetSize.padded时距顶部有一个距离
  • colorScheme - ColorScheme类型，scheme组颜色，一组13种颜色，可用于配置大多数组件的颜色属性。
  • typography - Typography类型,用于配置TextTheme、primaryTextTheme和accentTextTheme的颜色和几何文本主题值。

适配夜间模式

实现效果：

da0494ddea883e825e05d9e2bafa4eae.gif

分析：

这次是使用局部的实现，哪个页面需要同步就加个Theme就行了，全局也是类似的实现方式，主体代码不到100行。

代码：

首先写个配置类，主要配置主题的是否为黑夜模式和主题样式：

class Config {
  static bool dark = true; // 是否为黑夜模式
  static ThemeData themeData = new ThemeData.dark(); // 主题为暗色
}

然后我们正常的执行代码：

import 'package:flutter/material.dart';
import 'global_config.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(title: "Flutter高级进阶", home: new MyScaffold());
  }
}

class MyScaffold extends StatefulWidget {
  @override
  _MyScaffoldState createState() => _MyScaffoldState();
}

class _MyScaffoldState extends State<MyScaffold> {
  /*
  * 主题改变
  * */
  changeTheme() {
    if (Config.dark) {
      Config.themeData = new ThemeData(
        primaryColor: Colors.white,
        scaffoldBackgroundColor: new Color(0xFFEBEBEB),
      );
      Config.dark = false;
    } else {
      Config.themeData = new ThemeData.dark();
      Config.dark = true;
    }
    setState(() {});
  }

  Widget body(context) {
    return new ListView(
      children: [new Container(
          width: MediaQuery.of(context).size.width / 4, // 整宽除4
          child: new GestureDetector(
            onTap: () => changeTheme(), // 触发更换主题的事件
            child: new Column(
              children: [new FlutterLogo(
                  size: 150.0,
                  style: FlutterLogoStyle.horizontal,
                  duration: Duration(milliseconds: 100),
                  textColor: Theme.of(context).colorScheme.background, // 从上下文拿到背景
                ),new Text( // 如果为黑夜模式则按钮文字为白天模式，否则文字显示为黑夜模式'点击Logo更换${Config.dark ? "白天模式" : "黑夜模式"}',
                  style: new TextStyle(fontSize: 25.0),
                ),
              ],
            ),
          ),
        ),new MaterialButton( // 跳转按钮
          onPressed: () {
            Navigator.of(context).push(new MaterialPageRoute(
                builder: (context) => new NewPage('Flutter高级进阶页面二')));
          },
          child: new Text('跳转到新页面'),
        ),
      ],
    );
  }@override
  Widget build(BuildContext context) {return new Theme( // 主题组件，可设置局部的主题样式
      data: Config.themeData, // 设置为配置的主题数据
      child: new Scaffold(
        appBar: new AppBar(elevation: 0),
        body: body(context), // 身体页面body
      ),
    );
  }
}

再把NewPage测试页面写上：

class NewPage extends StatefulWidget {
  final String title; // 接收的标题

  NewPage(this.title);

  @override
  _NewPageState createState() => new _NewPageState(); // 创建有状态页面
}

class _NewPageState extends State<NewPage> {
  @override
  Widget build(BuildContext context) {
    return new Theme(
      child: new Scaffold( // title就是我们的标题
        appBar: new AppBar(title: new Text('页面：${widget.title}'), elevation: 0),
        body: new Center(
          child: new Text(
            '这是${widget.title}',
            style: TextStyle(fontSize: 30.0),
          ),
        ),
      ),
      data: Config.themeData, // 设置为配置的主题数据
    );
  }
}

直接复制到自己的项目内即可运行。

Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

cover

Flutter for OpenHarmony三方库适配实战：animations 动画库详解

avatar 开源鸿蒙跨平台开发者社区
cover

ReactNative项目OpenHarmony三方库集成实战：react-native-shadow-2

avatar 开源鸿蒙跨平台开发者社区
cover

Flutter for OpenHarmony三方库适配实战：url_launcher URL启动器

avatar 开源鸿蒙跨平台开发者社区