关于flutter:Flutter-2021-中的按钮

39次阅读

共计 1592 个字符,预计需要花费 4 分钟才能阅读完成。

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

正文完
 0