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 the 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 add borders and change the border color using BorderSide class. See the code snippet given below.

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

Following is the complete code to change the border color of the elevated button in Flutter.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Elevated Button Border Example'),
        ),
        body: Center(
            child: ElevatedButton(
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                    side: const BorderSide(
                  width: 5.0,
                  color: Colors.red,
                )),
                child: const Text('Elevated Button'))));
  }
}

Following is the output of this flutter tutorial.

That’s how you add the ElevatedButton border and change its color in Flutter. I hope this tutorial will be helpful for you.