Material 材料组件

Material风格组件的领军人物，灵魂核心。可指定颜色、影深、类型、阴影颜色、形状等属性。

相关组件

Card

Material基本使用

   <br />【child】 : 子组件   【Widget】<br />【type】 : 类型   【MaterialType】<br />【elevation】 : 影深   【double】<br />【shadowColor】 : 阴影颜色   【Color】<br />【color】 : 颜色   【Color】<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/326147/1589444687047-c9a4f0e4-fc4f-4513-95ef-2706e1d1d61f.png#align=left&display=inline&height=161&margin=%5Bobject%20Object%5D&name=image.png&originHeight=161&originWidth=372&size=10952&status=done&style=none&width=372)

import 'package:flutter/material.dart';
class CustomMaterial extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
        spacing: 10,
        runSpacing: 10,
        children: MaterialType.values.map((e) => _buildMaterial(e)).toList());
  }

  Material _buildMaterial(MaterialType type) => Material(
        shadowColor: Colors.blue,
        type: type,
        color: Colors.orange,
        elevation: 3,
        child: Container(
          alignment: Alignment.center,
          width: 100,
          height: 60,
          child: Text(
            type.toString().split('.')[1],
            style: TextStyle(color: Colors.black),
          ),
        ),
      );
}

Material的shape属性

   <br />【shape】 : 形状   【ShapeBorder】,<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/326147/1589444697793-049adf39-00b9-4e1f-a87e-c16938ff7e13.png#align=left&display=inline&height=373&margin=%5Bobject%20Object%5D&name=image.png&originHeight=373&originWidth=388&size=26942&status=done&style=none&width=388)

import 'package:flutter/material.dart';
class ShapeMaterial extends StatelessWidget {

  final shapeMap = {
    'BorderDirectional': BorderDirectional(
        top: BorderSide(
          color: Colors.white,
        ),
        start: BorderSide(color: Colors.black, width: 15),
        bottom: BorderSide(
          color: Colors.white,
        )),
    'Border': Border(
      top: BorderSide(width: 5.0, color: Color(0xFFFFDFDFDF)),
      left: BorderSide(width: 5.0, color: Color(0xFFFFDFDFDF)),
      right: BorderSide(width: 5.0, color: Color(0xFFFF7F7F7F)),
      bottom: BorderSide(width: 5.0, color: Color(0xFFFF7F7F7F)),
    ),
    'Circle': CircleBorder(
      side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),
    ),
    'RoundedRectangleBorder': RoundedRectangleBorder(
        side: BorderSide(width: 1.0, color: Colors.black),
        borderRadius: BorderRadius.all(Radius.circular(15))),
    'ContinuousRectangleBorder': ContinuousRectangleBorder(
      side: BorderSide.none,
      borderRadius: BorderRadius.circular(40.0),
    )
  };

  @override
  Widget build(BuildContext context) {
    return Wrap(
        spacing: 10,
        runSpacing: 10,
        children: shapeMap.keys.map((e) => _buildMaterial(e)).toList());
  }

  Material _buildMaterial(String type) => Material(
        shadowColor: Colors.blue,
        shape: shapeMap[type],
        color: Colors.orange,
        elevation: 3,
        textStyle: TextStyle(color: Colors.white),
        child: Container(
          alignment: Alignment.center,
          width: 300,
          height: 60,
          child: Text(
            type,
          ),
        ),
      );
}