CODEWITHSUNDEEP
flutterflutter-layout
Nikita
Nikita

Reputation: 765

How to change the text default colour when ExpansionTile is expanded flutter

I want to change this blue Colour when the ExpansionTile expands, unfortunately I just found that you can easily change the Background Colour of the whole header with this collapsedBackgroundColor: , but is there also a way to change the texts background colour?

enter image description here

Upvotes: 1

Views: 1276

Answers (3)

Bilal Şimşek
Bilal Şimşek

Reputation: 5943

create ThemeData and define expansionTileTheme in it. You can also create different themes for dark and light modes

final appTheme = ThemeData(
        colorScheme:ColorScheme(
          //....
              ),
      expansionTileTheme:ExpansionTileThemeData(
        textColor: Colors.grey,
        iconColor: Colors.grey
      ),// This Part
      cardColor: Colors.grey[900],
      appBarTheme: AppBarTheme(
        color: Colors.lightBlueAccent[500],
        foregroundColor: Colors.white70
      ),
      scaffoldBackgroundColor: Colors.black,
      fontFamily: 'Montserrat',
    );

add it to materialApp

MaterialApp(
      navigatorKey: navigatorKey,
      scaffoldMessengerKey: scaffoldMessengerKey,
      theme: appTheme,
      darkTheme: darkTheme,
      themeMode:  brightness == null
          ? ThemeMode.system
          : brightness == Brightness.dark
              ? ThemeMode.dark
              : ThemeMode.light,
    );

Upvotes: 1

croxx5f
croxx5f

Reputation: 5733

You can modify the textColor and iconColor and its corresponding collapsed variants.

          child: ExpansionTile(
            textColor: Colors.amber,
            iconColor: Colors.amber,
            collapsedTextColor: Colors.purpleAccent,
            collapsedIconColor: Colors.purpleAccent,

See the colors : Code

The ExpansionTile collapsed

Collapsed

And expanded

expanded

Upvotes: 2

Apb
Apb

Reputation: 819

Try this

class MyExpansionTile extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return ExpansionTile(
            title: Text(
              'Example',
              style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w500),
            ),
            collapsedTextColor: Colors.green,
            textColor: Colors.blue
          );
      }
  }

for more details Collapsed Text Color

Upvotes: 5

Related Questions