CODEWITHSUNDEEP
flutterflutter-theme
Amani Elsaed
Amani Elsaed

Reputation: 1598

Flutter specify Button Theme for each button type

I am working on a Flutter app and need to specify custom ButtonTheme for each button type, i.e. raised, outlined and flat.

The parameter I found in ThemeData class is only buttonTheme, and this has ButtonThemeData that is defined for all buttons:

static ThemeData darkTheme = ThemeData(
   buttonTheme: const ButtonThemeData(
      colorScheme: ColorScheme(
        primary: Color(Constants.PrimaryColor),
        primaryVariant: Color(Constants.PrimaryVariant),
      ),
      textTheme: ButtonTextTheme.normal,
    ),
)

The question now, how can I define a separate theme for each button type to change, for example, background and text color?

Upvotes: 2

Views: 4306

Answers (2)

Abhishek Ghaskata
Abhishek Ghaskata

Reputation: 1960

class SubmitButton extends StatelessWidget {
  final String title;
  final Function onPressed;
  const SubmitButton({Key key, this.title, this.onPressed}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData(
      buttonTheme: const ButtonThemeData(
      colorScheme: ColorScheme(
        primary: Color(Constants.PrimaryColor),
        primaryVariant: Color(Constants.PrimaryVariant),
      ),
      textTheme: ButtonTextTheme.normal,
    ),   
   ),
      child: RaisedButton(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(18.0),
          side: BorderSide(color: Colors.red),
        ),
        color: Colors.red,
        // color: Colors.transparent,
        // disabledColor: Colors.grey
        textColor: Colors.white,
        onPressed: onPressed,
        child: Container(
          child: Text(title),
        ),
      ),
    );
  }
}

here you can replace RaisedButton with FlatButton or outlinedButton and give a particular theme to all types of buttons. so you can reuse it.

and you can use it like this:

   SubmitButton(
                  title: "View Details",
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (_) => GeneratePDF(),
                      ),
                    );
                  },
                ),

Upvotes: 2

Romeo
Romeo

Reputation: 1185

In my opinion the best way is to create your own custom widget behaving as a button. You will have more control on what the button will do. https://flutter.dev/docs/development/ui/interactive This way you will be able to define custom callbacks and avoid the standard behavior of the usual buttons. For example if you want a different animation for a specific button.

class MyFlatButtonCustomWidget extends Stateless/Stateful {

  @override
  Widget build(BuildContext context) {
   return Container{
      // create the shape of a button and add your custom widget tree and behavior
    } 
  }

}

Another way could be creating a custom widget that extends a default one:

class MyFlatButton extends FlatButton {

}

But you could also simply have

class MyFlatButton {

  @override
  Widget build(BuildContext context) {
   return FlatButton{
      // put your stylings here
    } 
  }

}

If you want you can define the theme of buttons when you define the ThemeData https://api.flutter.dev/flutter/material/ThemeData-class.html

theme: ThemeData(
       primarySwatch: Colors.green,
       splashColor: Colors.pink,
       buttonTheme: ButtonThemeData(
        // splashColor:Colors.pink,   //we don't define the splashColor in ButtonThemeDaa
        height:60
      )
   ),

As a source I used: https://www.ernegonzal.com/theme-flutter-buttons/ a nice article covering this topic.

Upvotes: 2

Related Questions