Elevated Button height not increasing

Question

Since Raised button is deprecated I replaced with Elevated Button. But I can't increase Elevated button's height.

class ZuzuButton extends StatelessWidget {
final Function onTapped;
final String name;
final double height;
final TextStyle textStyle;
final double radius;
final List<BoxShadow> shadow;
final Color color;
final bool enable;
ZuzuButton({this.onTapped,@required this.name,
  this.height,this.textStyle,this.radius,this.shadow,this.color,this.enable=true});
@override
Widget build(BuildContext context) {
  return Container(
    height: height==0?48.0:height,
    decoration: new BoxDecoration(
      borderRadius: BorderRadius.circular(radius!=null?radius:30.0),
      border: enable? Border.all(
        width: color!=null?0.0:1.0,
        color: color!=null?color:Color(0x407F16F0),
      ):null,
      boxShadow: enable?(shadow==null?[
        BoxShadow(
          color: Color(0x407F16F0),
          offset: Offset(0.0, 8.0),
          spreadRadius: 0,
          blurRadius: 20,
        ),
      ]:shadow):null,
    ),
    child: ElevatedButton(
      child: Container(
        child: Center(
          child: Text(name,style: textStyle!=null?textStyle:null,),
        ),
        height: height==0?48.0:height,
      ),
      onPressed: enable?onTapped:null,
      style: ButtonStyle(
        elevation:  MaterialStateProperty.resolveWith<double>(
              (Set<MaterialState> states) {
            return 0.0;
          },
        ),
        backgroundColor: MaterialStateProperty.resolveWith<Color>(
              (Set<MaterialState> states) {
            if (states.contains(MaterialState.pressed))
              return Color(0xffF7E86C);
            return enable?(color!=null?color:null):Color(0xffDBD9D2); // Use the component's default.
          },
        ),
        textStyle: MaterialStateProperty.resolveWith<TextStyle>(
              (Set<MaterialState> states) {
            if (states.contains(MaterialState.pressed))
              return ZuzuTopography.FF2_Button_Bold.copyWith(color: Colors.black);
            return ZuzuTopography.FF2_Button_Bold.copyWith(color: Colors.white); // Use the component's default.
          },
        ),
        shape: MaterialStateProperty.resolveWith<OutlinedBorder>(
              (Set<MaterialState> states) {
            // if (states.contains(MaterialState.pressed))
            //   return radius!=null? RoundedRectangleBorder(
            //           borderRadius: BorderRadius.circular(radius),
            //       ):null;
            return RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(radius!=null?radius:30.0),
            ); // Use the component's default.
          },
        ),
      ),

    ),
  );
}
}

My output.

How to make this button occupy its container height? I searched internet for solutions but could not found any solutions. Any suggestions in my code? Is there any alternative for Raised Button other than Elevated Button.

Hubert

Have you try button theme widget? – Balkh

Answer 1

You can use ConstrainedBox for doing the same. Please refer below code for the reference.

ConstrainedBox(
            constraints: BoxConstraints.tightFor(width: 300, height: 200),
            child: ElevatedButton(
              child: Text('300 x 200'),
              onPressed: () {},
            ),
          ),

Balkh

Answer 2

I just started using Elevated Button. For me I just change the height using this:

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    minimumSize: Size(width, height) // put the width and height you want, standard ones are 64, 40
  ),
  child: Text("NEXT"),
)

Lillylillywhite

Any way to add just the min height without adding width? – Leekgreen

@petrasJ not that I've found, but I went around this by setting the width to a low number anyway; it had the same effect (if less beautiful than I'd like) – Buffo

Answer 3

Use SizeBox with width and height parameters.

SizedBox(
      width: double.infinity,
      height: 55.0, 
      child: ElevatedButton(
      ),
    );

Moisesmoishe

Answer 4

You can simply use fixedSize(width, height). Here is a sample

            ElevatedButton(
                onPressed: () {},
                child: Text(
                  'submit',
                  
                ),
                style: ElevatedButton.styleFrom(
                  fixedSize: Size(90, 15),
                  primary: Colors.deepOrange,
                 
                ),
              )

Jinks

Answer 5

You can use minimumSize property of an elevated button instead of SizedBox:

ElevatedButton(
        style: ElevatedButton.styleFrom(
            elevation: 0,
            minimumSize: Size(100, 48), // Size(width, height)
            backgroundColor: AppColors.primary,
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8))),
        child: Text("Button Text", style: textTheme.button),
        onPressed: (){},
      ),

Splice