Question 76688 in Flutter Question posted in
The official Flutter documentation can be found here.

How to remove default padding in OutlinedButton? – Flutter

I want to remove the default padding from an outlined button. This is my code;

SizedBox(
    width: 150.0,
    child: OutlinedButton(
      onPressed: () {
        setState(() {
          selected = index;
        });
      },
      style: OutlinedButton.styleFrom(
        backgroundColor: (selected == index) ? color : Colors.white,
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(20),
            topRight: Radius.circular(30),
            bottomLeft: Radius.circular(20),
            bottomRight: Radius.circular(20),
          ),
        ),
      ),
      child: Row(
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(duration),
              Text(dataPlan),
              Text(price),
            ],
          ),
        ],
      ),
    ),
  );

The SizedBox is wrapped in a ListView.

This is the result I get;

OutlinedButton

I want the paddings at the left and right removed, so I can customize to my preference. Thanks.

Tags:

3

Answers


  1. 0

    Add in Column this property to reduce size of the widget.

           Column(
        mainAxisSize: MainAxisSize.min
        ...
    Login or Signup to reply.
  2. 0

    Add the following properties to the button style:

    tapTargetSize: MaterialTapTargetSize.shrinkWrap
minimumSize: Size.zero
padding: EdgeInsets.zero

    In addition, set the mainAxisSize on the Column and on the row to min:

    child: Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(duration),
        Text(dataPlan),
        Text(price),
      ],
    ),
  ],
),
    Login or Signup to reply.
  3. 0

    Just add minimumSize: Size.zero,padding: EdgeInsets.zero, in OutlinedButton.styleFrom()

     SizedBox(
        width: 150.0,
        height:100,    
        child: OutlinedButton(
          onPressed: () {
            
          },
          style: OutlinedButton.styleFrom(
            minimumSize: Size.zero, 
           padding: EdgeInsets.zero,
            backgroundColor: Colors.yellow,
            shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(20),
                topRight: Radius.circular(30),
                bottomLeft: Radius.circular(20),
                bottomRight: Radius.circular(20),
              ),
            ),
          ),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Column(
                
                children: [
                  Text("duration"),
                  Text("dataPlan"),
                  Text("price"),
                ],
              ),
            ],
          ),
        )),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search