Changing the trailing icon color in ExpansionTile

Question

I need to change the color of the trailing keyboard_down_arrow in ExpansionTile. I have tried wrapping it in Theme widget and setting accent, primary and IconTheme also, but nothing seems to work.

Theme(
                  data: Theme.of(context).copyWith(
                    dividerColor: Colors.transparent,
                    accentColor: Colors.black,
                  ),
                  child: ExpansionTile(
                    //
                    title: Text("Some Text"
                    ),
                    childrenPadding: EdgeInsets.symmetric(horizontal: 15),
                    children: [
                      
                    ],
                  ),
                ),

Could you share some code? – Yakhyo Mashrapov Nov 30 '20 at 15:58 — Yakhyo Mashrapov, Nov 30 '20 at 15:58

score 17 · Answer 1 · answered Sep 13 '21 at 10:53

I have latest solution with both open/close state:

Theme(
    data: Theme.of(context).copyWith(
      unselectedWidgetColor: Colors.white, // here for close state
      colorScheme: ColorScheme.light(
          primary: Colors.white,
      ), // here for open state in replacement of deprecated accentColor
      dividerColor: Colors.transparent, // if you want to remove the border
    ),
    child: ExpansionTile(
        ...
    ),
),...

change colorSheme works – Bagus Kurnianto Jan 01 '22 at 10:00 — Bagus Kurnianto, Jan 01 '22 at 10:00

score 6 · Answer 2 · answered Dec 01 '20 at 05:07

To change the trailing icon Color you can use the fallowing parameter in Expansion Tile

 trailing: Icon(
              Icons.keyboard_arrow_down,
              color: Colors.green,
            ),

Example:

 ExpansionTile(
                //
                title: Text("Some Text"),
                trailing: Icon(
                  Icons.keyboard_arrow_down,
                  color: Colors.green,
                ),
              ),

And for theme Color use color: Theme.of(context).primaryColor,

this will make the arrow icon static and it will not rotate anymore. — TarushiAg, Dec 01 '20 at 05:39

score 5 · Accepted Answer · answered Dec 01 '20 at 05:40

5

I found the solution to the above problem.

set unselectedWidgetColor property to the color you want in Theme class in flutter.

answered Dec 01 '20 at 05:40

TarushiAg

204
1
4
12

good do know you have found solution. Cheers – MRazaImtiaz Dec 01 '20 at 05:46
Do you also know how to change the color of the 'arrow up'? So the opposite of unselectedWidgetColor? Thanks – railon Jun 16 '21 at 16:30
Found a way in this comment: https://github.com/flutter/flutter/issues/23053#issuecomment-606957087 Wrap the ExpansionTile in a Theme widget. E.g.: Theme( data: ThemeData(accentColor: Colors.black54), child: ExpansionTile() ) – railon Jun 16 '21 at 16:39

Maciej Szakacz · Answer 4 · 2023-07-24T15:47:38.243

3

ExpansionTile has a properties:

iconColor: Colors.black,
collapsedIconColor: Colors.orange,

It changes the color of the trailing icon depending on if the tile is expanded or not.

edited Jul 24 '23 at 15:47

answered Jul 24 '23 at 05:18

Maciej Szakacz

381
1
6

efe cankat türkmen · Answer 5 · 2023-06-14T20:26:38.503

If you need more dynamic/general solution;

    ExpansionTileThemeData expansionTileTheme(ColorScheme colors) {
    return ExpansionTileThemeData(iconColor: Colors.white);
  }

use this theme data in your theme.dart file that you use for theme light & dark like this

   ThemeData light([Color? targetColor]) {
    final colorScheme = colors(Brightness.light, targetColor);
    return ThemeData.light().copyWith(
      // unselectedWidgetColor: colorScheme.onPrimary,
      expansionTileTheme: expansionTileTheme(colorScheme),);
  }

in main.dart

 MaterialApp.router(            
  theme: theme.light(Color),
  );

This will affect your whole project, so you won't need to implement this color in every expansion tile that you will use.

Changing the trailing icon color in ExpansionTile

5 Answers5