【Flutter】Flutter 应用主题 ( ThemeData | 动态修改主题 )

韩曙亮

发布于 2023-03-28 21:58:06

1K0

发布于 2023-03-28 21:58:06

文章目录

一、Flutter 应用主题

Flutter 应用主题都封装在 ThemeData 类中 , 在 MaterialApp 的 theme 字段 , 可以设置 ThemeData 主题 , 可设置的选项如下 , 下面的 ThemeData 工厂构造函数中的可选参数就是可以设置的各种主题选项 ;

class ThemeData extends Diagnosticable {
  factory ThemeData({
    Brightness brightness,
    MaterialColor primarySwatch,
    Color primaryColor,
    Brightness primaryColorBrightness,
    Color primaryColorLight,
    Color primaryColorDark,
    Color accentColor,
    Brightness accentColorBrightness,
    Color canvasColor,
    Color scaffoldBackgroundColor,
    Color bottomAppBarColor,
    Color cardColor,
    Color dividerColor,
    Color focusColor,
    Color hoverColor,
    Color highlightColor,
    Color splashColor,
    InteractiveInkFeatureFactory splashFactory,
    Color selectedRowColor,
    Color unselectedWidgetColor,
    Color disabledColor,
    Color buttonColor,
    ButtonThemeData buttonTheme,
    ToggleButtonsThemeData toggleButtonsTheme,
    Color secondaryHeaderColor,
    Color textSelectionColor,
    Color cursorColor,
    Color textSelectionHandleColor,
    Color backgroundColor,
    Color dialogBackgroundColor,
    Color indicatorColor,
    Color hintColor,
    Color errorColor,
    Color toggleableActiveColor,
    String fontFamily,
    TextTheme textTheme,
    TextTheme primaryTextTheme,
    TextTheme accentTextTheme,
    InputDecorationTheme inputDecorationTheme,
    IconThemeData iconTheme,
    IconThemeData primaryIconTheme,
    IconThemeData accentIconTheme,
    SliderThemeData sliderTheme,
    TabBarTheme tabBarTheme,
    TooltipThemeData tooltipTheme,
    CardTheme cardTheme,
    ChipThemeData chipTheme,
    TargetPlatform platform,
    MaterialTapTargetSize materialTapTargetSize,
    bool applyElevationOverlayColor,
    PageTransitionsTheme pageTransitionsTheme,
    AppBarTheme appBarTheme,
    BottomAppBarTheme bottomAppBarTheme,
    ColorScheme colorScheme,
    DialogTheme dialogTheme,
    FloatingActionButtonThemeData floatingActionButtonTheme,
    Typography typography,
    CupertinoThemeData cupertinoOverrideTheme,
    SnackBarThemeData snackBarTheme,
    BottomSheetThemeData bottomSheetTheme,
    PopupMenuThemeData popupMenuTheme,
    MaterialBannerThemeData bannerTheme,
    DividerThemeData dividerTheme,
    ButtonBarThemeData buttonBarTheme,
  })
}

如下代码中就设置了 MaterialApp 的主题 ThemeData , brightness 字段设置的是主题模式 , 这里设置的是 Brightness.light 日间模式 ;

primarySwatch 字段设置的是主题的主要颜色 , 这里设置的是蓝色 ;

import 'package:flutter/material.dart';

class ThemePage extends StatefulWidget {
  @override
  _ThemePageState createState() => _ThemePageState();
}

class _ThemePageState extends State<ThemePage> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Theme 主题修改",

      theme: ThemeData(
        brightness: Brightness.light,
        primarySwatch: Colors.blue,
      ),

      home: ,

    );
  }
}

二、完整代码示例

完整代码示例 :

import 'package:flutter/material.dart';

class ThemePage extends StatefulWidget {
  @override
  _ThemePageState createState() => _ThemePageState();
}

class _ThemePageState extends State<ThemePage> {

  /// 主题模式
  Brightness brightness = Brightness.light;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Theme 主题修改",

      theme: ThemeData(
        brightness: brightness,
        primarySwatch: Colors.blue,
      ),

      home: Scaffold(
        appBar: AppBar(
          title: Text("Theme 主题修改"),
        ),

        body: Column(
          children: <Widget>[
            RaisedButton(
              onPressed: (){
                setState(() {
                  brightness = Brightness.light;
                });
              },
              child: Text("切换到日间主题"),
            ),

            RaisedButton(
              onPressed: (){
                setState(() {
                  brightness = Brightness.dark;
                });
              },
              child: Text("切换到夜间主题"),
            ),

          ],
        ),
      ),
    );
  }
}

运行效果 :

三、相关资源

参考资料 :

Flutter 官网 : https://flutter.dev/
Flutter 插件下载地址 : https://pub.dev/packages
Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )
官方 GitHub 地址 : https://github.com/flutter
Flutter 中文社区 : https://flutter.cn/
Flutter 实用教程 : https://flutter.cn/docs/cookbook
Flutter CodeLab : https://codelabs.flutter-io.cn/
Dart 中文文档 : https://dart.cn/
Dart 开发者官网 : https://api.dart.dev/
Flutter 中文网 ( 非官方 , 翻译的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )

博客源码下载 :

GitHub 地址 : https://github.com/han1202012/flutter_cmd ( 随博客进度一直更新 , 有可能没有本博客的源码 )
博客源码快照 : https://download.csdn.net/download/han1202012/15547438 ( 本篇博客的源码快照 , 可以找到本博客的源码 )

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2021-03-04，如有侵权请联系 cloudcommunity@tencent.com 删除

flutter