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),
)),
)
],
),
));
}
}
Flutter笔记11:FlatButton扁平化按钮
Flutter的button有:FloatingActionButton、IconButton、OutLineButton、FlatButton等,它们的很多属性和方法都是一样的,这篇文章是比较常用的FlatButton扁平化按钮,可以用来做图标按钮、普通文字按钮等:
