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