Why does this AnimatedSwitcher not animate the change?

user_826511 0
Viewed 73

I'm trying to animate text to switch between two values

AnimatedSwitcher(
                  duration: Duration(milliseconds: 400),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      (_smallTitle == true) ? Text('Text1/', style:TextStyle(fontSize: 12.0)) : Container(),
                      Text(
                        (_smallTitle == false) ? _largeHeaderText : _smallHeaderText,
                      ),
                    ],
                  ),
                ),

This code does successfully switch the text when I trigger a change in my '_smallTitle` bool value. But the change is not animated at all

Any idea what I'm doing wrong?

dart flutter
1 Answers

The main work for AnimatedSwitcher is to animate between child. But in this case we are having single and same widget (column) as child. That's why we can't see animation. We need to pass a child based on condition. Like

AnimatedSwitcher(
            duration: Duration(seconds: 4),
            child: _smallTitle
                ? Column(
                    key: ValueKey("child1"), // provide key
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text(
                        'Text1/',
                        style: TextStyle(fontSize: 12.0),
                      ),
                      Text(
                        _smallHeaderText,
                      )
                    ],
                  )
                : Column(
                    children: [
                      Text(_largeHeaderText),
                    ],
                  )),

But we can trick something with key.

AnimatedSwitcher(
          duration: Duration(milliseconds: 400),
          child: Column(
            key: ValueKey(_smallTitle ? "small child Key" : "largeChild key"),
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              (_smallTitle == true)
                  ? Text('Text1/', style: TextStyle(fontSize: 12.0))
                  : Container(),
              Text(
                (_smallTitle == false) ? _largeHeaderText : _smallHeaderText,
              ),
            ],
          ),
        ),

use separate key for child.

user_101571270
Related