How to change border color and width of OutlineButton globally?

Question

I need to change the border color and width of the OutlineButton, I know one way of doing this by directly mentioning it inline as below:

OutlineButton(
  child: Text('SIGN IN'),
  padding: EdgeInsets.all(8.0),
  onPressed: handleSignIn,
  borderSide: BorderSide(
    color: Colors.white, //Color of the border
    style: BorderStyle.solid, //Style of the border
    width: 1, //width of the border
  ),
)

If I do it as mentioned below, it's effecting FlatButton and RaisedButton and this is NOT effecting OutlineButton.

MaterialApp(
  title: 'MyApp',
  theme: ThemeData(
    buttonTheme: ButtonThemeData(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20),

        // this effects to FlatButton and RaisedButton
        side: BorderSide(
          color: Colors.white, //Color of the border
          style: BorderStyle.solid, //Style of the border
          width: 1, //width of the border
        ),
      ),
    ),
  ),
);

So, How to change border color and width ONLY of OutlineButton globally (through out the app)?

Answer 1

I don't think you can do for that in OutlineButton. So, what i can suggest you is to create a global theme data in a global file.

var borderData=BorderSide(
    color: Colors.white, //Color of the border
    style: BorderStyle.solid, //Style of the border
    width: 1, //width of the border
  )

Then you can easily use it any class just by importing that global file.

OutlineButton(
  child: Text('SIGN IN'),
  padding: EdgeInsets.all(8.0),
  onPressed: handleSignIn,
  borderSide: borderData,
)

This will reduce your boiler plate code in your case.

Answer 2

Unless borderSide is explicitly added to the OutlineButton, it will default to a width of 1.0, a style of solid and this color:

Theme.of(context).colorScheme.onSurface.withOpacity(0.12)

You have the option of changing onSurface of your app theme, but that will affect other widgets as well.

You can do what Jay suggested in the other answer, but my preference would be to create a different widget. This way, if you ever want to change anything else to all of your OutlineButtons in the future, you only need to change your custom widget:

import 'package:flutter/material.dart';

class OutlineButton2 extends OutlineButton {
  const OutlineButton2({
    Key key,
    @required VoidCallback onPressed,
    Widget child,
  }) : super(
    key: key,
    onPressed: onPressed,
    child: child,
    borderSide: const BorderSide(
      color: Colors.white,
      style: BorderStyle.solid,
      width: 1,
    ),
  );
}