如何在 flutter 中创建 hide/show 小部件的动画容器

Question

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

here is the expected result

Answer 1

这是工作示例，

  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(),
        ],
      ),
    );