How to make an ExpansionTile trailing Icon spin?

Question

I've created an expansiontile and I've changed the original trailing icon to an svg icon which I customized. Anytime I click the expansion tile... everything works but the new svg trailing icon doesnt spin like the original trailing icon. Please how do I fix this?

code below

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

class ExpansionTileCard extends StatelessWidget {
  final String toptitle;
  final List<Widget> children;
  const ExpansionTileCard({Key key, this.toptitle, this.children})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: new Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          new Container(
            decoration: new BoxDecoration(
                border:
                    new Border(bottom: new BorderSide(color: Colors.green))),
            child: new Row(
              children: [
                new Expanded(
                  flex: 9,
                  child: new Container(
                    child: new Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        ExpansionTile(
                          title: Text(
                            toptitle,
                            style: TextStyle(
                                color: Colors.black,
                                letterSpacing: -1,
                                fontSize: 19,
                                fontWeight: FontWeight.bold),
                          ),
                          children: children,
                          childrenPadding: EdgeInsets.fromLTRB(0, 0, 0, 20),
                          iconColor: Colors.green,
                          trailing: SvgPicture.asset(
                            'assets/icons/textmessage.svg',
                            height: 30,
                          ),
                        ),
                      ],
                    ),
                  ),
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

While we don't provide trailing on ExpansionTile it uses the default behavior of it.

We are passing a widget into trailing and we need to control it. In order to do that, we need to check if ExpansionTile is expanded or not, the onExpansionChanged call back will provide this value. To handle animation we can use many widgets like Transform, RotatedBox, AnimatedRotation... In this ExpansionTileCard widget will be extended from StatefulWidget .

Steps

1. convert to StatefulWidget
2. create a bool inside state class to check the Expanded-state. bool _isExpanded = false;
3. change value on onExpansionChanged

     onExpansionChanged: (value) {
                           setState(() {
                             _isExpanded = value;
                           });
                         },

4. assign your widget on trailing by wrapping animation widget or just check the state return two widget

   • _isExpanded? ExpandedWidget:NormalViewWidget()

   •    trailing: AnimatedRotation(  /// you can use different widget for animation
                          turns: _isExpanded ? .5 : 0,
                          duration: Duration(seconds: 1),
                          child: CustomWidget()// your svgImage here
                        ),
     
     
     
     
     

Widget State

class _ExpansionTileCardState extends State<ExpansionTileCard> {
  bool _isExpanded = false;
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            decoration: const BoxDecoration(
                border: Border(bottom: BorderSide(color: Colors.green))),
            child: Row(
              children: [
                Expanded(
                  flex: 9,
                  child: Container(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        ExpansionTile(
                          onExpansionChanged: (value) {
                            setState(() {
                              _isExpanded = value;
                            });
                          },
                          title: Text(
                            widget.toptitle,
                            style: TextStyle(
                                color: Colors.black,
                                letterSpacing: -1,
                                fontSize: 19,
                                fontWeight: FontWeight.bold),
                          ),
                          children: widget.children,
                          childrenPadding: EdgeInsets.fromLTRB(0, 0, 0, 20),
                          iconColor: Colors.green,
                          trailing: AnimatedRotation(
                            turns: _isExpanded ? .5 : 0,
                            duration: Duration(seconds: 1),
                            child:  SvgPicture.asset(
                           'assets/icons/textmessage.svg',
                            height: 30,
                          ),
                        ),
                      ],
                    ),
                  ),
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}