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,
                                                  ),
                                                ),
                                              ],
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ],
                                )),
                          ),
                        ),

CodePudding user response：

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