How to Apply Theme on MaterialButton or RaisedButton In Flutter?

RaisedButton Widget is a normal button but implemented with material link spread effect upon clicking. In this article, we will go through how to apply Theme on MaterialButton or RaisedButton In Flutter?

How to Apply Theme on MaterialButton or RaisedButton In Flutter?

One way to do it is to define ButtonTheme in theme in MaterialApp.

void main() {
  runApp(MaterialApp(
    home: Home(),
    theme: ThemeData(
        accentColor: Colors.redAccent,
        buttonTheme: ButtonThemeData(
           buttonColor: Colors.blueAccent,
           shape: RoundedRectangleBorder(),
           textTheme: ButtonTextTheme.accent,
           ....
    )),
  ));
}

class Home extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text("Button Theme"),
          backgroundColor: Colors.green),
      body: Center(
          child: RaisedButton( //Button Color is as define in theme
        onPressed: () {},
        child: Text("Send"), //Text Color as define in theme
      )),
    );
  }
}

with this, all the buttons defined under this MaterialApp will carry this Theme Style.

Text Color will be the accentColor define in the ThemeData as i have defined textTheme: ButtonTextTheme.accent so it will Pick accentColor

Button picking Theme style as defined in the theme.

class MyButton extends StatelessWidget {
  final String text;
  final Color textColor;
  final Color buttonColor;
  final Function() onPressed;
  MyButton({
    @required this.text,
    this.buttonColor = const Color(0xFF000000) /** Default buttonColor */,
    @required this.onPressed,
    this.textColor = const Color(0xFFDDDDDD) /** Default textColor */,
  });
  @override
  Widget build(BuildContext context) {
    return MaterialButton(
      color: buttonColor,
      onPressed: onPressed,
      child: Text(text,
          style: TextStyle(
            color: textColor,
            fontSize: 20.0,
          )),
    );
  }
}

Try a code snippet like the below:

void main() {
  runApp(
    MaterialApp(
      home: const Home(),
      theme: ThemeData.from(
        colorScheme: const ColorScheme.light(),
      ).copyWith(
        textButtonTheme: TextButtonThemeData(
          style: TextButton.styleFrom(
            primary: Colors.orange,
          ),
        ),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            onPrimary: Colors.yellow,
            primary: Colors.blue,
          ),
        ),
        outlinedButtonTheme: OutlinedButtonThemeData(
          style: OutlinedButton.styleFrom(
            primary: Colors.purple,
            backgroundColor: Colors.green,
          ),
        ),
      ),
    ),
  );
}

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Button Theme Example"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextButton(
              onPressed: () {
                Fluttertoast.showToast(msg: "TextButton Pressed");
              },
              child: const Text('TextButton'),
            ),
            ElevatedButton(
              onPressed: () {
                Fluttertoast.showToast(msg: "ElevatedButton Pressed");
              },
              child: const Text('ElevatedButton'),
            ),
            OutlinedButton(
              onPressed: () {
                Fluttertoast.showToast(msg: "OutlinedButton Pressed");
              },
              child: const Text('OutlinedButton'),
            ),
          ],
        ),
      ),
    );
  }
}

Output

Conclusion:

Thanks for being with us on a Flutter Journey !!!

In this article, we have been through How to Apply Theme on MaterialButton or RaisedButton in Flutter?

Kindly drop us your suggestion/feedback to serve you much better.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Article Source: https://flutteragency.com/how-to-apply-theme-on-materialbutton-or-raisedbutton-in-flutter/