Flutter 系列文章 总体目录

效果如果：

1、RaisedButton

基本属性如下：

onPressed	点击时触发，如果不设置此属性 Button为不可用状态
onHighlightChanged	高亮变化回调，参数：是否高亮，按下时高亮，抬起不高亮，
textTheme	字体theme，属性有：ButtonTextTheme.normal、ButtonTextTheme.accent、ButtonTextTheme.primary
textColor	字体颜色
disabledTextColor	禁用状态下字体颜色
color	背景颜色
disabledColor	禁用状态下背景颜色
highlightColor	高亮颜色，按下时的颜色
splashColor	水波纹颜色，按下松开会有水波纹效果
colorBrightness	字体亮度 设置了textColor、color颜色，此值无效
elevation	阴影z轴的值 ，注意看阴影
highlightElevation	高亮 阴影z轴的值
disabledElevation	禁用阴影z轴的值
padding	padding
shape	形状，系统内置了很多shape 以Border为例：
clipBehavior	暂时想不到干什么的
materialTapTargetSize	暂时想不到干什么的
animationDuration	暂时想不到干什么的
child	一般是Text

可以通过RaisedButton.icon设置一个icon

RaisedButton.icon(
            onPressed: () {},
            icon: Icon(Icons.access_alarm),
            label: Text('label')),

2、FlatButton

FlatButton的属性和RaisedButton一样

3、OutlineButton

borderSide	边框样式 ,BorderStyle 样式如下
disabledBorderColor	禁用状态下边框颜色
highlightedBorderColor	高亮状态下边框颜色

4、ButtonBar

ButtonBar 一横排的Button布局

demo：

import 'package:flutter/material.dart';

class ButtonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            RaisedButton(
              onPressed: (){print('onPressed');},
              child: Text('RaisedButton'),
            ),
            FlatButton(
              onPressed: () {},
              child: Text('FlatButton'),
            ),
            OutlineButton(
              onPressed: () {},
              color: Colors.red,
              child: Text('OutlineButton'),
            ),
          ],
        ),
        Row(
          children: <Widget>[
            OutlineButton(
              onPressed: () {},
              child: Text('none'),
              borderSide: BorderSide(color:Colors.green,width: 2.0,style: BorderStyle.none),
            ),
            OutlineButton(
              onPressed: () {},
              child: Text('solid'),
              borderSide: BorderSide(color:Colors.green,width: 2.0,style: BorderStyle.solid),
            ),
          ],
        ),
        Row(
          children: <Widget>[
            RaisedButton(
              onPressed: (){print('onPressed');},
              child: Text('onPressed'),
            ),
            RaisedButton(
              child: Text('not press'),
            ),
          ],
        ),
        Row(
          children: <Widget>[
            RaisedButton(
              onPressed: (){print('onPressed');},
              child: Text('normal'),
              textTheme: ButtonTextTheme.normal,
            ),
            RaisedButton(
              onPressed: (){print('onPressed');},
              child: Text('accent'),
              textTheme: ButtonTextTheme.accent,
            ),
            RaisedButton(
              onPressed: (){print('onPressed');},
              child: Text('primary'),
              textTheme: ButtonTextTheme.primary,
            ),
          ],
        ),
        Row(
          children: <Widget>[
            RaisedButton(
              child: Text('not press'),
              disabledColor: Colors.red,
            )
          ],
        ),
        Row(
          children: <Widget>[
            RaisedButton(
              onPressed: (){print('onPressed');},
              child: Text('darks'),
              colorBrightness: Brightness.dark,
            ),
            RaisedButton(
              onPressed: (){print('onPressed');},
              child: Text('light'),
              colorBrightness: Brightness.light,
            ),
          ],
        ),
        Row(

          children: <Widget>[
            RaisedButton(
                onPressed: (){print('onPressed');},
                child: Text('elevation=10'),
              elevation: 10,
            ),
          ],
        ),
        Row(
          children: <Widget>[
            RaisedButton(
              onPressed: (){print('onPressed');},
              child: Text('Border'),
              shape: Border.all(),
            ),
          ],
        ),
        Row(
          children: <Widget>[
            RaisedButton(
              onPressed: (){print('nonenonenonenonenone');},
              child: Text('nonenonenonenonenone'),
              clipBehavior: Clip.none,
            ),

            RaisedButton(
              onPressed: (){print('hardEdge');},
              child: Text('hardEdge'),
              clipBehavior: Clip.hardEdge,
            ),

          ],
        ),
        Row(
          children: <Widget>[
            RaisedButton(
              onPressed: (){print('antiAlias');},
              child: Text('antiAlias'),
              clipBehavior: Clip.antiAlias,
            ),
            RaisedButton(
              onPressed: (){print('antiAliasWithSaveLayer');},
              child: Text('antiAliasWithSaveLayer'),
              clipBehavior: Clip.antiAliasWithSaveLayer,
            ),
          ],
        ),

        RaisedButton.icon(
            onPressed: () {},
            icon: Icon(Icons.access_alarm),
            label: Text('label')
        ),
        Container(
          child: ButtonBar(
            children: <Widget>[
              RaisedButton(child: Text('ButtonBar'),),
              RaisedButton(child: Text('ButtonBar'),),
              RaisedButton(child: Text('ButtonBar'),),

            ],
          ),
        ),
      ],
    );
  }
}

整体效果：