How to remove `home: Scaffold` `appBar:` in an `AnimatedList`?

Question

The Following code 1 has a AnimatedList and produces a blank white page . I noticed the code 2 works well without errors and it has MaterialApp followed by home: Scaffold appBar: embedded in it. I don't wanna use any appbar or anything which bloats the widget. and the widget will be re-used in an another widget, so, I don't wanna have app bar. How to remove those things and place two icon buttons and the AnimatedList into a container and column ?

Code 1 - produces white blank

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Column(
      children: [
        IconButton(
          icon: const Icon(Icons.add_circle),
          onPressed: _insert,
          tooltip: 'insert a new item',
        ),
        IconButton(
          icon: const Icon(Icons.remove_circle),
          onPressed: _remove,
          tooltip: 'remove the selected item',
        ),
        Padding(
          padding: const EdgeInsets.all(16.0),
          child: AnimatedList(
            key: _listKey,
            initialItemCount: _list.length,
            itemBuilder: _buildItem,
          ),
        ),
      ],
    ));
  }
}

Code 2 - Works well

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('AnimatedList'),
          actions: <Widget>[
            IconButton(
              icon: const Icon(Icons.add_circle),
              onPressed: _insert,
              tooltip: 'insert a new item',
            ),
            IconButton(
              icon: const Icon(Icons.remove_circle),
              onPressed: _remove,
              tooltip: 'remove the selected item',
            ),
          ],
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: AnimatedList(
            key: _listKey,
            initialItemCount: _list.length,
            itemBuilder: _buildItem,
          ),
        ),
      ),
    );
  }
}

Answer 1

You want to remove the appBar like this:

   @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
    child: Column(
  children: [
    IconButton(
      icon: const Icon(Icons.add_circle),
      onPressed: _insert,
      tooltip: 'insert a new item',
    ),
    IconButton(
      icon: const Icon(Icons.remove_circle),
      onPressed: _remove,
      tooltip: 'remove the selected item',
    ),
    Padding(
      padding: const EdgeInsets.all(16.0),
      child: AnimatedList(
        key: _listKey,
        initialItemCount: _list.length,
        itemBuilder: _buildItem,
      ),
    ),
  ],
)),
      ),
    );
  }
}

Answer 2

Okay so the error is because you are using Animated List inside Column, Column has unbounded height and Animated List tries to cover all the available height that's why it throws an error and produce a blank screen and to solve this issue use shrinkWrap property of the builder like below:

Scaffold(
      body: Container(
          child: Column(
            children: [
              IconButton(
                icon: const Icon(Icons.add_circle),
                onPressed: (){},color: Colors.blue,
                tooltip: 'insert a new item',
              ),
              IconButton(
                icon: const Icon(Icons.remove_circle),
                onPressed: (){},color: Colors.blue,
                tooltip: 'remove the selected item',
              ),
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: AnimatedList(
                 shrinkWrap: true, // this will shrink this list according to available data
                  key: _listKey,
                  initialItemCount: 3,
                  itemBuilder: (context, index, abc) => Text("hello"),
                ),
              ),
            ],
          )),
    )

Answer 3

It happens because your list does not have constraints.

Another possibility, beyond the aforementioned shrinkwrap , is wrap your AnimatedList in an Expanded which would make it size the max as possible.