skip to Main Content

I am trying to change the size of a custom Button in my app but the size (width) stays the same no matter what I do

enter image description here

My code can be found here:

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,
          ),
        ),
      ),
    );
  }
}

How do I fix this and get the button to be that size?

2

Answers


  1. you just need to make sure that the button respects the width and height you’re passing. You can do that by adding the minimumSize in the button’s style.

    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,
          ),
        ),
      )
    

    Basically, the minimumSize inside ElevatedButton.styleFrom() makes sure the button will have the width and height you want. This should fix your problem!

    Login or Signup to reply.
  2. Wrap Elevated button with FractionallySizedBox Widget..

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search