1. 基本介绍

FlatButton 是一个 google 风格的扁平化按钮，使用方法与 Flutter 组件之 RaisedButton 详解 一致，这里就按照 RaisedButton 的讲解方式过一遍样式。

2. 示例代码

代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。

3. FlatButton 使用

3.1 创建容器

优雅的编程，首先创建一个 iconbutton.dart 文件。

import 'package:flutter/material.dart';

class FMIconButtonVC extends StatefulWidget{
  @override
  FMIconButtonState createState() => FMIconButtonState();
}

class FMIconButtonState extends State <FMIconButtonVC> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("IconButton"),
      ),
      body: _listView(),
    );
  }

  ListView _listView(){
    return ListView(
      children: [
        _normalIconButton(),
      ],
    );
  }

  IconButton _normalIconButton(){
    return IconButton(
      icon: Icon(Icons.ac_unit),
      iconSize: 50,
      onPressed: (){},
    );
  }
}

iconbutton.png

3.2 颜色

常用颜色属性	介绍
color	icon 颜色
disabledColor	icon 不可点击颜色，onPressed == null 时生效
splashColor	点击时闪过的颜色
highlightColor	按下去高亮的颜色

  IconButton _normalIconButton(){
    return IconButton(
      icon: Icon(Icons.ac_unit),
      iconSize: 50,
      onPressed: (){},
      color: Colors.red,
      disabledColor: Colors.black,
      splashColor: Colors.yellow,
      highlightColor: Colors.green,
    );
  }

iconbutton colors.gif

3.3 大小

  IconButton _normalIconButton(){
    return IconButton(
      icon: Icon(Icons.ac_unit),
      iconSize: 100,
      onPressed: (){},
    );
  }

iconbutton size.png

3.4 外边距

padding 不设置时，默认为 8.0

  IconButton _normalIconButton(){
    return IconButton(
      icon: Icon(Icons.ac_unit),
      iconSize: 100,
      onPressed: (){},
      padding: EdgeInsets.all(50),
    );
  }

iconbutton 8padding.gif
iconbutton 50padding.gif

4. 技术小结

IconButton 是一个非常简单的控件，稍微了解一下用法即可。