Flutter 文本顏色主題在 ListTile 標題下不起作用

Question

我從 Flutter 開始，只是嘗試一些東西。 我設置了自定義主題，但 ListTile 的 title 屬性下的文本小部件沒有獲得正確的顏色。 此外，領先屬性下的圖標也沒有獲得正確的顏色。

我嘗試設置其他一些 colors，並整理出問題僅存在於該元素中。

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)
            ),
        ));
  }
}

標題的文本應該和圖標一樣顯示為白色，而不是黑色。 所有其他文本都是白色的。

Answer 1

為了利用您的主題，您需要使用Theme.of（context）。

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

在食譜中閱讀有關此內容的更多信息。 您處在正確的軌道上https://flutter.dev/docs/cookbook/design/themes

Answer 2

在ListTile 標題是使用主題的小標題 文本樣式 。 所以，如果你想在ThemeData ListTile的配置顏色，你需要改變小標題 。

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

Answer 3

只需在以下位置將 body1 更改為 bodyText1 即可：

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

這將解決問題。

Answer 4

在我當前使用的 Flutter 3 中， titleMedium定義了ListTile的title的文本樣式。

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

例如上面的主題使主題比較大。

Flutter 團隊應該為開發者提供這些styles 的參考。目前您可以通過反復試驗找出哪種樣式對應於哪個widget。