CODEWITHSUNDEEP
flutterdartbuttonheight
BLB
BLB

Reputation: 893

Elevated Button height not increasing

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. enter image description here

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.

Upvotes: 16

Views: 26643

Answers (5)

DanielSeow
DanielSeow

Reputation: 426

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

Upvotes: 27

Pranav Dave
Pranav Dave

Reputation: 804

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: (){},
      ),

Upvotes: 0

Dimal Govinnage
Dimal Govinnage

Reputation: 143

Use SizeBox with width and height parameters.

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

Upvotes: 10

Godwin
Godwin

Reputation: 638

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

Upvotes: 4

Avinash
Avinash

Reputation: 597

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: () {},
            ),
          ),

Upvotes: 11

Related Questions