在本文中，我们将介绍令人惊叹的 Flutter 按钮，它们可以帮助所有初学者或专业人士为现代应用程序设计漂亮的 UI。
首先让我告诉你关于 Flutter 中按钮的一件重要事情，在flutter最新版本中以下Buttons在fluter中被废弃了：
| 废弃的 | 推荐的替代 |
|---|---|
| RaisedButton | ElevatedButton |
| OutlineButton | OutlinedButton |
| FlatButton | TextButton |
那么让我们来探索一下 Flutter 中的按钮。
Elevated Button
StadiumBorder
- ElevatedButton(
- onPressed: (){},
- child: Text('Button'),
- style: ElevatedButton.styleFrom(
- shadowColor: Colors.green,
- shape: StadiumBorder(),
- padding: EdgeInsets.symmetric(horizontal: 35,vertical: 20)),
- )
RoundedRectangleBorder
- ElevatedButton(
- onPressed: (){},
- child: Text('Button'),
- style: ElevatedButton.styleFrom(
- shadowColor: Colors.green,
- shape: RoundedRectangleBorder(
- borderRadius: BorderRadius.circular(12),
- ),
- ),
- ),
CircleBorder
- ElevatedButton(
- onPressed: () {},
- child: Text('Button'),
- style: ElevatedButton.styleFrom(
- shape: CircleBorder(),
- padding: EdgeInsets.all(24),
- ),
- )
BeveledRectangleBorder
- ElevatedButton(
- onPressed: () {},
- child: Text('Button'),
- style: ElevatedButton.styleFrom(
- shape: BeveledRectangleBorder(
- borderRadius: BorderRadius.circular(12)
- ),
- ),
- )
Outlined Button
StadiumBorder
- OutlinedButton(
- onPressed: () {},
- child: Text('Button'),
- style: OutlinedButton.styleFrom(
- shape: StadiumBorder(),
- ),
- )
RoundedRectangleBorder
- OutlinedButton(
- onPressed: () {},
- child: Text('Button'),
- style: OutlinedButton.styleFrom(
- shape: BeveledRectangleBorder(
- borderRadius: BorderRadius.circular(12),
- ),
- ),
- )
CircleBorder
- OutlinedButton(
- onPressed: () {},
- child: Text('Button'),
- style: OutlinedButton.styleFrom(
- shape: CircleBorder(),
- padding: EdgeInsets.all(24),
- ),
- )
BeveledRectangleBorder
- OutlinedButton(
- onPressed: () {},
- child: Text('Button'),
- style: OutlinedButton.styleFrom(
- shape: BeveledRectangleBorder(
- borderRadius: BorderRadius.circular(12),
- ),
- ),
- )
原文：https://medium.com/@waseemakram.jpb/button-cheat-sheet-in-flutter-2021-1db38501d5f2
