How to use ElevatedButton text style when its child is a ListTile in flutterhttps://stackoverflow.com/questions/ask

Question

For design purpose I need a tapable ListTile with the same background colour as an ElevatedButton and because of the fact a user can select his own theme from within tha app, I need the title and subtitle color being the same as the text of a the button so that contrast is OK for every themes (I mean when the theme is dark, the text will be light and vice versa).

So I ended up with the code as follows:

return ElevatedButton(
                  style: ButtonStyle(
                    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                      RoundedRectangleBorder(
                        //side: BorderSide(width: 2),
                        borderRadius: BorderRadius.circular(20),
                      ),
                    ),
                  ),
                  onPressed: () => Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => screen(t),
                      )),
                  child: Padding(
                    padding: const EdgeInsets.symmetric(vertical: 4),
                    child: ListTile(
                      contentPadding: const EdgeInsets.all(0),
                      //tileColor: Colors.green,
                      // shape: RoundedRectangleBorder(
                      //   //side: BorderSide(width: 2),
                      //   borderRadius: BorderRadius.circular(20),
                      // ),
                      leading: CircleAvatar(
                        child: Icon(t.iconData),
                      ),
                      title: Text(t.toString().i18n),
                      subtitle: Text(t.description),
                      trailing: const Icon(Icons.arrow_forward_ios),
                      // onTap: () => Navigator.push(
                      //   context,
                      //   MaterialPageRoute(
                      //     builder: (context) => screen(t),
                      //   ),
                    ),
                  ),
                );

But the text keeps dark even on dark background and this is why I 'd like to take advantage of the EelevatedButton Theme.of(context) to render the title and subtitle Text.

How to do that?

Answer 1

I hope below example of mine helps you

                Padding(
                    padding: const EdgeInsets.fromLTRB(5, 20, 5, 5),
                    child: SizedBox(
                      height: 60.0,
                      child: ElevatedButton(
                        style: ElevatedButton.styleFrom(
                          primary: Color(0xffff8080),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10),
                          ),
                          elevation: 05.0,
                        ),
                        onPressed: () async {
                          
                        },
                        child: Ink(
                          child: Container(
                            constraints: const BoxConstraints(
                                maxWidth: 200.0, minHeight: 60.0),
                            alignment: Alignment.center,
                            child: Text(
                              "Send OTP ",
                              textAlign: TextAlign.center,
                              style: Styles.googleFontWhite,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),