聊聊 Flutter 2021 中的按钮

[[432217]]

在本文中，我们将介绍令人惊叹的 Flutter 按钮，它们可以帮助所有初学者或专业人士为现代应用程序设计漂亮的 UI。

首先让我告诉你关于 Flutter 中按钮的一件重要事情，在flutter最新版本中以下Buttons在fluter中被废弃了：

那么让我们来探索一下 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