[flutter-13] Button

Button

1. RaisedButton

Widget build(BuildContext context) {
    return RaisedButton(
      color: Colors.redAccent,
      child: Text(
        '+1',
        style: TextStyle(
          fontSize: 20,
          color: Colors.white,
        ),
      ),
    );

2. floatingActionButton

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('首页'),
      ),
      body: ContentfulWidget(this._counter),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'incrementCount', // 长按的化回显示这个标题
        child: Icon(Icons.add), // 添加系统图片
      ),
    );
}

// 如 FloatingActionButton
class A extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      // FloatingActionButton 圆形⭕️
      child: Text(
        'FloatingActionButton',
        style: TextStyle(
          color: Colors.redAccent,
          fontSize: 20,
          fontWeight: FontWeight.bold,
        ),
      ),
      tooltip: 'FloatingActionButton',
      onPressed: () {
        print('click: FloatingActionButton');
      },
    );
  }
}

3: FlatButton

class A extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FlatButton(
      // FlatButton
      color: Colors.black,
      onPressed: () {},
      child: Text(
        'FlatButton',
        style: TextStyle(
          fontSize: 20,
          color: Colors.green,
        ),
      ),
    );
  }
}

4. OutlineButton

class A extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return OutlineButton(
      // OutlineButton
      child: Text(
        'OutlineButton',
        style: TextStyle(
          fontSize: 30,
          color: Colors.brown,
          fontWeight: FontWeight.bold,
        ),
      ),
      onPressed: () {
        print('click: OutlineButton');
      },
    );
  }
}

5. 自定义RaisedButton

class A extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      color: Colors.redAccent,
      child: Text(  // 可以是文字、也可以是icon、也可以是图片等......
        '自定义Button',
        style: TextStyle(fontSize: 20),
      ),
      onPressed: () {
        print('click: RaisedButton自定义样式');
      },
      highlightColor: Colors.red[900], // 按钮长按高亮颜色
      shape: RoundedRectangleBorder( // 按钮圆角的实现
        borderRadius: BorderRadius.circular(20),
      ),
    );
  }
}