扣丁书屋

Flutter 2021 中的按钮

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


https://mp.weixin.qq.com/s/t1HNWLEBpAE41I3Pg1RzRQ

最多阅读

如何有效定位Flutter内存问题? 1年以前  |  10780次阅读
Flutter的手势GestureDetector分析详解 2年以前  |  6157次阅读
Flutter插件详解及其发布插件 2年以前  |  5031次阅读
在Flutter中添加资源和图片 2年以前  |  4278次阅读
发布Flutter开发的iOS程序 2年以前  |  3515次阅读
Flutter 状态管理指南之 Provider 2年以前  |  3365次阅读
Flutter for Web详细介绍 2年以前  |  3312次阅读
在Flutter中发起HTTP网络请求 2年以前  |  3164次阅读
使用Inspector检查用户界面 2年以前  |  3055次阅读
Flutter Widget框架概述 2年以前  |  2643次阅读
JSON和序列化 2年以前  |  2528次阅读
Flutter路由详解 2年以前  |  2527次阅读
Flutter框架概览 2年以前  |  2461次阅读
为Flutter应用程序添加交互 2年以前  |  2428次阅读
推荐5个Flutter重磅开源项目! 1年以前  |  2403次阅读
处理文本输入 2年以前  |  2308次阅读
使用自定义字体 2年以前  |  2300次阅读
编写国际化Flutter App 2年以前  |  2274次阅读

手机扫码阅读