How to add Border to ElevatedButton?

Hello guys how are you all? Hope you all are fine. As we know RaisedButton is deprecated and the Elevated button is replacing Raised Button widget with its new features. Here in this tutorial, we are going to learn How to add Border to ElevatedButton in Flutter.

How to add Border to ElevatedButton?

To add Border to ElevatedButton so we can use ElevatedButton.styleFrom’s side property which requires BorderSide. You can simply give side to BorderSide(color: Colors.red, width: 5). Let’s explore examples.

Example

           ElevatedButton(
              child: Text(
                'FlutterCorner.com',
                style: TextStyle(
                  color: Colors.black,
                ),
              ),
              style: ElevatedButton.styleFrom(
                primary: Colors.yellow,
                onPrimary: Colors.white,
                side: BorderSide(color: Colors.red, width: 5),
              ),
              onPressed: () {
                print('Button Pressed');
              },
            )

Output

Faq

Summery

So it’s all About this tutorial. Hope this above-all solution helped you a lot. Comment below Your thoughts and your queries. Comment Below on your suggestion.

Check Out Below Article

• FlutterFirebaseCorePlugin.java uses or overrides a deprecated API
• Error: The method ‘inheritFromWidgetOfExactType’ isn’t defined for the class ‘BuildContext’
• The iOS Simulator deployment targets is set to 8.0, but the range of supported deployment target version for this platform is 9.0 to 14.1
• Unhandled Exception: InternalLinkedHashMap‘ is not a subtype of type ‘List
• How to solve Execution failed for task ‘:app:compileFlutterBuildDebug’ in Flutter