Animate two containers width using Animated container

I have two widgets. I need to animate the two widgets based on their width,

How to get the width for the two widgets to animate?

Tried Calling WidgetsBinding.instance.addPostFrameCallback((_)=> getSize) in the initState to get the Size.This Size returning for the SecondWidget only, when firstWidget is changed, the Size returning for SecondWidget only.

I need the animation like this https://stackoverflow.com/questions/55295213/flutter-animated-container

Can anyone help how to resolve the issue?

class BasicProduct extends StatefulWidget {
final String name;
final bool isSelected;

BasicProduct({Key key, @required this.name, this.isSelected = false});

@override
State createState() => _BasicProduct(name, isSelected);
}

class _BasicProduct extends State {
final String name;
bool _isSelected;
GlobalKey _animatedContainerKey = new GlobalKey();
double boxWidth;
Widget _myAnimatedWidget;

_BasicProduct(this.name, this._isSelected);

@override
void initState() {
super.initState();
_myAnimatedWidget =
isSelected
? secondWidget()
: firstWidget();
WidgetsBinding.instance.addPostFrameCallback((
) => getSize());
}

getSize() {
RenderBox box = _animatedContainerKey.currentContext.findRenderObject();
boxWidth = box.size.width;
print(“SIZE of animatedContainer: $boxWidth”);
}

@override
Widget build(BuildContext context) {
return Scaffold(body: new GestureDetector(
onTap: () {
setState(() {
_isSelected = !_isSelected;
_myAnimatedWidget =
_isSelected
? secondWidget()
: firstWidget();
});
},
child: AnimatedContainer(
key: _animatedContainerKey,
duration: Duration(seconds: 2),
curve: Curves.easeIn,
width: animatedContainerSize.width,
child: FittedBox(fit: BoxFit.cover, child: _myAnimatedWidget),
),
);
}

Widget firstWidget() {
return Container(
height: 40,
child: new Text(‘Food Products’, style: TextStyle(color: Colors.grey)),
decoration: new BoxDecoration(
borderRadius: new BorderRadius.all(new Radius.circular(4.0)),
border: Border.all(width: 2, color: Colors.grey)),
padding: new EdgeInsets.all(12.0),
);
}

Widget secondWidget() {
return Container(
height: 40,
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Text(‘Food Products’, style: 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),
);
}