title: Flutter: Animating Row contents within a stateless widget
body: <p>I have a Row that is made out of either one or two elements. Depending on the latter, I want to animate the width of the first element to either be fully expanded, or to accommodate for the second element.</p>
  <p>I am using AnimatedContainers within the row to achieve this, but there is no animation. I thought this probably has to do with Flutter not recognizing it as the same after re-rendering based on its parent's state, so I tried using a Unique Key. This however didn't work either.</p>
  <pre><code>class TabsBar extends StatelessWidget {
    TabsBar({this.currentIndex, this.onIndexChanged, Key key}) : super(key: key);
    final int currentIndex;
    final Function(int) onIndexChanged;
  
    @override
    Widget build(BuildContext context) {
      final tabsBloc = BlocProvider.of&lt;TabsBarBloc&gt;(context);
  
    return BlocBuilder&lt;TabsBarBloc, TabsBarBlocState&gt;(
      builder: (context, tabsBarState) {
    return SafeArea(
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: standardSpacing),
        child: Row(
          children: [
            Expanded(
              child: AnimatedContainer(
                key: key,
                height: 60,
                duration: Duration(milliseconds: 200),
                //....//
            ),
            //HERE: IF INDEX IS == 2, I WANT THE CONTAINER ABOVE TO ANIMATE INTO ITS NEW SIZE WHICH IS LESS WIDE TO ACCOMMODATE FOR THE CONTAINER BELOW
            currentIndex == 2
                ? GestureDetector(
                    onTap: () {},
                    behavior: HitTestBehavior.translucent,
                    child: AnimatedContainer(
                      duration: Duration(milliseconds: 200),
                      padding: const EdgeInsets.only(left: standardSpacing),
                      height: 60,
                      child: Image.asset(
                        '${imagesPath}add_piece.png',
                      ),
                    ),
                  )
                : HorizontalSpacing(0),
          ],
        ),
      ),
    );
  });
  </code></pre>
  <p>I also tried using a Layout Builder to define the width explicitly and using an Animated Container as a parent to the Row. Neither worked.</p>
  <p>Can anybody point me towards what I might be missing?</p>