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,
),
),
),
);
}
}
CodePudding user response:
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,
),
),
],
)),
),
);
}
}
CodePudding user response:
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"),
),
),
],
)),
)
CodePudding user response:
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.