How to Change Border Color of ElevatedButton in Flutter

We already know how to add an ElevatedButton in flutter and how to change the background color of the ElevatedButton. In this blog post, let’s check how to change border color of an Elevated Button in flutter.

The style parameter and the styleFrom method should be used to change the default style of the elevated button. We can change the border color using BorderSide class. See the code snippet given below.

ElevatedButton(onPressed: () {},
  style: ElevatedButton.styleFrom(side: BorderSide(width: 5.0, color: Colors.red,)),
  child: Text('Elevated Button'))

Following is the complete example to change border color of the elevated button in flutter.


import 'package:flutter/material.dart';
void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter ElevatedButton Border Color Example',
      home: FlutterExample(),
    );
  }
}

class FlutterExample extends StatelessWidget {
  FlutterExample({Key key}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
          child: Padding(
            padding: EdgeInsets.all(30),
            child:ElevatedButton(onPressed: () {},
                  style: ElevatedButton.styleFrom(side: BorderSide(width: 5.0, color: Colors.red,)),
                  child: Text(' Elevated Button'))),));
}

}

Following is the output of this flutter tutorial.

I hope this tutorial will be helpful for you.

Leave a Comment

Your email address will not be published. Required fields are marked *