在本文中,咱们将介绍令人惊叹的 Flutter 按钮,它们能够帮忙所有初学者或专业人士为古代利用程序设计丑陋的 UI。

首先让我通知你对于 Flutter 中按钮的一件重要事件,在flutter最新版本中以下Buttons在fluter中被废除了:

废除的举荐的代替
RaisedButtonElevatedButton
OutlineButtonOutlinedButton
FlatButtonTextButton

那么让咱们来摸索一下 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),    ),  ),)