Flutter- Adding Padding to OutlinedButton widget

2,236

Both OutlinedButton and ElevatedButton have a styleFrom method you can use to set things like padding, color, and shape:

 OutlinedButton(
          child: Text('Padded Button'),
          onPressed: (){
            
          },
          style: OutlinedButton.styleFrom(
            padding: EdgeInsets.all(8),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(16)
            )
          ),
        )
Share:
2,236
Admin
Author by

Admin

Updated on December 29, 2022

Comments

  • Admin
    Admin about 1 year

    I have problem adding pad for the OutlinedButton, I have been using OutlineButton and I have decided to OutlinedButton because the button is depreciated. However, the usage of the button is different where the padding parameter is undefined. I have tried wrapping OutlinedButton in ButtonTheme but it does not have any effect and now I am using Padding as shown in the code example below.

    new Column(children: [
                  new Row(children: [
                    //5th row
                    new Expanded(
                      child: Padding(
                          child: new OutlinedButton(
                        child: new Text(
                          "Main Page",
                          style: TextStyle(
                              fontFamily: 'NotoSans',
                              fontSize: 20.0,
                              fontWeight: FontWeight.w400),
                        ),
                        onPressed: () {
                          Navigator.of(context).push(_gotoMainPage());
                        },
                        padding: EdgeInsets.all(20),
                      )),
                    )
                  ]),
                ])
              ],
            ),
    

    Thanks in advance.

    • Craig
      Craig almost 3 years
      Do you mean that with the way you have shown your code in your question, you're still not seeing what you expect to see? Have you tried putting the "Padding" widget as the child of the "OutlinedButton", and then your "Text" widget as the child of the "Padding"? I've found that Flutter can be an awful lot of "try it and see", until you get the desired result