Flutter specify Button Theme for each button type

Issue

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?

Solution

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(),
                      ),
                    );
                  },
                ),

Answered By – Abhishek Ghaskata

Answer Checked By – Gilberto Lyons (FlutterFixes Admin)