flutter主题设置

原创
10/29 13:08
阅读数 3.2K

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。

栗子:

推荐站点(Material design):

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

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

ThemeData(Color类型属性):

  • accentColor - 前景色(文本、按钮等)
  • backgroundColor - 与 primaryColor对比的颜色(例如 用作进度条的剩余部分)。
  • bottomAppBarColor - BottomAppBar的默认颜色。
  • buttonColor - MaterialRaisedButtons使用的默认填充色。
  • 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(如 SwitchRadioCheckbox)的活动状态的颜色。
  • unselectedWidgetColor - 用于 Widget处于非活动(但已启用)状态的颜色。例如,未选中的复选框。通常与 accentColor形成对比。
  • focusColor - 焦点获取时的颜色,例如,一些按钮焦点、输入框焦点。
  • hoverColor - 点击之后徘徊中的颜色,例如,按钮长按,按住之后的颜色。
  • cursorColor - 输入框光标颜色。

ThemeData(Theme相关类型属性):

  • accentIconTheme - IconThemeData类型,与突出颜色对照的图片主题。
  • accentTextTheme - TextTheme类型,与突出颜色对照的文本主题。
  • chipTheme - ChipThemeData类型,用于渲染 Chip的颜色和样式。
  • buttonTheme - ButtonThemeData类型,定义了按钮等控件的默认配置,像 RaisedButtonFlatButton
  • primaryIconTheme - IconThemeData类型,一个与主色对比的图片主题。
  • primaryTextTheme - TextThemeData类型,一个与主色对比的文本主题。
  • iconTheme - IconThemeData类型,与卡片和画布颜色形成对比的图标主题。
  • inputDecorationTheme - InputDecorationTheme类型, InputDecoratorTextFieldTextFormField的默认 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类型,定义 InkWallInkResponse生成的墨水喷溅的外观。
  • primaryColorBrightness - Brightness类型, primaryColor的亮度。
  • fontFamily - String类型,字体样式。
  • applyElevationOverlayColor bool类型,是否应用 elevation覆盖颜色。
  • materialTapTargetSize - MaterialTapTargetSize类型, Chip等组件的尺寸主题设置,如:设置为 MaterialTapTargetSize.shrinkWrap时, clip距顶部距离为0;设置为 MaterialTapTargetSize.padded时距顶部有一个距离
  • colorScheme - ColorScheme类型,scheme组颜色,一组13种颜色,可用于配置大多数组件的颜色属性。
  • typography - Typography类型,用于配置 TextThemeprimaryTextThemeaccentTextTheme的颜色和几何文本主题值。

适配夜间模式

实现效果:

分析:

这次是使用局部的实现,哪个页面需要同步就加个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: <Widget>[
        new Container(
          width: MediaQuery.of(context).size.width / 4// 整宽除4
          child: new GestureDetector(
            onTap: () => changeTheme(), // 触发更换主题的事件
            child: new Column(
              children: <Widget>[
                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, // 设置为配置的主题数据
    );
  }
}

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


本文分享自微信公众号 - flutter开发精选(Study_Knowledge)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
1
3 收藏
分享
加载中
更多评论
打赏
0 评论
3 收藏
1
分享
返回顶部
顶部