Add Scrolling In The Listview.builder In Flutter Application

I am trying to make a List view scroll able, when I googled and could not found an understandable and simple solution, I tried to make a custom scroll (example from link https://do

Solution 1:

You don't need to use a CustomScrollView. ListView is a scrolling widget itself. So you only need to create it inside your StreamBuilder.

@override
Widget build(BuildContext context) {
  return StreamBuilder<List<int>>(
    stream: posts,
    builder: (BuildContext context, AsyncSnapshot<List<int>> snapshot) {
      if (snapshot.hasError) {
        return Text('Error: ${snapshot.error}');
      }
       switch (snapshot.connectionState) {
        case ConnectionState.waiting:
          returnconstText('Loading...');
        default:
          if (snapshot.data.isEmpty) {
            returnconstNoContent();
          }
          return _itemList(snapshot.data);
      }
    },
  );
}

CustomScrollView is used for adding Sliver widget inside it.

Solution 2:

You are wrapping a ListView inside a SliverList, which is never a good idea if they have the same scrolling direction. You could either do a Column with a List.generate() generator (inefficient) or get rid of one of the ListView's:

CustomScrollView(
  shrinkWrap: true,
  slivers: <Widget>[
    StreamBuilder(
      stream: Firestore.instance.collection("Items").snapshots(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (snapshot.hasData) {
          return SliverPadding(
            padding: const EdgeInsets.all(20.0),
            sliver: SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  DocumentSnapshot ds = snapshot.data.documents[index];
                  return new Row(
                    textDirection: TextDirection.ltr,
                    children: <Widget>[
                      Expanded(child: Text(ds["item1"])),
                      Expanded(child: Text(ds["item2"])),
                      Expanded(child: Text(ds["price"].toString())),
                    ],
                  );
                },
                childCount: snapshot.data.documents.length,
              ),
            ),
          );
        } else {
          return SliverFillRemaining(
            child: Center(
              child: CircularProgressIndicator(),
            ),
          );
        }
      },
    ),
  ],
);

If this code snippet doesn't work swap the StreamBuilder with the CustomScrollView

Solution 3:

ListView itself is a scroll able list so you just create it with your custom tiles. Here is the code from my to-do list app that I used to create a list of my to-do items. Well I call this function when I have to create a list.

/*Called each time the widget is built.
* This function creates the list with all items in '_todoList'
* */Widget_buildTodoList() {
  returnnewListView.builder(
    // itemBuilder will be automatically be called as many times as it takes for the// list to fill up its available space, which is most likely more than the// number of to do items we have. So, we need to check the index is OK.itemBuilder: (context, index) {
      if (index < _todoList.length) {
        return_buildTodoItem(_todoList[index],index);
      }
    },
  );
}

Now this function calls a _buildTodoItem function which creates a single custom list tile.

/*Build a single List Tile*/
Widget _buildTodoItem(TodoItem todoItem,int index) {
  //return a custom build single tile for your list
}