CODEWITHSUNDEEP
flutterdart
Lucky Ugwu
Lucky Ugwu

Reputation: 73

How to remove default padding in OutlinedButton?

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.

Upvotes: 0

Views: 477

Answers (3)

Abhijith
Abhijith

Reputation: 2327

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

Upvotes: 1

Daniel Riffert
Daniel Riffert

Reputation: 46

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

Upvotes: 1

Harsh Sureja
Harsh Sureja

Reputation: 1394

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

       Column(
        mainAxisSize: MainAxisSize.min
        ...

Upvotes: 1

Related Questions