Search code examples
androidiosflutterdartexpansion

How to change Expansion title Color when it is Expanded?


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/