Flutter: How to use AnimatedContainer with Expanded in Column?

user_874886 0
Viewed 3370

Let's say we have 3 children of a Column:

Flexible(
   flex:1,
   child: Container(
      color: Colors.red,
   ),
),
Flexible(
   flex:3,
   child: Container(
      color: Colors.yellow,
   ),
),
Flexible(
   flex:1,
   child: Container(
      color: Colors.blue,
   ),
),

I want to programmatically expand middle child with flex=3 to cover the whole Column with smooth animation, while the top and bottom children shrinks accordingly.

Right now my setup is with a Column and Flexible widgets. However if you can think of a solution with other widgets, I am open to those ideas as well.

flutter-layout dart flutter
2 Answers

Screenshot:

enter image description here

Code:

Duration _duration = Duration(seconds: 1);
int _flex1 = 1, _flex2 = 3, _flex3 = 1;

@override
Widget build(BuildContext context) {

  double height = MediaQuery.of(context).size.height;
  var height1 = (_flex1 * height) / (_flex1 + _flex2 + _flex3);
  var height2 = (_flex2 * height) / (_flex1 + _flex2 + _flex3);
  var height3 = (_flex3 * height) / (_flex1 + _flex2 + _flex3);

  return Scaffold(
    body: Column(
      children: <Widget>[
        AnimatedContainer(
          duration: _duration,
          color: Colors.blue,
          height: height1,
          alignment: Alignment.center,
          child: Text("Flex: ${_flex1}", style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold)),
        ),
        AnimatedContainer(
          duration: _duration,
          color: Colors.red,
          height: height2,
          alignment: Alignment.center,
          child: Text("Flex: ${_flex2}", style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold)),
        ),
        AnimatedContainer(
          duration: _duration,
          color: Colors.teal,
          height: height3,
          alignment: Alignment.center,
          child: Text("Flex: ${_flex3}", style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold)),
        ),
      ],
    ),
  );
}
user_66186220

This solution is good for full screen (without AppBar), so if you are going to use a standard AppBar use this solution instead. 

Duration _duration = Duration(seconds: 1);
int _flex1 = 1, _flex2 = 1, _flex3 = 1;

@override
Widget build(BuildContext context) {

  var data = MediaQuery.of(context);

  // subtracted status bar and AppBar height from total height
  double height = data.size.height - data.padding.top - kToolbarHeight;
  var height1 = (_flex1 * height) / (_flex1 + _flex2 + _flex3);
  var height2 = (_flex2 * height) / (_flex1 + _flex2 + _flex3);
  var height3 = (_flex3 * height) / (_flex1 + _flex2 + _flex3);

  return Scaffold(
    appBar: AppBar(title: Text("Flex"),),
    body: Column(
      children: <Widget>[
        AnimatedContainer(
          duration: _duration,
          color: Colors.blue,
          height: height1,
          alignment: Alignment.center,
          child: Text("Flex: ${_flex1}", style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold)),
        ),
        AnimatedContainer(
          duration: _duration,
          color: Colors.red,
          height: height2,
          alignment: Alignment.center,
          child: Text("Flex: ${_flex2}", style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold)),
        ),
        AnimatedContainer(
          duration: _duration,
          color: Colors.teal,
          height: height3,
          alignment: Alignment.center,
          child: Text("Flex: ${_flex3}", style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold)),
        ),
      ],
    ),
  );
}
user_66186220
Related