How can I apply dark mode on button in flutter?

Question

I wanted to apply dark mode on buttons. It is applied on texts, now I am trying to apply it on button. I am unable to figure out what button I should use that would take the primary colour from the MyThemes class. Kindly help me through this.

ThemeProvider:

class MyThemes {
  static final darkTheme = ThemeData(
    primaryColor: Colors.black,
    buttonTheme: const ButtonThemeData(
      buttonColor: Colors.orange,
      textTheme: ButtonTextTheme.primary,
    ),
    colorScheme: const ColorScheme.dark(),
    iconTheme: IconThemeData(color: Colors.purple.shade200, opacity: 0.8),
  );

  static final lightTheme = ThemeData(
    primaryColor: Colors.white,
    colorScheme: const ColorScheme.light(),
    iconTheme: const IconThemeData(color: Colors.black, opacity: 0.8),
     buttonTheme: const ButtonThemeData(
      buttonColor: Colors.orange,
      textTheme: ButtonTextTheme.primary,
    ),
  );
}

How can I style the button in homepage? What button would refer the primary colour from the MyThemes class? HomeScreen:

Padding(
                          padding: const EdgeInsets.only(
                              top: 10.0, right: 20, left: 20),
                          child: InkWell(
                            onTap: () {
                            },
                            child: Container(
                              width: 250,
                                decoration: const BoxDecoration(
                                  //color: Colors.orange,
                                  borderRadius:
                                  BorderRadius.all(Radius.circular(27)),
                                ),
                                //height: 300,
                                child: Column(
                                  children: [
                                    Padding(
                                      padding: const EdgeInsets.all(20.0),
                                      child: Row(
                                        mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                        children: [
                                          MaterialButton(
                                            onPressed: null,

                                            child: Row(
                                              children: const [
                                                SizedBox(
                                                  width: 55,
                                                ),
                                                Text(
                                                  'Upgrade to PRO',
                                                  style: TextStyle(
                                                    color: Colors.black,
                                                    fontSize: 16,
                                                    fontWeight: FontWeight.bold,
                                                  ),
                                                ),
                                              ],
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ],
                                )),
                          ),
                        ),

score 1 · Accepted Answer · answered Aug 16 '22 at 14:26

1

To get the primary color use

decoration:   BoxDecoration(
    color: Theme.of(context).primaryColor,

MaterialButton using directly ThemeData. Also This class is obsolete..

A utility class for building Material buttons that depend on the ambient ButtonTheme and Theme.

If you like to override the default color you can directly provide color on themeData.

static final darkTheme = ThemeData(
  primaryColor: Colors.black,
  splashColor: Colors.pink,
  hoverColor: Colors.yellow,

Image on while tapping on dark mode

answered Aug 16 '22 at 14:26

Md. Yeasin Sheikh

54,221
7
29
56

Better option I think using TextButton or ElevatedButton – Md. Yeasin Sheikh Aug 16 '22 at 14:31
@Yeasim Sheikh Thanks alot it worked! There is one more thing I want to ask, every time I run app by default it is set to dark mode how can I set it to default light mode??? – Usama Bin Tahir Aug 16 '22 at 15:14
you need to use some local db like sharedPrefernce to store the current theme mode and retrieve on app start You can check [this](https://stackoverflow.com/q/68267016/10157127) – Md. Yeasin Sheikh Aug 16 '22 at 15:16
Ok thankyou. I will try this. Sorry but I'm asking again, there's one more thing. The app background color don't change to dark, only the text, icon, and button color change to dark colors not the app background color. – Usama Bin Tahir Aug 16 '22 at 15:25
You can include `scaffoldBackgroundColor` on theme – Md. Yeasin Sheikh Aug 16 '22 at 15:27

How can I apply dark mode on button in flutter?

1 Answers1