How to reduce size of raisedButton in flutter?

Question

I want to reduce the size of raisedbutton. By default it is 88*36. I want smaller buttons on screen. The outcome is like above:

Code for each button is like below:

ButtonTheme(
            minWidth: 20,
            height: 22,
            child: RaisedButton(
              textColor: Colors.black87,
              color: Colors.blue,
              child: Text(
                "31",
              ),
              onPressed: () {},
            ),
          )

But, what is happening is, even though i am able to see button of size 20*22, button is getting clicked even when I click around the button. (In the space between two buttons)

Am I doing it the correct way?

Does this answer your question? [Flutter button, unwanted extra top and bottom padding](https://stackoverflow.com/questions/54938971/flutter-button-unwanted-extra-top-and-bottom-padding) — chunhunghan, Apr 15 '20 at 01:43

Blasanka · Answer 1 · 2020-04-18T03:27:22.513

0

It should work with ButtonTheme but you can wrap with parent widget like SizedBox to match to parent size:

SizedBox(
  width: 60,
  child: RaisedButton(
      textColor: Colors.black87,
      //..
  ),
)

Using ButtonTheme:

ButtonTheme(
  padding: new EdgeInsets.all(0.0),
  minWidth: 60,
  child: RaisedButton(
      textColor: Colors.black87,
      //..
  ),
),

edited Apr 18 '20 at 03:27

answered Apr 15 '20 at 02:10

Blasanka

21,001
12
102
104

How to reduce size of raisedButton in flutter?

1 Answers1