close

How to Change Border Color of ElevatedButton in Flutter

Hello Guys How are you all? Hope You all are fine. As recently RaisedButton is deprecated so we have to use ElevatedButton. Here in this tutorial we are going to learn How to Change Border Color of ElevatedButton in a flutter. So today Here I come with all possible Methods to change border color. let’s start this tutorial without wasting your time.

How to Change Border Color of ElevatedButton in Flutter

  1. How to Change Border Color of ElevatedButton in Flutter?

    to Change Border Color of ElevatedButton in Flutter ElevatedButton has style Property so we can use the styleFrom method should be used to change the default style of the elevated button. We can change the border color using BorderSide class.

  2. Change Border Color of ElevatedButton in Flutter

    to Change Border Color of ElevatedButton in Flutter ElevatedButton has style Property so we can use the styleFrom method should be used to change the default style of the elevated button. We can change the border color using BorderSide class.

ElevatedButton has style Property so we can use the styleFrom method should be used to change the default style of the elevated button. We can change the border color using BorderSide class.

      ElevatedButton(
          onPressed: () {},
          style: ElevatedButton.styleFrom(
            side: BorderSide(
              width: 5.0,
              color: Colors.orange,
            ),
          ),
          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: 'Change ElevatedButton Border Color - FlutterCorner.com',
      home: MyApp(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "Change ElevatedButton Border Color - FlutterCorner.com",
        ),
      ),
      body: Center(
        child: Padding(
          padding: EdgeInsets.all(30),
          child: ElevatedButton(
            onPressed: () {
              print("ButtonPress");
            },
            style: ElevatedButton.styleFrom(
              side: BorderSide(
                width: 5.0,
                color: Colors.orange,
              ),
            ),
            child: Text('Elevated Button Border Color'),
          ),
        ),
      ),
    );
  }
}

Here Is output.

How to Change Border Color of ElevatedButton in flutter

Summery

So, It’s All About How to Change Border Color of ElevatedButton in Flutter. I hope this tutorial helps you to Solve your error. Please Comment Below if You stucks anywhere with my code. And please comment below on which solution worked for you. Thank You.

Also Check Out Below Tutorials

Leave a Comment