Animate two containers width using Animated container - flutter

Question

I have two widgets,
Widget FirstWidget()
{
return Container(
height: 40,
child: new Text('Food Products',style: TextStyle(color: Colors.gray))
decoration: new BoxDecoration(
borderRadius: new BorderRadius.all(new Radius.circular(4.0)),
border: Border.all(width: 2, color:Colors.gray)),
padding: new EdgeInsets.all(12.0),
)
}
Widget SecondWidget()
{
return Container(
height: 40,
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('Food Products',
TextStyle(color: Colors.blue),
SizedBox(width:8),
Icon(Icons.check,color:Colors.blue ,size: 24,)
],),
decoration: new BoxDecoration(
borderRadius: new BorderRadius.all(new Radius.circular(4.0)),
border: Border.all(width: 2, color:Colors.red)),
padding: new EdgeInsets.all(12.0),
)
}
Now, i need to animate the two widgets based on selection,
class BasicProduct extends StatefulWidget {
final String name;
final bool isSelected;
BasicProduct({Key key, #required this.name, this.isSelected = false});
#override
State<StatefulWidget> createState() => _BasicProduct(name, isSelected);
}
class _BasicProduct extends State<BasicProduct> {
final String name;
bool _isSelected;
_BasicProduct(this.name, this._isSelected);
#override
Widget build(BuildContext context) {
Widget _myAnimatedWidget = _isSelected ? SecondWidget() : FirstWidget();
return new GestureDetector(
onTap: () {
setState(() {
_isSelected = !_isSelected;
_myAnimatedWidget =
_isSelected
? SecondWidget()
: FirstWidget();
});
},
child: AnimatedContainer(
key : _animatedContainerKey
duration: const Duration(seconds: 1),
width: boxWidth
child: _myAnimatedWidget
);
}
}
How to get the width for the two widgets to animate?
Tried Calling WidgetsBinding.instance.addPostFrameCallback((_)=> getSize) in the initState to get the Size
getSize()
{
var boxWidth = _animatedContainerKey.currentContext.findRenderObject().size.width;
}
This Size returning for the SecondWidget only, when firstWidget is changed, the Size returning for SecondWidget only.
Can anyone help how to resolve the issue?

Answer 1

I would take a different approach to this. For one, if you can, you should try using the AnimatedCrossFade widget - it automatically handles both the fade and the size change between two different widgets. If you can make it so that instead of having to specify an exact size in your widgets (always a bad idea) they simply fit to the available space, then this should do what you want. However, without more details of what you're actually trying to accomplish with the animation & size of the widgets, it's a bit difficult to help.
If this doesn't work, then you should consider using an AnimationController and a widget inheriting AnimatedWidget. This way, you have complete control over the build process of your two widgets - you can size, position, and fade them however you want with a stack + opacity or whatever else works best for you.
I would normally write out an example but I think it's a bit beyond the scope of this answer, however you can find out an example of an animated widget here: https://api.flutter.dev/flutter/widgets/AnimatedWidget-class.html. If you do need to go down this route and can't figure out, it would help if you could add more details about what it is you're trying to accomplish instead of what you've attempted to do to accomplish it.