Question 75344 in Flutter Question posted in
The official Flutter documentation can be found here.

How to disable Elevated Button Border – Flutter

enter image description here

How to remove disable border side Elevated Button. Previously I used Flat Button. After I use the new SDK Version. There are some function buttons that I cannot use. Raised button and Flat button one of them.

Code:

ElevatedButton(
              style: ElevatedButton.styleFrom(
                primary: Colors.white,
                padding: EdgeInsets.fromLTRB(30, 5, 30, 5),
                side: BorderSide(width: 0, color: Colors.white),
              ),
              child: Align(
                alignment: Alignment.center,
                child: Text('Dashboard',
                    style: TextStyle(
                        color: Colors.black87,
                        fontSize: 16,
                        fontWeight: FontWeight.normal)),
              ),
              
            ),

Back to my question. Is there a way for me to disable the border side Elevated Button?

Tags:

3

Answers


  1. 0

    Try adding elevation:0 to your button

    ElevatedButton(
                          style: ElevatedButton.styleFrom(
                            elevation: 0,
                            primary: Colors.white,
                            padding: EdgeInsets.fromLTRB(30, 5, 30, 5),
                            side: BorderSide(width: 0, color: Colors.white),
                          ),
                          onPressed: () {},
                          child: Align(
                            alignment: Alignment.center,
                            child: Text('Dashboard',
                                style: TextStyle(color: Colors.black87, fontSize: 16, fontWeight: FontWeight.normal)),
                          ),
                 ),
    Login or Signup to reply.
  2. 0

    Two things to consider:

    1. TextButton is alternative to FlatButton in new docs.
    2. In your code change elvation to 0 to make it work as FlatButton.

    Explanation:

    1. Apparently it is elevation which you have misunderstood as border.
      Try setting it to 0.

    Updated Code

               ElevatedButton(
              onPressed: () {},
              style: ElevatedButton.styleFrom(
                elevation: 0, // 👈 Add this
                // primary: Colors.white, Try avoiding this as it is deprecated
                padding: EdgeInsets.fromLTRB(30, 5, 30, 5),
                side: BorderSide(width: 0, color: Colors.white),
              ),
              child: Align(
                alignment: Alignment.center,
                child: Text('Dashboard',
                    style: TextStyle(
                        color: Colors.black87,
                        fontSize: 16,
                        fontWeight: FontWeight.normal)),
              ),
            ),

    Before:
    enter image description here

    After:
    enter image description here

    1. Adding on further

    enter image description here

    Replacement of Flat Button is Text Button. For further details refer https://docs.flutter.dev/release/breaking-changes/buttons

    Login or Signup to reply.
  3. 0

    If you don’t want border or elevation, perhaps you should not use ElevatedButton, but instead a TextButton.

    TextButton is the new FlatButton.

    Check the official documentation on TextButton.

    Differences:

    Row(
  children: [
    TextButton(
      onPressed: () {},
      child: Text('TextButton'),
    ),
    ElevatedButton(
      onPressed: () {},
      child: Text('ElevatedButton #1'),
    ),
    ElevatedButton(
      style: ElevatedButton.styleFrom(
        elevation: 0,
        backgroundColor: Colors.white,
        foregroundColor: Colors.blue,
      ),
      onPressed: () {},
      child: Text('ElevatedButton #2'),
    )
  ],
),

    Not pressing last button:

    enter image description here

    Pressing last button:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search