1 Overview
Material Design launched by Google's new design language, this language is intended for mobile phones, tablets, desktops, and other platforms to provide a more consistent, wider look and feel. Material Design style has been very textured design, and will provide some default interactive animation.
2. App structure and navigation components
2.1 MaterialApp (application components)
MaterialApp representatives using Material Design style application, which contains other required basic controls. An example is provided by the official demo from MaterialApp the main assembly began.
MaterialApp common component properties
| Property name | Types of | Explanation |
|---|---|---|
| title | String | The title of the application. The title appears in the following locations: Android: procedural Snapshot Task Manager; IOS: Program shift manager |
| theme | ThemeData | Theme color definitions used by the application, you can specify the color theme of each control |
| color | Color | The main color values to be applied, namely primary color |
| home | Widget | It is used to define the current open application interface displayed |
| routes | Map<String, WidgetBuilder> | Defined application page jump Rules |
| initialRoute | String | Initialization route |
| onGenerateRoute | RouteFactory | Routing the callback function. When by Navigator.of (context) .pushNamed jump the route and look at the routes less than when the method is called |
| onLocaleChanged | - | When the system changes the language of the time, this will trigger a callback |
| navigatorObservers | List<NavigatorObserver> | Navigator Observer |
| debugShowMaterialGrid | bool | Whether to display a grid layout, a tool used to debug the UI |
| showPerformanceOverlay | bool | Display performance label |
2.1.1 Setting Home
Use home home attribute settings of the application, i.e., the main component of the overall application.
2.1.2 routing process
routes object is a Map <String, WidgetBuilder>. When using Navigator.pushNamed to jump a route, find the name of the route through the routes, then use the corresponding WidgetBuilder to construct a MaterialPageRoute page switching with animation. If the application is only one interface, it does not set the entire property, home to use.
2.1.3 custom theme
The theme of the application, a variety of custom colors can be set for the program to switch topics.
2.2 Scaffold (scaffolding assembly)
Scaffold achieve the basic Material Design layout. As long as the layout of component elements defined in the Material Design through a single interface display, can be used to draw Scaffold.
Common properties
| Property name | Types of | Explanation |
|---|---|---|
| appBar | AppBar | Displayed on a top of the interface AppBar |
| body | Widget | The main contents of the current screen displayed |
| floatingActionButton | Widget | A defined function buttons in the Material Design |
| persistentFooterButtons | List< Widget> | Button below the display is fixed |
| drawer | Widget | Sidebar Components |
| bottomNavigatorBar | Widget | Show navigation bar at the bottom of the |
| backgroudColor | Color | background color |
| resizeToAvoidBottomPadding | bool | Control interface whether to re-layout the content body is covered to prevent the bottom, such as when the keyboard is displayed, to avoid re-layout keyboard cover contents. The default is true |
2.3 AppBar (application button assembly)
Apply button component has AppBar and SliverAppBar. They Material Design in AppBar, that is in Android ToolBar.
AppBar and SliverAppBar are inherited from StatefulWidget, the difference is that AppBar position is fixed at the top of the application; and SliverAppBar can follow the content rolling.
Common properties
| Property name | Types of | Defaults | Explanation |
|---|---|---|---|
| leading | Widget | null | A display assembly in front of the header, the logo displayed normally home application; other interfaces typically displays a return button |
| title | Widget | null | The title of the current interface |
| actions | List<Widget> | null | Widget a list of commonly used menu usually IconButton, unusual display commonly used PopupMenuButton three points, click on the pop-up secondary menu |
| bottom | PreferredSizeWidget | null | Usually a TabBar. Used to under the heading Tab displays a navigation bar |
| elevation | double | 4 | Control shadow below the height AppBar |
| flexibleSpace | Widget | null | A display assembly in AppBar below, the same height and AppBar, can achieve some special effects, this property is often used in the SliverAppBar |
| backgroundColor | Color | ThemeData.primaryColor | Background color |
| brightness | Brightness | ThemeData.primaryColorBrightness | AppBar brightness, white and black theme |
| iconTheme | IconThemeData | ThemeData.primaryIconTheme | AppBar icon color, transparency and size information |
| textTheme | TextTheme | ThemeData.primaryTextTheme | AppBar the text style |
| centerTitle | bool | - | Whether the title is centered, different operating systems, display a different way |
2.4 BottomNavigatorBar (bottom navigation bar)
BottomNavigatorBar bottom navigation bar, you can easily switch between top-level view and browse tab.
Common attributes
| Property name | Types of | Explanation |
|---|---|---|
| currentIndex | int | Current index |
| fixedColor | Color | Select the color of the button. Do not specify the use of the system color theme |
| iconSize | double | The size of the button graphic |
| items | List<BottomNavigatorBarItem> | Bottom navigation bar button set. Each is a BottomNavigatorBarItem, containing icons and icon title text |
| onTap | ValueChanged<int> | 按下按钮的回调事件。需要根据返回的索引设置当前索引 |
2.5 TabBar(水平选项卡及视图组件)
TabBar是一个显示水平选项卡的Material Design组件，通常需要配套Tab选项组件及TabBarView页面视图组件一起使用。
TabBar常见属性
| 属性名 | 类型 | 说明 |
|---|---|---|
| isScrolled | bool | 是否可以水平滚动 |
| tabs | List<Widget> | Tab选项列表 |
Tab常见属性
| 属性名 | 类型 | 说明 |
|---|---|---|
| icon | Widget | Tab图标 |
| text | String | Tab文本 |
TabBarView常见属性
| 属性名 | 类型 | 说明 |
|---|---|---|
| controller | TabController | 指定视图的控制器 |
| childrens | List<Widget> | 视图组件的child为一个列表，一个选项卡对应一个视图 |
##2.6 Drawer(抽屉组件)
Drawer可以实现类似抽屉拉入推出的效果，通常与ListView组合使用。
Drawer常用属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| child | Widget | - | Drawer的child可以放置任意可显示的组件 |
| elevation | double | 16 | 阴影尺寸 |
Drawer可以添加头部效果：
- DrawerHeader：展示基本信息
- UserAccountsDrawerHeader：展示用户头像、用户名、Email等信息
DrawerHeader常用属性
| 属性名 | 类型 | 说明 |
|---|---|---|
| decoration | Decoration | header区域的decoration，通常用来设置背景颜色或背景图片 |
| curve | Curve | 如果decoration发生了变化，则会使用curve设置的变化曲线和duration设置的动画时间来做一个动画效果 |
| child | Widget | Header里面所显示的内容控件 |
| padding | EdgeInsetsGeometry | Header里面内容控件的padding值，如果child为null，该值无效 |
| margin | EdgeInsetsGeometry | Header四周的间隙 |
UserAccountsDrawerHeader常用属性
| 属性名 | 类型 | 说明 |
|---|---|---|
| margin | EdgeInsetsGeometry | Header四周的间隙 |
| decoration | Decoration | header区域的decoration，通常用来设置背景颜色或背景图片 |
| currentAccountPicture | Widget | 用来设置当前用户的头像 |
| otherAccountsPicture | Widget | 用来设置当前用户其他账号的头像 |
| accountName | Widget | 当前用户的名字 |
| accountEmail | Widget | 当前用户的Email |
| onDetailsPressed | VoidCallback | 当accountName或者accountEmail被点击的时候所触发的回调函数，可以用来显示其他额外的信息 |
3. 按钮和提示组件
3.1 FloatingActionButton(悬停按钮组件)
FloatingActionButton对应一个圆形图标按钮，悬停在内容之上，以展示应用程序中的主要动作。类似IOS里的小白点。
FloatingActionButton常用属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| child | - | - | - |
| tooltip | - | - | - |
| foregroundColor | - | - | - |
| backgroundColor | - | - | - |
| elevation | - | - | - |
| highlightElevation | - | - | - |
| onPressed | - | - | - |
| shape | - | - | - |
3.2 FlatButton(扁平按钮组件)
FlatButton是一个扁平的Material Design风格的按钮，点击时会有一个阴影效果。
3.3 PopupMenuButton(弹出菜单组件)
PopupMenuButton一般放在应用右上角，表示更多操作，菜单项使用PopupMenuItem组件。
PopupMenuButton常用属性
| 属性名 | 类型 | 说明 |
|---|---|---|
| child | - | - |
| icon | - | - |
| itemBuilder | - | - |
| onSelected | - | - |
3.4 SimpleDialog(简单对话框组件)
SimpleDialog用于设计简单的对话框，可以显示附加的提示或操作。SimpleDialog通常需要配合SimpleDialogOption组件一起使用。
SimpleDialog常用属性
| 属性名 | 类型 | 说明 |
|---|---|---|
| children | List<Widget> | 对话框子项 |
| title | Widget | 通常是一个文本控件 |
| contentPadding | EdgeInsetsGeometry | 内容部分间距 |
| titlePadding | EdgeInsetsGeometry | 标题部分间距 |
- 通常对话框都是由某个动作来触发渲染的，比如点击按钮，点击菜单等。所以对话框一般要封装在一个方法里实现。
- 另外这个过程是异步的需要加入async/await处理。
3.5 AlertDialog(提示对话框组件)
AlertDialog比SimpleDialog对话框又复杂一些，不仅有提示内容，还有一些操作按钮，如确定和取消等，内容部分可以用SingleChildScrollView进行包裹。
AlertDialog常用属性
| 属性名 | 类型 | 说明 |
|---|---|---|
| actions | List<Widget> | 对话框底部操作按钮，如确定、取消等 |
| title | Widget | 通常是一个文本控件 |
| contentPadding | EdgeInsetsGeometry | 内容部分间距 |
| content | Widget | 内容部分，通常为对话框的提示内容 |
| titlePadding | EdgeInsetsGeometry | 标题部分间距 |
3.6 SnackBar(轻量提示组件)
SnackBar是一个轻量级消息提示组件，在屏幕底部显示。
SnackBar常用属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| action | SnackBarAction | - | 提示消息里执行的动作，比如用户想撤销时可以点击操作 |
| animation | Animation<double> | - | 给组件添加动画效果 |
| content | Widget | - | 提示消息内容，通常为文本组件 |
| duration | Duration | 4.0秒 | 动画执行的时长 |
| backgroundColor | Color | - | 消息面板的背景色 |
4. 其他组件
4.1 TextField(文本框组件)
TextField就是用来做文本输入的组件。
- 注意与Text组件区分，Text主要用于显示文本，不接受文本输入。
TextField常用属性
| 属性名 | 类型 | 说明 |
|---|---|---|
| maxLength | int | 最大长度 |
| maxLines | int | 最大行数 |
| autocorrect | bool | 是否自动更正 |
| autofocus | bool | 是否自动对焦 |
| obscureText | bool | 是否是密码 |
| textAlign | TextAlign | 文本对齐方式 |
| style | TextStyle | 文本的样式 |
| inputFormatters | List<TextInputFormatter> | 允许的输入格式 |
| onChanged | VoidChanged<String> | 内容改变时回调 |
| onSubmitted | VoidChanged<String> | 内容提交时回调 |
| enabled | bool | 是否禁用 |
4.2 Card(卡片组件)
Card内容可以由大多数类型的组件构成，但通常与ListTitle一起使用。Card有一个child，但可以是支持多个child的Row、Column、ListView、GridView或其他小部件。默认情况下，Card将其大小缩小为0像素。可以使用SizedBox来限制Card的大小。
Card常用属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| child | Widget | - | 组件的子元素，任意Widget都可以 |
| margin | EdgeInsetsGeometry | - | 围绕在decoration和child之外的空白区域，不属于内容区域 |
| shape | ShapeBorder | RoundedRectangleBorder | Card的阴影效果，默认的阴影效果为圆角的长方形边。弧度为4.0 |
