How to change Expansion title Color when it is Expanded?

Question

I am beginner in flutter i want change expansion title color when it is expanded the default is blue now i want change when my expansion title color when it expanded here is my code kindly check it only change title color any one here who can help me ?`

 `Padding(
                        padding: EdgeInsets.only(left: 30),
                        child: ExpansionTile(
    
                            children: <Widget>[
                              Text(
                                  '
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sollicitudin nulla risus, vel molestie quam mattis vitae. Quisque in neque in libero hendrerit ultricies a vel purus. Ut iaculis hendrerit nibh, nec pulvinar quam condimentum in. Fusce mollis elit vel lectus venenatis, sagittis sollicitudin lorem tristique. Quisque mattis vel dolor eget dictum. Integer facilisis tortor non lectus ullamcorpe'.',style: TextStyle(
                                  
                              fontSize: 14,  
                            fontFamily: 'Avenir LT 55 Roman',
                    
                                  ),)
                            ],
                            title: Row(
                              children: <Widget>[
                                Image.asset(
                                  'images/online.png',
                                ),
                                GestureDetector(
                                  onTap: () {
                                    Navigator.push(
                                      context,
                                      MaterialPageRoute(
                                          builder: (context) => Online()),
                                    );
                                  },
                                  child: Text(
    
                                    'Online Giving',
                                    style: TextStyle(
    
    
                                      fontSize: 20,
                                        fontFamily: 'TT NORMS',
                                      fontWeight: FontWeight.bold,
    
    
                                    ),
    
    
                                  ),
    
                                )
    
                              ],
    
    
                            )),
    
                      ),

Solution

To give a solution to your probléme you need to know statefulWidget and StatelessWidget uses.
you need to use a StatefulWidget class when your built widget has a local changes like hes own text color ... ext
you need a StatelessWidget class when your build widget has no local changes (that you do it from your own).
So in your code you have a simple widget tree which is composed with :
Scaffold -> ListView -> [Tile1,Tile2... TileN].
The scaffold,ListView doesnt need local changes so we make them StatelessWidget.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          // each tile need her own state management since it depends on a setstate method
          CustomExpensionTile(),
          CustomExpensionTile(),
          CustomExpensionTile(),
        ],
      ),
    );
  }
}

But the list tiles need local changes like the text color in your exemple but you want only one of them to changes whene its expanded . so with put them into separated widgets .

  @override
  _CustomExpensionTileState createState() => _CustomExpensionTileState();
}

class _CustomExpensionTileState extends State<CustomExpensionTile> {
  bool _isExpanded;
  @override
  Widget build(BuildContext context) {
    return ExpansionTile(
      backgroundColor: Colors.transparent,
      title: Text(
        "test",
        style: TextStyle(
          color: _isExpanded ? Colors.red : Colors.black,
        ),
      ),
      onExpansionChanged: (value) {
        _isExpanded = value;
        // whene setState methode is called the widget build function will be replayed with the new changes that we've done
        setState(() {});
      },
    );
  }
}

and we call setState on an ExpansionChanges event to make the change happens. for more info go on https://flutter.dev/

Comments

[Aneel Illyas]

@kadir Nadir it changes my who background color i want only text you see my text in title where online giving is written on that color i want change

[Kadri Nadir]

so convert your widget into statful widget and call setState whene onexpanded event to change title color i'll edit the code again so you can do it .

[Aneel Illyas]

@kadir when you set state false inside initstate it will make default color only which is false how this not get true and false for expansion tile

[Kadri Nadir]

yes , it works for me but you'll need to add background i forgot to add it

[Aneel Illyas]

i need get onexpansionstate change?

[Aneel Illyas]

where i added background as i told you background change whole expansion color

[Kadri Nadir]

i gave you a solution for one tile but you should put your expansion tile in a widget so you can manage tile states separately

[Aneel Illyas]

onExpansionChanged: , method this method but i dont how its work it used inside expansion tile

[Kadri Nadir]

didnt saw that your new to fllutter i'll do a last edit with more information

[Kadri Nadir]

edited with some beginner info but you should watch the documentation so you would know what happens

[Aneel Illyas]

hey your old code working no need more edit its working fine onExpansionChanged: (value) { _isExpanded = value; // whene setState methode is called the widget build function will be replayed with the new changes that we've done setState(() {}); }, actually this method i forget put anyway thanks again do you have facebook?