(15)各种Button 与排列 OutlineButton，ButtonBar，Expanded，RaisedButton，StadiumBorder，FlatButton.icon

效果

至于倒数第二行和倒数第一行的效果为啥一样。。可能是fluttersdk升级了。。之前的api不再生效。。算是留坑！

代码

import 'package:flutter/material.dart';

class ButtonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Widget _floatButtonDemo =
        Row(mainAxisAlignment: MainAxisAlignment.center, children: [
      FlatButton(
        onPressed: () {},
        child: Text("FlatButton"),
        splashColor: Colors.grey,
        textColor: Theme.of(context).accentColor,
        color: Colors.black87,
      ),
      FlatButton.icon(
        icon: Icon(Icons.add),
        onPressed: () {},
        label: Text("FlatButton.icon"),
        splashColor: Colors.grey,
        textColor: Theme.of(context).accentColor,
        color: Colors.black87,
      )
    ]);

    final Widget _raisedButtonDemo =
        Row(mainAxisAlignment: MainAxisAlignment.center, children: [
      Theme(
          // data: ThemeData(),
          data: Theme.of(context).copyWith(
              buttonColor: Theme.of(context).accentColor,
              buttonTheme: ButtonThemeData(
                textTheme: ButtonTextTheme.primary,
                // shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
                shape: StadiumBorder(),
              )),
          child: RaisedButton(
            onPressed: () {},
            child: Text("RaisedButton"),
            splashColor: Colors.grey,
            textColor: Theme.of(context).accentColor,
            // color: Colors.white,
            // textTheme: ButtonTextTheme.primary,
            elevation: 0.0,
          )),
      SizedBox(
        width: 16.0,
      ),
      RaisedButton.icon(
        icon: Icon(Icons.add),
        onPressed: () {},
        label: Text("RaisedButton.icon"),
        splashColor: Colors.grey,
        textColor: Theme.of(context).accentColor,
        elevation: 12.0,
      )
    ]);

    final Widget _outerLineButtonDemo =
        Row(mainAxisAlignment: MainAxisAlignment.center, children: [
      Theme(
          // data: ThemeData(),
          data: Theme.of(context).copyWith(
              buttonColor: Theme.of(context).accentColor,
              buttonTheme: ButtonThemeData(
                textTheme: ButtonTextTheme.primary,
                // shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
                shape: StadiumBorder(),
              )),
          child: OutlineButton(
            onPressed: () {},
            child: Text("OutlineButton"),
            splashColor: Colors.grey[100],
            textColor: Colors.black,
            borderSide: BorderSide(color: Colors.black),
            highlightedBorderColor: Colors.grey,
            // textTheme: ButtonTextTheme.primary,
          )),
      SizedBox(
        width: 16.0,
      ),
      OutlineButton.icon(
        icon: Icon(Icons.add),
        onPressed: () {},
        label: Text("OutlineButton.icon"),
        splashColor: Colors.grey,
        textColor: Theme.of(context).accentColor,
      )
    ]);

    final Widget _widthOuterLineButton = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          width: 200,
          child: OutlineButton(
            onPressed: () {},
            child: Text("_widthOuterLineButton"),
            splashColor: Colors.grey,
            textColor: Colors.blue,
          ),
        )
      ],
    );
    final Widget _expendOuterLineButton = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Expanded(
          child: OutlineButton(
            onPressed: () {},
            child: Text("_expendOuterLineButton"),
            splashColor: Colors.grey,
            textColor: Colors.blue,
          ),
        )
      ],
    );
    final Widget _expend2OuterLineButton = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Expanded(
          flex: 1,
          child: OutlineButton(
            onPressed: () {},
            child: Text("权重 for 1"),
            splashColor: Colors.grey,
            textColor: Colors.blue,
          ),
        ),
        SizedBox(
          width: 15,
        ),
        Expanded(
          //权重属性
          flex: 2,
          child: OutlineButton(
            onPressed: () {},
            child: Text("权重 for 2"),
            splashColor: Colors.grey,
            textColor: Colors.blue,
          ),
        )
      ],
    );
    //一行并列行显示的按钮
    final Widget _buttonBar = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ButtonBar(
          children: [
            OutlineButton(
              onPressed: () {},
              child: Text("ButtonBar"),
              splashColor: Colors.grey,
              textColor: Colors.blue,
            ),
            OutlineButton(
              onPressed: () {},
              child: Text("ButtonBar"),
              splashColor: Colors.grey,
              textColor: Colors.blue,
            ),
          ],
        )
      ],
    );
    //对刚才的并排中间添加边距
    final Widget _buttonBarPaddingv = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Theme(
          data: Theme.of(context).copyWith(
              buttonTheme: ButtonThemeData(
                  padding: EdgeInsets.symmetric(horizontal: 100.0))),
          child: ButtonBar(
            children: [
              OutlineButton(
                onPressed: () {},
                child: Text("ButtonBar"),
                splashColor: Colors.grey,
                textColor: Colors.blue,
              ),
              OutlineButton(
                onPressed: () {},
                child: Text("ButtonBar"),
                splashColor: Colors.grey,
                textColor: Colors.blue,
              ),
            ],
          ),
        )
      ],
    );
    return Scaffold(
      appBar: AppBar(
        title: Text("button Demo"),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _floatButtonDemo,
            _raisedButtonDemo,
            _outerLineButtonDemo,
            _widthOuterLineButton,
            _expendOuterLineButton,
            _expend2OuterLineButton,
            _buttonBar,
            _buttonBarPaddingv
          ],
        ),
      ),
    );
  }
}