Putting Container with Text above List View in Flutter-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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: [
              ...