Home > front end >  Size of the button - Flutter
Size of the button - Flutter

Time:10-22

I am making a button using flutter, but i don't know how to make it bigger. Here is the code:

'''

        ElevatedButton(
        onPressed: () {},
        style: ButtonStyle(
              foregroundColor: MaterialStateProperty.all<Color>(Colors.blue),
              backgroundColor: MaterialStateProperty.all<Color>(Colors.white),
              minimumSize: MaterialStateProperty.all(Size(80, 40)),
              shape: MaterialStateProperty.all(
              RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(30.0),
                side: BorderSide(width: 3, color: Color.fromARGB(0, 0, 0, 0)),
  ),
),

'''

This is how it looks like:

enter image description here

This is how I want:

enter image description here

CodePudding user response:

you can wrap your button with SizedBox() widget like this:

SizedBox( 
     height:50, //height of button
     width:150, //width of button
     child:ElevatedButton(
            onPressed: () {},
        style: ButtonStyle(
              foregroundColor: MaterialStateProperty.all<Color>(Colors.blue),
              backgroundColor: MaterialStateProperty.all<Color>(Colors.white),
              minimumSize: MaterialStateProperty.all(Size(80, 40)),
              shape: MaterialStateProperty.all(
              RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(30.0),
                side: BorderSide(width: 3, color: Color.fromARGB(0, 0, 0, 0)),
         ),
     )
)

CodePudding user response:

 **Try to follow this**

Container( margin: EdgeInsets.symmetric(horizontal: buttonHorizontalMargin??16,vertical: buttonVerticalMargin??16), child: ElevatedButton(

      onPressed: (){onPressed();},
      style: TextButton.styleFrom(
        foregroundColor: Colors.grey, elevation: elevation??0,
          shadowColor: shadowColor??Colors.white12,
          backgroundColor: buttonColor?? AppColor.solidPrimary,
          side: BorderSide(color:borderSizeColor??buttonColor??AppColor.solidPrimary ,width: 0.5),
          shape: RoundedRectangleBorder(borderRadius:customBorderRadius?? BorderRadius.circular(radius??24)),
          padding: EdgeInsets.symmetric(horizontal: horizontalPadding??16,vertical: verticalPadding??16)),
      child:  Text(buttonName,
          style:  TextStyle(
            color:textColor?? const Color(0xFFE7F1F4),
            fontFamily: 'quicksand_bold',
            fontWeight: FontWeight.w700,
            fontSize: size?? 16,
          ))),
)
  • Related