Button组件

按钮也是在基础组件中常见的项目，它提供了点击事件可以用来定义互动的功能。

Button

Flutter 提供三种具备onPressed参数的按钮类别的 widget，早期 Flutter 技术文章大多介绍FlatButton、RaisedButton和OutlineButton 这三种，版本 1.22後 Flutter 为了让按钮能够更加灵活的被使用，目前已另外提供新的 widget 用来替换，分别是对应的是 TextButton、ElevatedButton、OutlinedButton。

新的按钮设计遵从 Material Design 的规范，透过参数 ButtonStyle 定义的 MaterialStateProperty 参数值控制按钮的样式。

新的按钮的使用方式如下：

• ElevatedButton

    var elevtedButton = ElevatedButton(
      child: Text('ElevatedButton'),
      onPressed: () {},
    );

• TextButton

  var textButton = TextButton(
      child: Text('TextButton'),
      onPressed: () {},
    );

• OutlinedButton

    var outlinedButton = OutlinedButton(
      child: Text('OutlinedButton'),
      onPressed: () {},
    );

ButtonStyle

新的按钮透过 ButtonStyle 定义按钮的样式设定，参数是由 MaterialStateProperty 所构成，所有参数预设为 null，若要覆写预设样式，TextButton、ElevatedButton、OutlinedButton 有提供简化的静态方法 styleFrom，用来快速的设定想要的效果。

TextButton.styleFrom()

    var textButtonWithStyle = TextButton(
      child: Text('textButtonWithStyle'),
      onPressed: () {},
      style: TextButton.styleFrom(
        primary: Colors.purple,
        textStyle: TextStyle(fontSize: 30.0),
      ),
    );

ElevatedButton.styleFrom()

    var elevatedButtonWithIcon = ElevatedButton.icon(
      icon: Icon(Icons.home),
      label: Text("Home"),
      onPressed: () {},
      style: ElevatedButton.styleFrom(
        primary: Colors.red,
        shadowColor: Colors.orange,
      ),
    );

OutlinedButton.styleFrom()

    var outlinedButtonWithStyle = OutlinedButton(
      child: Text('OutlinedButton'),
      onPressed: () {},
      style: OutlinedButton.styleFrom(
        primary: Colors.black87,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(18.0),
        ),
        side: BorderSide(width: 2, color: Colors.green),
      ),
    );

IconButton

若想要使用简单的 Icon 当作钮按，也有提供 IconButton 的组件

   var iconButton = IconButton(
      icon: Icon(Icons.build_circle),
      iconSize: 30.0,
      splashRadius: 20.0,
      onPressed: () {},
    );

Icon

Icon 指的是一个小图标，经常会使用在选单或是按钮，透过图像的方式让使用者可以理解该项目提供的功能为何。在 Flutter 的 Material Library 内就有提供大量的素材可以使用，从 Google Fonts 的官网，可以搜寻到对应的图标样式。

使用的方法也很简单：

 Icon(Icons.ac_unit, color: Colors.red)

今日成果

小结

练习成果

今天学习按钮的三种类型，可透过styleFrom的设定，任意配置出想要的按钮样式，onPressed通常是一个按钮必备的属性，用来定义点击要的行为逻辑。