微信交流群

# Material

一个Material风格的组件,Card组件就是基于此组件实现。

Material(
  type: MaterialType.card,
  color: Colors.red,
  child: Container(
    height: 100,
    width: 100,
  ),
)
1
2
3
4
5
6
7
8

image-20200525172351758

type表示组件类型,此属性影响形状和默认颜色值说明如下:

  • card:圆角,默认使用Card主题颜色。
  • canvas:矩形。
  • circle:圆形,默认没有颜色,通常用于floating action button
  • button:圆角,默认没有颜色,通常用于MaterialButton
  • transparency:透明,使用水波纹和高亮颜色绘制。

设置Z轴值和阴影颜色:

Material(
  color: Colors.red,
  elevation: 10,
  shadowColor: Colors.blue,
  child: Container(
    height: 100,
    width: 100,
  ),
)
1
2
3
4
5
6
7
8
9

image-20200525173003774

设置圆角及字体样式:

Material(
  borderRadius: BorderRadius.circular(10),
  color: Colors.blue,
  textStyle: TextStyle(fontSize: 20, color: Colors.red),
  child: Container(
    height: 100,
    width: 100,
    alignment: Alignment.center,
    child: Text('老孟'),
  ),
)
1
2
3
4
5
6
7
8
9
10
11

image-20200525173241800

animationDuration表示动画之行时常,shapeelevationshadowColor属性发生变化时使用此动画时常,用法如下:

double _radius = 0.0;
Color _color = Colors.blue;


Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      RaisedButton(
        onPressed: () {
          setState(() {
            _radius = 30.0;
            _color = Colors.red;
          });
        },
      ),
      Material(
        borderRadius: BorderRadius.circular(_radius),
        shadowColor: _color,
        color: Colors.green,
        animationDuration: Duration(seconds: 1),
        child: Container(
          height: 100,
          width: 100,
          alignment: Alignment.center,
          child: Text('老孟'),
        ),
      )
    ],
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Material_1