第一部分 配置资源
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: () {}),
);
}
}
网友评论