flutter - How to change OutlinedButton border color

Flutter - OutlinedButton Border Color

The OutlinedButton class represents a material design outlined button that is essentially a TextButton with an outlined border. The outlined buttons are medium-emphasis buttons. In a flutter application, the OutlinedButtons contain actions that are important, but they are not the primary action in an app. An OutlinedButton widget’s default style is defined by defaultStyleOf. The flutter application developers can override the OutlinedButton’s style with its style parameter. An OutlinedButton has a default ButtonStyle.side which defines the appearance of the outline. The flutter app developers can specify an OutlinedButton's shape and the appearance of its outline by specifying both the ButtonStyle.shape and ButtonStyle.side properties.

The following flutter application development tutorial will demonstrate how to set or change the OutlinedButton widget’s border color. Here we will use the OutlinedButton class’s styleFrom() method to change the OutlinedButton’s border color. Here we also add padding to the OutlinedButton widget.

The OutlinedButton class’s styleFrom() method is a static convenience method that constructs an outlined button ButtonStyle given simple values. By default, OutlinedButton class styleFrom() method returns a ButtonStyle that doesn't override anything.

The ButtonStyle class represents the visual properties that most buttons have in common. The ButtonStyle class’s all properties are null by default.

The flutter developers can change the OutlinedButton’s border color by passing a value to the styleFrom() method’s side parameter.

The styleFrom() method’s side parameter value is a BorderSide instance. The BorderSide class represents a side of a border of a box. The BorderSide class color property value is a Color that is the color of this side of the border. We can pass a value to this color property to change an OutlinedButton’s border color.

So finally, the flutter app developers can change an OutlinedButton widget’s border color by calling its styleFrom() static method. They have to set a BorderSide instance to its side parameter value. They also have to set the color property value for the BorderSide instance which color they want to use for drawing the OutlinedButton border color.

main.dart

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Example',
        theme: ThemeData(primarySwatch: Colors.green),
        home: const StateExample()
    );
  }
}

class StateExample extends StatefulWidget {
  const StateExample({Key? key}) : super(key: key);

  @override
  _StateExampleState createState() => _StateExampleState();
}

class _StateExampleState extends State<StateExample>{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFFEFEFA),
      appBar: AppBar(
          title: const Text("Flutter - OutlinedButton Border Color")
      ),
      body: bodyContent(),
    );
  }


  bodyContent() {
    return Center(
      child: OutlinedButton(
        child: const Text("Click Here"),
        style: OutlinedButton.styleFrom(
            side: const BorderSide(color: Colors.pink),
            padding: const EdgeInsets.all(20)
        ),
        onPressed: (){
          // do something here
        },
      ),
    );
  }
}