CODEWITHSUNDEEP
dartflutter
MRu
MRu

Reputation: 1395

How to change outline button size?

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

Upvotes: 15

Views: 36771

Answers (6)

Sezai Kadayıfçı
Sezai Kadayıfçı

Reputation: 11

This is what I found working for me. I have used fixedSize property of ButtonStyle:

 OutlinedButton(
        style: ButtonStyle(
          fixedSize: MaterialStatePropertyAll(
            Size(270, 300),
          ),
          backgroundColor: const MaterialStatePropertyAll(Colors.white),
          shape: MaterialStatePropertyAll(
            RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(20),
            ),
          ),
        ),
      ),

Upvotes: 1

Ebuzer SARIYERLİOĞLU
Ebuzer SARIYERLİOĞLU

Reputation: 828

You can use the Size widget.

style: OutlinedButton.styleFrom(
                padding: const EdgeInsets.all(0),
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(3)
                ),
              minimumSize: Size.fromHeight(100)
            ),

Upvotes: 0

Ashkan Sarlak
Ashkan Sarlak

Reputation: 7344

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.

Upvotes: 5

Rohit Mandiwal
Rohit Mandiwal

Reputation: 10462

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

Upvotes: 3

android
android

Reputation: 3090

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: () {},
          ),
        ),

Upvotes: 27

Neli
Neli

Reputation: 741

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: () {},
    )
  )
)

Upvotes: 8

Related Questions