Home > OS >  Can't change color of a "Leading Icon" of a ListTile in Flutter
Can't change color of a "Leading Icon" of a ListTile in Flutter

Time:02-13

I have a Drawer with a ListView, inside that I have the ListTiles. In every ListTile there is a leading element, the Icon. I want to change the color of all Icons inside ListTiles from my ThemeData. I tried however it doesn't work.

Here is my current code (the class only):

class _UniversalConverter extends State<UniversalConverter> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primarySwatch: Colors.blue,
          iconTheme: const IconThemeData(color: Colors.blue),
        ),
        home: Scaffold(
          appBar: AppBar(
            title: const Text("Universal Converter"),
          ),
          drawer: Drawer(
            child: ListView(
              padding: EdgeInsets.zero,
              children: [
                const DrawerHeader(
                  child: Text('Drawer Header'),
                ),
                ListTile(
                  title: const Text('Home'),
                  leading: const Icon(Icons.home),
                  onTap: () {},
                ),
                ListTile(
                  title: const Text('Angle'),
                  leading: const Icon(Icons.block),
                  onTap: () {},
                ),
              ],
            ),
          ),
        ));
  }
}

As you can see I have the iconTheme: const IconThemeData(color: Colors.blue), but it doesn't do anything.

Any help would be appreciated, Thanks!

CodePudding user response:

Try using ListTileTheme

listTileTheme: ListTileThemeData(
  iconColor: Colors.blue
),

or

ListTile(
   title: const Text('Angle'),
   leading: const Icon(Icons.block, color: Theme.of(context).iconTheme.color),
   onTap: () {},
),
  • Related