Flutter 文本颜色主题在 ListTile 标题下不起作用

Question

I am getting started in Flutter and just trying out stuff. I set a custom theme, but Text Widgets under the title property of ListTile don't get the right color. Also Icons under the leading property don't get the right color as well.

I tried setting some other colors, and sorted out, that the Problem only exists within that element.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MyApp',
      theme: ThemeData(
          primaryColor: Colors.black,
          scaffoldBackgroundColor: Color(0xff202020),
          cardTheme: CardTheme(color: Colors.black),
          textTheme: TextTheme(
              body1: TextStyle(color: Colors.white),
              subtitle: TextStyle(color: Colors.white),
              headline: TextStyle(color: Colors.white)),
          iconTheme: IconThemeData(color: Colors.white)),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  HomePageState createState() => new HomePageState();
}

class HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("HomePage"),
          leading: IconButton(
              icon: Icon(Icons.arrow_back_ios),
              tooltip: "back to the last page.",
              onPressed: () {
                Navigator.pop(context);
              })
        ),
        body: Card(
          child: ListTile(
            title: Text("Test"),
            leading: new Icon(Icons.devices)
            ),
        ));
  }
}

The Text for the title should appear white as well as the icon, instead it is black. All other Text is white.

Answer 1

In order to make use of you're theme you need to use Theme.of(context).

Container(
color: Theme.of(context).accentColor,
child: Text(
'Text with a background color',
style: Theme.of(context).textTheme.title,
 ),
);

Read more about it here in the cookbook. You are on the right track https://flutter.dev/docs/cookbook/design/themes

Answer 2

The title on ListTile is using subhead textStyle of Theme. So if you want config color of ListTile on ThemeData you need change subhead .

textTheme: TextTheme(
          subhead: TextStyle(color: Colors.white),
          ...)

Answer 3

Just change body1 to bodyText1 in the following location:

C:\\src\\flutter.pub-cache\\hosted\\pub.dartlang.org\\charts_flutter-0.9.0\\lib\\src\\behaviors\\legend\\legend_entry_layout

This will solve the issue.

Answer 4

In Flutter 3 which I'm currently using, titleMedium defines the text style for title of ListTile s.

MaterialApp(
  theme: ThemeData(
    textTheme: Typography().black.copyWith(
      titleMedium: const TextStyle(
        fontSize: 32,
      ),
  ),
)

For example the above theme makes theme relatively large.

Flutter team should provide developers with a reference for these styles. For the moment you can find out which style corresponds to which widget by trial and error.