Question 74976 in Flutter Question posted in
The official Flutter documentation can be found here.

How do I make the listview.builder scrollable in the container – Flutter

I have a list view that I want to make scrollable inside a container. However, when I scroll down and release my finger, the list locks back to the top. I tried wrapping the list view in a SingleChildScrollView, but it didn’t work. Here’s the relevant code:

// The container that holds the list view
SizedBox(
  height: 501,
  child: SingleChildScrollView(
    child: Column(
      children: [
        // A button to add a new item to the list
        TextButton.icon(
          onPressed: () { ... },
          icon: Icon(Icons.add),
          label: Text("Add Course"),
        ),
        // The list view that needs to be scrollable
        ListView.builder(
          shrinkWrap: true,
          itemCount: ...,
          itemBuilder: (context, index) { ... },
        ),
      ],
    ),
  ),
);
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0
    1. Remove the SizedBox widget with a fixed height that wraps the ListView.builder.
    2. Remove the SingleChildScrollView widget that wraps the Column widget inside the ListView.builder.
    3. Wrap the ListView.builder with a Container widget that has a fixed height.
    Container(
  height: 500,
  child: ListView.builder(
    ...
  ),

  2. 0

    You are using scroll twice.

    enter image description here

    If you want to scroll the ListView only, remove the SingleChildScrollView. You need to stop one of them. if you want to scroll the Listview.builder and Button together, add primary : false to Listview.builder:

    SizedBox(
  height: 501,
  child: SingleChildScrollView(
    child: Column(
      children: [
        // A button to add a new item to the list
        TextButton.icon(
          onPressed: () { ... },
          icon: Icon(Icons.add),
          label: Text("Add Course"),
        ),
        // The list view that needs to be scrollable
        ListView.builder(
          shrinkWrap: true,
          primary: false,
          itemCount: ...,
          itemBuilder: (context, index) { ... },
        ),
      ],
    ),
  ),
);

    You can get more information about primary property here:
    https://api.flutter.dev/flutter/widgets/ScrollView/primary.html

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search