fluttershow-hideanimatedcontainer

How to create an animated container that hide/show widget in flutter


I wanted to create a Container which looks like a Card with a small icon, when this icon is clicked the container height changed and show different component inside.

here is the expected result


Solution

  • Here is the working example,

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