'AnimatedContainer with Column child
I would like to animate the child height of an AnimatedContainer
where the child is a Column widget. While I can animate the Column, the Column's children are animated individually rather than a single Widget causing the Column's children to overlap:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(title: 'Animated Container Example'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool expanded = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Stack(
children: [
AnimatedContainer(
clipBehavior: Clip.hardEdge,
duration: const Duration(milliseconds: 1000),
curve: Curves.easeInOut,
color: Colors.black12,
height: expanded ? 100 : 0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: const [
Expanded(
child: Text(
'Top',
style: TextStyle(
color: Colors.blue,
fontSize: 32,
),
),
),
Expanded(
child: Text(
'Bottom',
style: TextStyle(
color: Colors.blue,
fontSize: 32,
),
),
),
],
),
],
),
),
Center(
child: ElevatedButton(
child: const Text(
'Toggle Animate',
),
onPressed: () {
setState(() {
expanded = !expanded;
});
},
),
),
],
),
);
}
}
Solution 1:[1]
Remove expanded from both the children of Column.
Solution 2:[2]
We can use AnimatedSize
widget in this case. And to align widget inside Stack
we need positioned widget like Positioned
,Align
...
Align(
alignment: Alignment.topCenter,
child: AnimatedSize(
clipBehavior: Clip.hardEdge,
duration: const Duration(milliseconds: 1000),
curve: Curves.easeInOut,
alignment: Alignment.topCenter,
child: !expanded
? const SizedBox()
: Container(
height: 100,
color: Colors.black12,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: const [
Text(
'Top',
style: TextStyle(
color: Colors.blue,
fontSize: 32,
),
),
Text(
'Bottom',
style: TextStyle(
color: Colors.blue,
fontSize: 32,
),
),
],
),
],
),
),
),
),
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Rahul |
Solution 2 | Yeasin Sheikh |