How to use expansion tile inside a container in Flutter?

Question

This is set of expansion tile. Here I want to warp Expansion tile inside a container so that i can give border , shape and shadow to the tile. Also I want the expanded result as same like this. How can I achieve this. Please help me

I have tried the below pattern. But when I expand I am getting Render overflow error

              Container(
                  height: 80,
                  width: MediaQuery.of(context).size.width - 10,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(10.0)),
                    color: Colors.white,
                    boxShadow: [
                      BoxShadow(
                          color: Theme.of(context).hintColor.withOpacity(0.2),
                          spreadRadius: 2,
                          blurRadius: 5)
                    ],
                  ),
                  child:
                  ExpansionTile(
                    backgroundColor: Colors.white,
                    trailing: Icon(Icons.arrow_forward_ios_rounded),
                    initiallyExpanded: false,
                    title: Text(
                        'Messages',
                        style: Theme.of(context)
                            .textTheme
                            .subtitle),

                    children: List.generate(
                        3, (indexProduct) {
                      return Text("terwyteuwte");
                    }),
                  )
              ),

please help me..

Answer 1

You can do the following thing Add the following widgets in ListView() according to your use

class ItemTile extends StatefulWidget {
//   final OrderItem orderItem;

//   OrderItemTile(this.title);

  @override
  _ItemTileState createState() => _ItemTileState();
}

class _ItemTileState extends State<ItemTile> {
  bool _expanded = false;

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 300),
      height: _expanded
          ? 350
          : 100,
      child: Card(
        elevation: 10,
        color: Theme.of(context).canvasColor,
        margin: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        child: Column(
          children: <Widget>[
            ListTile(
              title: (Text(
                'File',
                style: TextStyle(
                    fontSize: 22, fontWeight: FontWeight.bold),
              )),
              trailing: IconButton(
                  icon: _expanded
                      ? Icon(Icons.expand_less)
                      : Icon(Icons.expand_more),
                  onPressed: () {
                    setState(() {
                      _expanded = !_expanded;
                    });
                  }),
            ),
            AnimatedContainer(
              duration: Duration(milliseconds: 300),
              height: _expanded
                  ? 300
                  : 0,
              width: MediaQuery.of(context).size.width,
              child: ItemExpandedTile(),
            )
          ],
        ),
      ),
    );
  }
}

the widget which is shown after expanding

class ItemExpandedTile extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      child: Stack(
        children: <Widget>[
          Positioned(
            top: 5,
            child: Container(
              height: 90,
              width: MediaQuery.of(context).size.width - 75,
              padding: EdgeInsets.all(10),
              decoration: new BoxDecoration(
                color: Theme.of(context).canvasColor,
                borderRadius: BorderRadius.circular(15),
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey,
                    blurRadius: 15.0,
                    spreadRadius: 0.5,
                    offset: Offset(
                      1.0,
                      1.0,
                    ),
                  )
                ],
              ),
              child: Row(
                children: <Widget>[
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      Text(
                        'Title',
                        style: TextStyle(
                            fontSize: 12, fontWeight: FontWeight.bold),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Th Result: