Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change outline button size?

Tags:

flutter

dart

This is a silly question but I am new in Flutter. So I hope you guys can help me with this. Is there a way for me to change the size of the button in flutter?

Rectangular shape:

      OutlineButton(
        child: Text(forgot_password, style: TextStyle(color: colorWhite)),
        borderSide: BorderSide(
          color: colorWhite,
          style: BorderStyle.none,
          width: 0.8,
        ),
        onPressed: () {},
      ),

Circular shape:

      OutlineButton(
            onPressed: () {},
            child: Icon(
              FontAwesomeIcons.google,
              color: colorWhite,
              size: 20.0,
            ),
            shape: CircleBorder(),
            borderSide: BorderSide(
              color: colorWhite,
              style: BorderStyle.solid,
              width: 1,
            ),
          ),
like image 978
MRu Avatar asked May 05 '19 06:05

MRu


People also ask

How do you change the size of an outline button?

We can control the size of an outlined button by using the fixedSize option of the styleFrom static method.

How do I increase the size of my button flutters?

If the button is placed in a Flex widget (including Row & Column ), you can wrap it using an Expanded Widget to fill the available space.

How do you style an outlined button on a Flutter?

To change the Outlined Button color in Flutter, simply set the style property of Outlined Button from the OutlinedButton. styleFrom() static method and set the backgroundColor property to change background color and primary property to change the text color.


4 Answers

You can use "ButtonTheme" to change size of buttons like below:

For Rectangular shape:

ButtonTheme(
          minWidth: 200.0,
          height: 100.0,
            child:   OutlineButton(
              child: Text('forgot_password', style: TextStyle(color: Colors.green)),
              borderSide: BorderSide(
                color: Colors.amber,
                style: BorderStyle.solid,
                width: 1.8,
              ),
              onPressed: () {},
            ),
          ),

For Circular shape:

ButtonTheme(
          minWidth: 200.0,
          height: 100.0,
          child: OutlineButton(
            onPressed: () {},
            child: Icon(
              Icons.screen_lock_portrait,
              color: Colors.redAccent,
              size: 40.0,
            ),
            shape: CircleBorder(),
            borderSide: BorderSide(
              color: Colors.blue,
              style: BorderStyle.solid,
              width: 1,
            ),
          ),
        )

Also you can use Container as well SizedBox as below:

Container

Container(
          width: 200.0,
          height: 100.0,
          child: OutlineButton(
            child: Text('Login', style: TextStyle(color: Colors.green)),
            borderSide: BorderSide(
              color: Colors.amber,
              style: BorderStyle.solid,
              width: 1.8,
            ),
            onPressed: () {},
          ),
        ),

SizedBox

SizedBox(
          width: 200.0,
          height: 100.0,
          child: OutlineButton(
            child: Text('Login', style: TextStyle(color: Colors.green)),
            borderSide: BorderSide(
              color: Colors.amber,
              style: BorderStyle.solid,
              width: 1.8,
            ),
            onPressed: () {},
          ),
        ),
like image 56
android Avatar answered Nov 10 '22 03:11

android


You can use the ButtonTheme or a SizedBox like below

ButtonTheme(
  width: 100.0,
  height: 50.0,
  child: OutlineButton(
    child: Text('forgot_password', style: TextStyle(color: Colors.green)),
    borderSide: BorderSide(
      color: Colors.amber,
      style: BorderStyle.solid,
      width: 1.8,
    ),
    onPressed: () {},
  )
)
Container(
  width: 100.0,
  height: 50.0,
  margin: EdgeInsets.symmetric(vertical: 3.0),
  child: SizedBox.expand(
    child: OutlineButton(
      child: Text('forgot_password', style: TextStyle(color: Colors.green)),
      borderSide: BorderSide(
        color: Colors.amber,
        style: BorderStyle.solid,
        width: 1.8,
      ),
      onPressed: () {},
    )
  )
)
like image 24
Neli Avatar answered Nov 10 '22 01:11

Neli


This is what I found working for me. I have used fixedSize property of OutlinedButton.styleFrom.

OutlinedButton.icon(
   style: OutlinedButton.styleFrom(
   fixedSize: Size(10, 40),
   alignment: AlignmentDirectional(-1.0, 0),
                      side: BorderSide(
                      width: 1,
                      color: Colors.black38,
                      style: BorderStyle.solid)),
             onPressed: () {},
             label: Text("Login with Facebook"),
             icon: Icon(Icons.facebook),
  ),
like image 44
Rohit Mandiwal Avatar answered Nov 10 '22 01:11

Rohit Mandiwal


You can use minimumSize and maximumSize properties of your Button's style property. This way you don't need to wrap the Button inside another SizedBox, Container, ButtonTheme, etc.

  OutlinedButton(
    style: OutlinedButton.styleFrom(
      minimumSize: Size.fromHeight(45),
    ),
    child: Text('Close'),
    onPressed: () => Navigator.of(context).pop(),
  )

Here I set the minimum height to 45, which in most cases will be the exact height.

Of course you can do this in your app's theme, and make it effective for the whole app.

like image 40
Ashkan Sarlak Avatar answered Nov 10 '22 01:11

Ashkan Sarlak