Flutter Set Border on ElevatedButton

In flutter ElevatedButton supports all of styling properties and one of them is applying outline border. We can add border to ElevatedButton using BorderSide() property of side in Style. We can set border width and border color as per our choice.

Flutter Set Border on ElevatedButton:

1. Creating ElevatedButton with simple border.

ElevatedButton(
            style: ElevatedButton.styleFrom(
                fixedSize: const Size(160, 50),
                backgroundColor: Colors.purple,
                textStyle: const TextStyle(
                  fontSize: 21,
                ),
                side: const BorderSide(width: 3, color: Colors.red)),
            onPressed: temp,
            child: const Text(
              'Button',
              textAlign: TextAlign.center,
            ),
          ),

In above code we are using side: const BorderSide(width: 3, color: Colors.red)) property which is drawing 3 pixels width border with color red around our button. We can pass width and color as our choice here.

Button Screenshot:

2. Creating Button with Rounded Corner border.

 ElevatedButton(
            style: ElevatedButton.styleFrom(
              fixedSize: const Size(160, 50),
              backgroundColor: Colors.pink,
              textStyle: const TextStyle(
                fontSize: 21,
              ),
              side: const BorderSide(width: 3, color: Colors.blue),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(18.0)),
            ),
            onPressed: temp,
            child: const Text(
              'Button',
              textAlign: TextAlign.center,
            ),
          ),

In above code we are passing same side property but also including Shape property which make our corner rounded.

Screenshot of button:

3. Complete source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(const App());

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

  void temp() {
    print('onPress Called...');
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: Center(
                    child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
          ElevatedButton(
            style: ElevatedButton.styleFrom(
                fixedSize: const Size(160, 50),
                backgroundColor: Colors.purple,
                textStyle: const TextStyle(
                  fontSize: 21,
                ),
                side: const BorderSide(width: 3, color: Colors.red)),
            onPressed: temp,
            child: const Text(
              'Button',
              textAlign: TextAlign.center,
            ),
          ),
          const SizedBox(height: 10),
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              fixedSize: const Size(160, 50),
              backgroundColor: Colors.pink,
              textStyle: const TextStyle(
                fontSize: 21,
              ),
              side: const BorderSide(width: 3, color: Colors.blue),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(18.0)),
            ),
            onPressed: temp,
            child: const Text(
              'Button',
              textAlign: TextAlign.center,
            ),
          ),
        ])))));
  }
}

Screenshot of app: