Flutter设置Button的大小

简介: Flutter设置Button的大小

Flutter 2.0之前,一般使用RaiseButton

/// 和父widget的宽度或高度保持一致
SizedBox.expand(
  child: RaisedButton(...),
)
/// 设置固定的值
使用Container或者SizeBox设置大小即可。

Flutter 2.0之后,官方使用ElevatedButton替代了RaiseButton。

ElevatedButton(
      onPressed: () => _login(_controllers[0].text.trim().toString(),
          _controllers[1].text.trim().toString(), context),
      child: Text('login'),
      style: ElevatedButton.styleFrom(
          minimumSize: const Size(100, 50),
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(30))),
    );

如果想占满屏幕,将Size中的width使用double.infinity就可以了

相关文章
|
1月前
|
开发者 UED
flutter:dialog (十一)
本文介绍了 Flutter 中常用的弹窗组件和方法,包括 `AlertDialog`、`SimpleDialog`、`showModalBottomSheet` 和 `toast`。每个组件的使用方法和示例代码都进行了详细说明,帮助开发者快速理解和应用这些弹窗功能。例如,`AlertDialog` 用于显示带有标题、内容和按钮的对话框;`SimpleDialog` 用于显示多个选项供用户选择;`showModalBottomSheet` 用于从屏幕底部弹出模态对话框;而 `toast` 则用于显示短暂的消息提示。文中还提供了如何处理点击事件、取消弹窗等常见操作的代码示例。
|
6月前
|
索引
Flutter.源码分析.flutter/packages/flutter/lib/src/widgets/scroll_view.dart/GridView
Flutter.源码分析.flutter/packages/flutter/lib/src/widgets/scroll_view.dart/GridView
53 0
|
6月前
Flutter中的无名英雄——Focus
Flutter中的无名英雄——Focus 在Flutter中,Focus是一个非常强大的组件,它可以接受用户输入和处理焦点事件,是实现交互功能的重要组成部分。
148 0
Flutter Button 实例
Flutter Button 实例
160 0
Flutter Button 实例
【交互 widget】Flutter Dialog
【交互 widget】Flutter Dialog
292 0
【交互 widget】Flutter Dialog
【交互 widget】Flutter Slider
【交互 widget】Flutter Slider
216 0
【交互 widget】Flutter Slider
使用 Flutter Button
使用 Flutter Button
192 0