Override widget style in Flutter

Question

Problem: How can I automatically (if possible) style all RaisedButton widgets in my app a certain way?

---

I am converting an app from native Android to Flutter. In this application, all primary action buttons are rounded, gray, and have a white border. In Android, this was as simple as defining a style in styles.xml and setting <Button style="MyPrimaryButton"/>.

In Flutter, on the other hand, I can only find examples (including the one from the theming docs) that set individual properties using property: Theme.of(context).property and there doesn't seem to be a way to pass style properties other than colors and fonts.

Below is the style I would like to use for all RaisedButton widgets:

RaisedButton(
  color: Theme.of(context).accentColor,
  elevation: 0,
  shape: new RoundedRectangleBorder(
    side: BorderSide(color: Colors.white, width: 1.0, style: BorderStyle.solid),
    borderRadius: new BorderRadius.circular(30)),
)

This purportedly similar question was closed as primarily opinion-based but I am not asking for your opinion. I am asking if there is a way to style these buttons, preferably that does not involve copy-pasting the widget source code into my own class as the accepted answer recommends (though if that is still the only way to do it then that may very well be the answer).

Answer 1

You can actually achieve it by extending RaisedButton class and overriding the default properties that you need.

Example:

class Sample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: MyButton(onClicked: () => null,child: Text('Sample'),),
      ),
    );
  }
}

class MyButton extends RaisedButton {
  const MyButton({@required this.onClicked, this.child})
      : super(onPressed: onClicked, elevation: 0.0, child: child);

  final VoidCallback onClicked;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: Theme.of(context).copyWith(
        buttonColor: Theme.of(context).accentColor,
        buttonTheme: Theme.of(context).buttonTheme.copyWith(
              shape: RoundedRectangleBorder(
                side: const BorderSide(
                  color: Colors.white,
                  width: 1.0,
                  style: BorderStyle.solid,
                ),
                borderRadius: BorderRadius.circular(30),
              ),
            ),
      ),
      child: Builder(builder: super.build),
    );
  }
}

Use MyButton where ever you wanted RaisedButton with your style.

Hope this helps!