如何更改自定义按钮的大小

Question

我正在尝试更改应用程序中自定义按钮的大小，但无论我做什么，大小（宽度）都保持不变

我的代码可以在这里找到：

import 'package:flutter/material.dart';

class CustomAppButton extends StatelessWidget {
  final VoidCallback onPressed;
  final String title;
  final double? height;
  final double? width;

  const CustomAppButton({
    required this.onPressed,
    required this.title,
    this.height = 64, 
    this.width = 284, 
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: width, // Force button to have this width
      height: height, // Force button to have height
      child: ElevatedButton(
        onPressed: onPressed,
        style: ElevatedButton.styleFrom(
          backgroundColor: Colors.white,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20),
          ),
        ),
        child: Text(
          title,
          style: const TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.bold,
            color: Colors.black,
          ),
        ),
      ),
    );
  }
}

如何解决此问题并使按钮达到该尺寸？

Answer 1

您只需要确保按钮符合您传递的宽度和高度。您可以通过在按钮的样式中添加最小尺寸来做到这一点。

ElevatedButton(
    onPressed: onPressed,
    style: ElevatedButton.styleFrom(
      minimumSize: Size(width ?? 284, height ?? 64), // This line ensures the size
      backgroundColor: Colors.white,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20),
      ),
    ),
    child: Text(
      title,
      style: const TextStyle(
        fontSize: 16,
        fontWeight: FontWeight.bold,
        color: Colors.black,
      ),
    ),
  )

基本上，ElevatedButton.styleFrom() 中的 minimumSize 确保按钮具有您想要的宽度和高度。这应该可以解决您的问题！