Flutter basic components: Button

Foreword

Material component library offers a variety of components such as buttons RaisedButton, FlatButton, OutlineButton, etc., which are directly or indirectly a wrapper for RawMaterialButton custom components, so most of their attributes and RawMaterialButton same.
There Material Library button has the following similarities :

1. When pressed, there will be "Water Animation" (also known as "ripple animation" is animated rippling water will appear when you click on the button).
2. There is a onPressed property to set the click callback when the button is pressed will execute the callback, if it does not provide the callback button is disabled, the disabled state does not respond to user clicks.

Examples

// 按钮


import 'package:flutter/material.dart';

// ignore: must_be_immutable
class Buttons extends StatelessWidget {
  bool _active = false;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Buttons'),
      ),
      body: Container(
        child: Column(
          children: <Widget>[

            // RaisedButton，即"漂浮"按钮，默认带有阴影和灰色背景。按下后，阴影会变大。
            RaisedButton(
              child: Text(_active ? 'active' : 'normal'),
              onPressed: () {
                _active = !_active;
                print('RaisedButton按下！');
              },
            ),

            // FlatButton，即扁平按钮，默认背景透明并不带阴影。按下后，会有背景色。
            FlatButton(
              child: Text(_active ? 'active' : 'normal'),
              onPressed: () {
                _active = !_active;
                print('FlatButton按下！');
              },
            ),

            // OutlineButton，默认有一个边框，不带阴影且背景透明。按下后，边框颜色会变亮、同时出现背景和阴影(较弱)。
            OutlineButton(
              child: Text(_active ? 'active' : 'normal'),
              onPressed: () {
                _active = !_active;
                print('OutlineButton按下！');
              },
            ),

            // IconButton，是一个可点击的Icon，不包括文字，默认没有背景，点击后会出现背景。
            IconButton(
              icon: Icon(Icons.thumb_up),
              onPressed: () {
                _active = !_active;
                print('IconButton按下！');
              },
            ),

            // RaisedButton、FlatButton、OutlineButton都有一个icon 构造函数，通过它可以轻松创建带图标的按钮。
            RaisedButton.icon(
                onPressed: () {
                  _active = !_active;
                  print('RaisedButton按下！');
                },
                icon: Icon(Icons.send),
                label: Text('发送'),
            ),
            FlatButton.icon(
                onPressed: () {
                  _active = !_active;
                  print('FlatButton按下！');
                },
                icon: Icon(Icons.add),
                label: Text('添加'),
            ),
            OutlineButton.icon(
                onPressed: () {
                  _active = !_active;
                  print('OutlineButton按下！');
                },
                icon: Icon(Icons.info),
                label: Text('详情'),
            ),

            // 自定义按钮外观
            // 定义一个蓝色背景，两边圆角的按钮
            FlatButton(
              color: Colors.blue,
              // 去除背景
//              color: Color(0x000000),
              highlightColor: Colors.blue[700],
              colorBrightness: Brightness.dark,
              splashColor: Colors.red,
              child: Text('Submit'),
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
              onPressed: () {
                _active = !_active;
                print('FlatButton按下！');
              },
            ),

          ],
        ),
      ),
    );
  }
}