Putting Container with Text above List View in Flutter

Question

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 :)

score 4 · Accepted Answer · answered Jan 22 '22 at 17:21

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,
                    ),
                  );
                }),
          ),
        ],
      ),
    );

Container could be Scaffold's body. It is up to you. – Tolga Yılmaz Jan 22 '22 at 17:23 — Tolga Yılmaz, Jan 22 '22 at 17:23
You can remove the container here. – B Faley Dec 03 '22 at 18:41 — B Faley, Dec 03 '22 at 18:41

Shaan Mephobic · Answer 2 · 2022-01-22T17:30:01.060

Wrap the Container with Column.
Add the Container with Text in the Column.
Wrap the ListView's Container with Expanded so it takes up the space that's left in screen.
Enable shrinkWrap in the ListView.

return Scaffold(
  body: Column(
    children: [
      const FlutterLogo(), //replace it with your container with text
      Expanded(
        child: Container(
          padding: const EdgeInsets.fromLTRB(0, 20, 0, 0),
          child: ListView(
            shrinkWrap: true, //make sure to enable shrink wrap
            scrollDirection: Axis.vertical,
            children: [
              ...

Putting Container with Text above List View in Flutter

2 Answers2