在本文中,咱们将介绍令人惊叹的 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),
),
),
)