How to Create a Scrollable Page With A ListView

Question

I have the following but I would like for the Text title to also scroll with the list. How to do this?

Widget build(BuildContext context) {
    return Column(
      children: [
        Text("hello"),
        ListView.builder(
          itemBuilder: (BuildContext context, int index) {
          return UserWidget(
            firstName: userdetails[index]['first_name'],
            lastName: userdetails[index]['last_name'],
            imageURL: userdetails[index]['image_url'],
          );
        },
        itemCount: userdetails.length,
      ),
      ]
    );
}

Does this answer your question? [Flutter : How to add a Header Row to a ListView](https://stackoverflow.com/questions/49986303/flutter-how-to-add-a-header-row-to-a-listview) — user18309290, Jul 27 '22 at 05:23

Kaushik Chandru · Answer 1 · 2022-07-27T06:08:06.863

Create a SingleChildScrollView and add listview and text as children of it

Widget build(BuildContext context) {
    return SingleChildScrollView (
     child :Column(
      children: [
        Text("hello"),
        ListView.builder(
          shrinkWrap: true,
          itemBuilder: (BuildContext context, int index) {
          return UserWidget(
            firstName: userdetails[index]['first_name'],
            lastName: userdetails[index]['last_name'],
            imageURL: userdetails[index]['image_url'],
          );
        },
        itemCount: userdetails.length,
       physics: NeverScrollableScrollPhysics(),
      ),
      ]
    )
  );
}

score 0 · Accepted Answer · answered Jul 27 '22 at 05:25

Wrap your list with Expanded and add shrinkWrap: true, and physics: ScrollPhysics(), under ListView

Scrolling without text title

Column(children: [
        Text("hello"),
        Expanded(
          child: ListView.builder(
            shrinkWrap: true,
            physics: ScrollPhysics(),
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                title: Text("$index"),
              );
            },
            itemCount: 50,
          ),
        ),
      ])

Scrolling with text title

SingleChildScrollView(
      child: Column(children: [
        Text("hello"),
        ListView.builder(
          shrinkWrap: true,
          physics: ScrollPhysics(),
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              title: Text("$index"),
            );
          },
          itemCount: 50,
        ),
      ]),
    )

How to Create a Scrollable Page With A ListView

2 Answers2

Scrolling without text title

Scrolling with text title