Direction of expansion for AnimatedContainer in Flutter to be downwards instead of upwards

Question

When I click on the arrow, I want the expanded content to extend downwards, but instead it extends upwards. Like the extended content and the container should be extending downwards instead of upwards. I have tried using Alignment and AlignmentDirectional to be bottomCenter but it didn't work for me, or perhaps I implemented it wrongly.

Positioned(
  bottom: 20,
  left: 20,
  child: GestureDetector(
    onTap: () {
      setState(() {
        isExpanded = !isExpanded;
      });
    },
    child: AnimatedContainer(
      duration: Duration(milliseconds: 300),
      curve: Curves.easeInOut,
      height: isExpanded ? 200 : 100,
      width: 200,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10.0),
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [
            Colors.grey[200]!,
            Colors.grey[300]!,
          ],
        ),
      ),
      padding: EdgeInsets.symmetric(vertical: 10.0),
      child: Column(
        children: <Widget>[
          Text(
            'Text at the Top',
            style: TextStyle(
              fontSize: 18.0,
              fontWeight: FontWeight.bold,
            ),
          ),
          Container(
            height: 1.0,
            color: Colors.grey,
            margin: EdgeInsets.symmetric(vertical: 10.0),
          ),
          if (isExpanded)
            Expanded(
              child: Container(
                padding: EdgeInsets.all(10.0),
                child: Text(
                  'Expanded content goes here.',
                  style: TextStyle(fontSize: 16.0),
                ),
              ),
            ),
          Transform.rotate(
            angle: isExpanded ? 0.5 * 3.14 : 0,
            child: Icon(
              Icons.arrow_drop_down,
              size: 30.0,
            ),
          ),
        ],
      ),
    ),
  ),
),

Here is how it looks like when not expanded:

Here is how it looks like when expanded:

Answer 1

The issue in your code is that the Expanded widget takes up all the remaining space available within its parent. Since the AnimatedContainer has its bottom positioned 20px from the bottom of the screen, the remaining space for the Expanded widget is at the top, causing it to expand upwards.

  children: <Widget>[
    if (isExpanded)
      Expanded(
        child: Container(
          padding: EdgeInsets.all(10.0),
          child: Text(
            'Expanded content goes here.',
            style: TextStyle(fontSize: 16.0),
          ),
        ),
      ),
    Text(
      'Text at the Top',
      style: TextStyle(
        fontSize: 18.0,
        fontWeight: FontWeight.bold,
      ),
    ),
    Container(
      height: 1.0,
      color: Colors.grey,
      margin: EdgeInsets.symmetric(vertical: 10.0),
    ),
    Transform.rotate(
      angle: isExpanded ? 0.5 * 3.14 : 0,
      child: Icon(
        Icons.arrow_drop_down,
        size: 30.0,
      ),
    ),
  ],
),