美文网首页Flutterflutter
轻松flutter 之 配置资源 | 主题颜色

轻松flutter 之 配置资源 | 主题颜色

作者: 熊爸天下_56c7 | 来源:发表于2020-05-07 13:59 被阅读0次

    第一部分 配置资源

    flutter在统一的资源配置文件pubspec.yaml(根目录)中配置资源.

    pubspec.yaml中可以配置的资源有:

    • 项目名
    • 描述
    • 环境
    • 依赖
    • 开发依赖
    • 图片资源
    • 字体资源

    1. 配置图片

    (1). 在统一的资源配置文件pubspec.yaml(根目录)中配置资源

    (2). 在项目中引用

    Image.asset('assets/images/ic_main_tab_company_nor.png'),
    

    第二部分 主题颜色

    在flutter的入口MaterialApp组件的 theme 属性可以从整体的角度改变APP的主题和风格

    属性 取值 说明
    brightness Brightness 整体明暗风格
    primarySwatch MaterialColor 为主题色的一个样本色,通过样本色可以定义主题色
    primaryColor Color App主要部分的背景色(ToolBar,Tabbar等)
    primaryColorBrightness Brightness primaryColor的明暗风格
    primaryColorLight Color primaryColor的较浅版本
    primaryColorDark Color primaryColor的较深版本
    accentColor Color 前景色(按钮、文本、覆盖边缘效果等)
    accentColorBrightness Brightness accentColor的亮度.用于确定位于accentColor上部的文本和图标颜色
    canvasColor Color MaterialType.canvas Material的默认颜色
    scaffoldBackgroundColor Color 作为Scaffold下的Material默认颜色,用于materia应用程序或app内页面的背景色。
    bottomAppBarColor Color bottomAppBarColor的默认颜色。
    cardColor Color 用在卡片(Card)上的Material的颜色。
    dividerColor Color 分隔符(Dividers)和弹窗分隔符(PopupMenuDividers)的颜色
    focusColor Color 输入框 focus颜色
    hoverColor Color 指示器悬停颜色
    highlightColor Color 墨水喷溅动画或指示菜单被选中时的高亮颜色
    splashColor Color 墨水溅出的颜色
    splashFactory InteractiveInkFeatureFactory 定义InkWall和InkResponse产成的墨水喷溅时的外观
    selectedRowColor Color 用于高亮选定行的颜色
    unselectedWidgetColor Color 小部件处于非活动(但启用)状态时使用的颜色
    textSelectionColor Color 选中文本的颜色
    cursorColor Color 光标的颜色
    textSelectionHandleColor Color 选中文本手柄的颜色
    backgroundColor Color 与primaryColor对比的颜色(例如 用作进度条的剩余部分)
    dialogBackgroundColor Color Dialog元素的背景色
    indicatorColor Color TabBar中选项选中的指示器颜色
    hintColor Color 用于提示文本或占位符文本的颜色,例如在TextField中
    errorColor Color 用于输入验证错误的颜色
    toggleableActiveColor Color 用于突出显示切换Widget(如Switch,Radio和Checkbox)的活动状态的颜色
    fontFamily String 字体类型
    textTheme TextTheme 与卡片和画布对比的文本肢体
    primaryTextTheme TextTheme 与primary color形成对比的文本主题
    accentTextTheme TextTheme 与accent color形成对比的文本主题
    inputDecorationTheme InputDecorationTheme InputDecorator、TextField和TextFormField的默认 InputDecoration值基于此主题
    iconTheme IconThemeData 与卡片和画布颜色形成对比的图标主题
    primaryIconTheme IconThemeData 与原色(primary color)形成对比的图标主题
    accentIconTheme IconThemeData 与前景色(accent color)形成对比的图标主题
    sliderTheme SliderThemeData SliderThemeData类型,用于渲染Slider的颜色和形状
    tabBarTheme TabBarTheme 自定义选项卡栏指示器的尺寸、形状和颜色
    tooltipTheme TooltipThemeData tooltip的颜色和样式
    cardTheme CardTheme card的颜色和样式
    chipTheme ChipThemeData Chip的颜色和样式
    platform TargetPlatform widget应该适应目标的平台
    materialTapTargetSize MaterialTapTargetSize 配置特定材料部件的hit测试大小
    applyElevationOverlayColor bool 是否允许阴影颜色
    pageTransitionsTheme PageTransitionsTheme 每个目标平台的默认MaterialPageRoute转换
    appBarTheme AppBarTheme Appbar主题
    bottomAppBarTheme BottomAppBarTheme BottomAppBar主题
    colorScheme ColorScheme 可用于配置大多数组件的颜色属性
    dialogTheme DialogTheme 对话框主题
    floatingActionButtonTheme FloatingActionButtonTheme 悬浮按钮主题
    typography typography 配置TextTheme、primaryTextTheme和accentTextTheme的颜色和几何文本主题值
    cupertinoOverrideTheme CupertinoThemeData 卡布奇诺主题重写
    snackBarTheme SnackBarThemeData snackBar主题
    bottomSheetTheme BottomSheetThemeData bottomSheet主题
    popupMenuTheme PopupMenuThemeData popupMenu主题
    bannerTheme MaterialBannerThemeData banner主题
    dividerTheme DividerThemeData 分割线主题
    buttonBarTheme ButtonBarThemeData 底部栏主题

    我们可以看到, 主题里有太多的属性, 实际应用中, 我们不需要全部定制, 我们只需要把握关键的几个属性就可以为整个APP定调, 如果需要进一步个性化定制 再去研究更细的属性, 或者重新写属于自己的控件也可以.

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Boss直聘',
          theme: ThemeData(
            primaryIconTheme: IconThemeData(color: Colors.white), //按钮主题
            brightness: Brightness.light, //主题明暗风格
            primaryColor:
                Color.fromARGB(255, 0, 215, 198), //App主要部分的背景色(ToolBar,Tabbar等)
            accentColor: Color.fromARGB(255, 0, 215, 198), //前景色(按钮、文本、覆盖边缘效果等)
          ),
          home: MyHomePage(),
        );
      }
    }
    
    class MyHomePage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("主题风格"),
          ),
          bottomNavigationBar: BottomNavigationBar(items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.access_alarms), title: Text("data")),
            BottomNavigationBarItem(
                icon: Icon(Icons.access_alarms), title: Text("data")),
            BottomNavigationBarItem(
                icon: Icon(Icons.access_alarms), title: Text("data")),
          ]),
          body: Column(
            children: <Widget>[
              RaisedButton(child: Text("按钮"), onPressed: () {}),
              BackButton(),
              IconButton(icon: Icon(Icons.access_alarms), onPressed: () {}),
              Card(
                child: ListTile(
                  title: Text("data"),
                  subtitle: Text("data"),
                ),
              )
            ],
          ),
          floatingActionButton:
              FloatingActionButton(child: Icon(Icons.add), onPressed: () {}),
        );
      }
    }
    

    相关文章

      网友评论

        本文标题:轻松flutter 之 配置资源 | 主题颜色

        本文链接:https://www.haomeiwen.com/subject/nupoghtx.html