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?

CodePudding user response：

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.