Putting Container with Text above List View in Flutter
I want to place a simple Container with some text above a ListView in Flutter. I tried to place the text in the AppBar but I found out the AppBar is not intended to do so.
It should look something like this (except the description should be outsourced to a dedicated container). Example Image
I tried following these instructions but wasn't able to accomplish anything.
return Scaffold(
body: Container(
padding: const EdgeInsets.fromLTRB(0, 20, 0, 0),
child: ListView(
scrollDirection: Axis.vertical,
children: [
Category(),
Category(),
Category(),
Category(),
Category(),
Category(),
Category(),
Category(),
Category(),
Category(),
Category(),
Category(),
Category(),
],
),
),
);
I am new to Flutter and new to stackoverflow so I hope this question is fine. Thanks in advance and kind regards :)
Firstly, wrap your ListView with Expanded then wrap it with Column. Here is some code examples:
return Container(
padding: const EdgeInsets.fromLTRB(0, 20, 0, 0),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
const Text("HEADER"),
Expanded(
child: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 30,
width: 50,
color: Colors.red,
),
);
}),
),
],
),
);