when pressed on quick search the container should expand like this and I don't want to use expandable or any other widget because I want to use the animation of animated container when opened and closed

CodePudding user response：

use expandable: flutter pub add expandable, check the documentation here.

CodePudding user response：

All credit goes to this post answer: How to create an animated container that hide/show widget in flutter

Here is a Complete Working Code:

// ignore_for_file: prefer_const_constructors

import 'package:flutter/material.dart';

  void main() {
  runApp(const MyApp());
 }

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    // This is the theme of your application.
    //
    // Try running your application with "flutter run". You'll see the
    // application has a blue toolbar. Then, without quitting the app, 
try
    // changing the primarySwatch below to Colors.green and then invoke
 // "hot reload" (press "r" in the console where you ran "flutter run",
    // or simply save your changes to "hot reload" in a Flutter IDE).
    // Notice that the counter didn't reset back to zero; the 
application
      // is not restarted.
      primarySwatch: Colors.blue,
   ),
   home: const MyHomePage(title: 'Animated Container Demo'),
  );
  }
 }

class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);

// This widget is the home page of your application. It is stateful, 
meaning
// that it has a State object (defined below) that contains fields that 
affect
// how it looks.

// This class is the configuration for the state. It holds the values 
(in 
this
// case the title) provided by the parent (in this case the App widget) 
and
// used by the build method of the State. Fields in a Widget subclass 
are
// always marked "final".

final String title;

@override
State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
double _height = 50.0;
bool _isExpanded = false;

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

@override
Widget build(BuildContext context) {
 // This method is rerun every time setState is called, for instance as 
done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build 
methods
// fast, so that you can just rebuild anything that needs updating 
 rather
// than having to individually change instances of widgets.
return Scaffold(
    appBar: AppBar(
      // Here we take the value from the MyHomePage object that was 
 created by
      // the App.build method, and use it to set our appbar title.
      title: Text(widget.title),
    ),
    body: 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(),
            ],
           ),
        ));
       }
      }