首页 > 建站教程 > APP开发,混合APP >  Flutter笔记11:FlatButton扁平化按钮正文

Flutter笔记11:FlatButton扁平化按钮

Flutter的button有:FloatingActionButton、IconButton、OutLineButton、FlatButton等,它们的很多属性和方法都是一样的,这篇文章是比较常用的FlatButton扁平化按钮,可以用来做图标按钮、普通文字按钮等:
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'FlatButton扁平化按钮',
        home: Scaffold(
          appBar: AppBar(
            title: Text('FlatButton扁平化按钮'),
          ),
          body: Column(
            children: [
              //图标按钮
              FlatButton.icon(
                  onPressed: () {}, icon: Icon(Icons.print), label: Text('打印')),
              //文字按钮
              FlatButton(
                //文本
                child: Text(
                  '点击登录',
                  style: TextStyle(fontSize: 36.0),
                ),
                onPressed: () {},
                //按钮背景色
                color: Colors.green,
                //按钮亮度
                colorBrightness: Brightness.dark,
                //失效背景色(失效状态即 onPressed为null )
                disabledColor: Color.fromARGB(255, 0, 0, 0),
                //失效文字颜色(失效状态即 onPressed为null )
                disabledTextColor: Colors.grey,
                //文字颜色
                textColor: Colors.white,
                //按钮主题 ButtonTheme ButtonThemeData ButtonTextTheme ThemeData
                textTheme: ButtonTextTheme.normal,
                //墨汁飞溅的颜色、水波纹的颜色
                splashColor: Colors.red,
                //抗锯齿能力
                clipBehavior: Clip.antiAlias,
                //内边距
                padding:
                    EdgeInsets.only(bottom: 5.0, top: 5.0, left: 20, right: 20),
                //边框样式,矩形
                // shape:Border.all(
                //   width: 2.0,
                //   color: Colors.green,
                //   style: BorderStyle.solid
                // ),
                //圆角矩形样式
                shape: RoundedRectangleBorder(
                    side: BorderSide(
                        width: 2.0,
                        color: Colors.white,
                        style: BorderStyle.solid),
                    borderRadius: BorderRadius.only(
                      topRight: Radius.circular(10.0),
                      topLeft: Radius.circular(10.0),
                      bottomLeft: Radius.circular(10.0),
                      bottomRight: Radius.circular(10.0),
                    )),
              )
            ],
          ),
        ));
  }
}