CODEWITHSUNDEEP
flutterdart
J_Strauton
J_Strauton

Reputation: 2418

How to Create a Scrollable Page With A ListView

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

Upvotes: 0

Views: 102

Answers (2)

Kaushik Chandru
Kaushik Chandru

Reputation: 17732

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

Upvotes: 1

Jahidul Islam
Jahidul Islam

Reputation: 12565

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

Upvotes: 0

Related Questions