如何创建在颤动中隐藏/显示小部件的动画容器

问题描述

我想创建一个 Container，它看起来像一个带有小 Card 的 icon，当单击此图标时，容器高度发生变化并在内部显示不同的组件。

here is the expected result

解决方法

这是工作示例，

  double _height = 50.0;
  bool _isExpanded = false;

  Future<bool> _showList() async {
    await Future.delayed(Duration(milliseconds: 300));
    return true;
  }

AnimatedContainer

AnimatedContainer(
      duration: Duration(milliseconds: 300),height: _height,decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(5),color: Colors.grey,),width: MediaQuery.of(context).size.width - 100,padding: EdgeInsets.only(left: 15,right: 15),child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.only(top: 10),child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [
                Text('Title'),InkWell(
                  onTap: () {
                    if (!_isExpanded) {
                      setState(() {
                        _height = 300;
                        _isExpanded = true;
                      });
                    } else {
                      setState(() {
                        _height = 50;
                        _isExpanded = false;
                      });
                    }
                  },child: Container(
                    height: 30,width: 40,color: Colors.red,child: !_isExpanded ? Icon(Icons.add) : Icon(Icons.remove),],_isExpanded
              ? FutureBuilder(
                  future: _showList(),/// will wait untill box animation completed
                  builder: (context,snapshot) {
                    if (!snapshot.hasData) {
                      return SizedBox();
                    }
                    return ListView.builder(
                      itemCount: 10,shrinkWrap: true,itemBuilder: (context,index) {
                        return Text('data'); // your custom UI
                      },);
                  })
              : SizedBox.shrink(),);