4
votes

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.

2
Use caption instead of subtitle property for TextTheme to change ListTile's subtitle color. - CopsOnRoad

2 Answers

9
votes

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),
          ...)
0
votes

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