【问题标题】:How to set the minimum size of the button in Flutter?Flutter中如何设置按钮的最小尺寸?
【发布时间】:2021-06-28 10:46:30
【问题描述】:

我正在构建一个 Flutter Web 应用程序,其中有一个按钮,其中包含一个图标和一些连续的文本。我的问题是,每当用户将窗口调整为更小的尺寸时,按钮就会变得太小,从而使文本突出显示。我试图给它约束并在样式参数上设置按钮的最小尺寸,但它没有帮助。

调整窗口大小前的按钮(默认大小):



窗口变小后的按钮:



按钮小部件的代码:

class UploadTextButton extends StatelessWidget {
  final Function _onPressed;

  const UploadTextButton(this._onPressed);

  @override
  Widget build(BuildContext context) {
    return Container(
      constraints: BoxConstraints(
        maxWidth: 250,
        maxHeight: 50,
        minWidth: 200,
        minHeight: 50
      ),
      child: OutlinedButton(
        style: ButtonStyle(
          minimumSize: MaterialStateProperty.all(Size(200, 50))
        ),
          onPressed: () => _onPressed(),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Padding(
                padding: const EdgeInsets.only(right: 8.0),
                child: Icon(Icons.cloud_upload),
              ),
              Text("Upload my new picture")
            ],
          )),
    );
  }
}

【问题讨论】:

  • 将其包裹在灵活的小部件中

标签: flutter button layout constraints minimum-size


【解决方案1】:

如果测试大小有问题,您可以使用 Fittedbox() 小部件作为文本。

FittedBox(
child:Text("Upload my new picture"),)

【讨论】:

  • 没有帮助,还是太小了。
【解决方案2】:

您可以在应用主题中定义按钮大小

例如:

     buttonTheme: const ButtonThemeData(

     buttonColor: assentColor,
 
     padding: EdgeInsets.symmetric(vertical: 20),

      minWidth: double.maxFinite,
 
     colorScheme: ColorScheme.light(brightness: 
  
    Brightness.dark),
    
     ),

【讨论】:

  • 我不想调整应用中每个按钮的大小。
猜你喜欢
  • 2019-07-08
  • 2014-05-21
  • 2011-01-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多