如何更改大纲按钮大小？

Question

这是一个愚蠢的问题，但我是 Flutter 的新人。所以我希望你们能帮助我。 有没有办法改变flutter中按钮的大小？

长方形：

      OutlineButton(
        child: Text(forgot_password, style: TextStyle(color: colorWhite)),
        borderSide: BorderSide(
          color: colorWhite,
          style: BorderStyle.none,
          width: 0.8,
        ),
        onPressed: () {},
      ),

圆形的形状：

      OutlineButton(
            onPressed: () {},
            child: Icon(
              FontAwesomeIcons.google,
              color: colorWhite,
              size: 20.0,
            ),
            shape: CircleBorder(),
            borderSide: BorderSide(
              color: colorWhite,
              style: BorderStyle.solid,
              width: 1,
            ),
          ),

Answer 1

您可以使用如下所示的ButtonTheme或SizedBox

ButtonTheme(
  width: 100.0,
  height: 50.0,
  child: OutlineButton(
    child: Text('forgot_password', style: TextStyle(color: Colors.green)),
    borderSide: BorderSide(
      color: Colors.amber,
      style: BorderStyle.solid,
      width: 1.8,
    ),
    onPressed: () {},
  )
)

Container(
  width: 100.0,
  height: 50.0,
  margin: EdgeInsets.symmetric(vertical: 3.0),
  child: SizedBox.expand(
    child: OutlineButton(
      child: Text('forgot_password', style: TextStyle(color: Colors.green)),
      borderSide: BorderSide(
        color: Colors.amber,
        style: BorderStyle.solid,
        width: 1.8,
      ),
      onPressed: () {},
    )
  )
)

Answer 2

您可以使用Button样式属性的minimumSize和maximumSize属性。 这样您就不需要将Button包装在另一个SizedBox 、 Container 、 ButtonTheme等中。

  OutlinedButton(
    style: OutlinedButton.styleFrom(
      minimumSize: Size.fromHeight(45),
    ),
    child: Text('Close'),
    onPressed: () => Navigator.of(context).pop(),
  )

在这里我将最小高度设置为 45，在大多数情况下这将是准确的高度。

当然你可以在你的应用的主题中这样做，并使它对整个应用有效。

Answer 3

您可以使用“ ButtonTheme”来更改按钮的大小，如下所示：

对于矩形：

ButtonTheme(
          minWidth: 200.0,
          height: 100.0,
            child:   OutlineButton(
              child: Text('forgot_password', style: TextStyle(color: Colors.green)),
              borderSide: BorderSide(
                color: Colors.amber,
                style: BorderStyle.solid,
                width: 1.8,
              ),
              onPressed: () {},
            ),
          ),

对于圆形：

ButtonTheme(
          minWidth: 200.0,
          height: 100.0,
          child: OutlineButton(
            onPressed: () {},
            child: Icon(
              Icons.screen_lock_portrait,
              color: Colors.redAccent,
              size: 40.0,
            ),
            shape: CircleBorder(),
            borderSide: BorderSide(
              color: Colors.blue,
              style: BorderStyle.solid,
              width: 1,
            ),
          ),
        )

您还可以使用Container以及SizedBox，如下所示：

容器

Container(
          width: 200.0,
          height: 100.0,
          child: OutlineButton(
            child: Text('Login', style: TextStyle(color: Colors.green)),
            borderSide: BorderSide(
              color: Colors.amber,
              style: BorderStyle.solid,
              width: 1.8,
            ),
            onPressed: () {},
          ),
        ),

SizedBox

SizedBox(
          width: 200.0,
          height: 100.0,
          child: OutlineButton(
            child: Text('Login', style: TextStyle(color: Colors.green)),
            borderSide: BorderSide(
              color: Colors.amber,
              style: BorderStyle.solid,
              width: 1.8,
            ),
            onPressed: () {},
          ),
        ),

Answer 4

这就是我发现对我有用的东西。 我使用了OutlinedButton.styleFrom fixedSize属性。

OutlinedButton.icon(
   style: OutlinedButton.styleFrom(
   fixedSize: Size(10, 40),
   alignment: AlignmentDirectional(-1.0, 0),
                      side: BorderSide(
                      width: 1,
                      color: Colors.black38,
                      style: BorderStyle.solid)),
             onPressed: () {},
             label: Text("Login with Facebook"),
             icon: Icon(Icons.facebook),
  ),

Answer 5

您可以使用大小小部件。

样式：OutlinedButton.styleFrom（填充：const EdgeInsets.all（0），形状：RoundedRectangleBorder（borderRadius：BorderRadius.circular（3）），minimumSize：Size.fromHeight（100）），