Override widget style in Flutter

7,259

Solution 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!

Solution 2

You can extract your already customized widget and then use it everywhere.

Here you have 03 possibilities :

Use it like Local Variable , Widget or Method .

1- Local Variable
Code :

var raisedButton = 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)),
      onPressed: null,
    );

Usage:

Container(child: raisedButton),

2-Method

Code :

RaisedButton buildRaisedButton(BuildContext context) {
    return 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)),
          onPressed: null,
        );
  }

Use:

Container(child: buildRaisedButton(context)),

3- Widget

Code:

 class MyRaisedButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return 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)),
            onPressed: null,
          );
  }
}

Use:

Container( child: MyRaisedButton()),

Note that you can do it quickly by clicking on your widget and do (ctrl +).

The result will be:

enter image description here

Share:
7,259
Matt
Author by

Matt

Always ready to learn whatever is needed to get the job done.

Updated on December 08, 2022

Comments

  • Matt
    Matt 11 months

    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).

  • Matt
    Matt almost 5 years
    Ahh okay I was looking in the wrong place; giving it a try now. Looking over the code, is there a reason elevation is included in the call to super instead of in the build method with the other properties? Just curious.
  • Hemanth Raj
    Hemanth Raj almost 5 years
    Yes, I'm passing down the properties to the super class. This is important and you can see I'm reusing the build method of super class.