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

Flutter笔记11:FlatButton扁平化按钮

Flutter的button有:FloatingActionButton、IconButton、OutLineButton、FlatButton等,它们的很多属性和方法都是一样的,这篇文章是比较常用的FlatButton扁平化按钮,可以用来做图标按钮、普通文字按钮等:
01class MyApp extends StatelessWidget {
02  @override
03  Widget build(BuildContext context) {
04    return MaterialApp(
05        title: 'FlatButton扁平化按钮',
06        home: Scaffold(
07          appBar: AppBar(
08            title: Text('FlatButton扁平化按钮'),
09          ),
10          body: Column(
11            children: [
12              //图标按钮
13              FlatButton.icon(
14                  onPressed: () {}, icon: Icon(Icons.print), label: Text('打印')),
15              //文字按钮
16              FlatButton(
17                //文本
18                child: Text(
19                  '点击登录',
20                  style: TextStyle(fontSize: 36.0),
21                ),
22                onPressed: () {},
23                //按钮背景色
24                color: Colors.green,
25                //按钮亮度
26                colorBrightness: Brightness.dark,
27                //失效背景色(失效状态即 onPressed为null )
28                disabledColor: Color.fromARGB(255, 0, 0, 0),
29                //失效文字颜色(失效状态即 onPressed为null )
30                disabledTextColor: Colors.grey,
31                //文字颜色
32                textColor: Colors.white,
33                //按钮主题 ButtonTheme ButtonThemeData ButtonTextTheme ThemeData
34                textTheme: ButtonTextTheme.normal,
35                //墨汁飞溅的颜色、水波纹的颜色
36                splashColor: Colors.red,
37                //抗锯齿能力
38                clipBehavior: Clip.antiAlias,
39                //内边距
40                padding:
41                    EdgeInsets.only(bottom: 5.0, top: 5.0, left: 20, right: 20),
42                //边框样式,矩形
43                // shape:Border.all(
44                //   width: 2.0,
45                //   color: Colors.green,
46                //   style: BorderStyle.solid
47                // ),
48                //圆角矩形样式
49                shape: RoundedRectangleBorder(
50                    side: BorderSide(
51                        width: 2.0,
52                        color: Colors.white,
53                        style: BorderStyle.solid),
54                    borderRadius: BorderRadius.only(
55                      topRight: Radius.circular(10.0),
56                      topLeft: Radius.circular(10.0),
57                      bottomLeft: Radius.circular(10.0),
58                      bottomRight: Radius.circular(10.0),
59                    )),
60              )
61            ],
62          ),
63        ));
64  }
65}