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

I cant make ListView Scrollable in Flutter

I am trying to create a list view and make it scrollable.
for this I have created the following widget in my view:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Leaderboard"),
      ),
      body: SafeArea(
        child: Center(
          child: Column(
            children: [
ListView.builder(
                        // physics: const NeverScrollableScrollPhysics(),
                        itemCount: playerList.length,
                        shrinkWrap: true,
                        itemBuilder: (context, index) {
                          return ListTile(
                            leading: profilePictureOfPlayer(
                                playerList[index].color,
                                playerList[index].profilePicture),
                            title: Text(playerList[index].name),
                            subtitle: Text(playerList[index].points),
                            trailing: Text((index + 1).toString()),
                            onTap: () {
                              print("Tapped on " + playerList[index].name);
                            },
                          );
                        }),
                ],
          ),
        ),
      ),
    );
  }

However, I always get an error because of "A RenderFlex overflowed by 121 pixels on the bottom." and the elements inside the SeingleSchildScrollView are not scrollable.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The Solution was to Place my List View into an Expandet Widget:

    Expanded(
              child: ListView.builder(
                  physics: const ScrollPhysics(),
                  itemCount: playerList.length,
                  shrinkWrap: true,
                  itemBuilder: (context, index) {
                    return ListTile(
                      leading: profilePictureOfPlayer(playerList[index].color,
                          playerList[index].profilePicture),
                      title: Text(playerList[index].name),
                      subtitle: Text(playerList[index].points),
                      trailing: Text((index + 1).toString()),
                      onTap: () {
                        print("Tapped on " + playerList[index].name);
                      },
                    );
                  }),
            ),

  2. 0

    To put it simple let’s say that "overusing" widgets may lead to a rare behaviour, so, I would suggest to remove a couple of widgets to keep the screen as simple as posible.

    @override
Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Leaderboard"),
      ),
      body: SafeArea(
        child: ListView.builder(
            itemCount: playerList.length,
            shrinkWrap: true,
            itemBuilder: (context, index) {
              return ListTile(
                leading: profilePictureOfPlayer(playerList[index].color,
                      playerList[index].profilePicture),
                title: Text(playerList[index].name),
                subtitle: Text('flutter'),
                trailing: Text(playerList[index].points),
                onTap: () {
                  print("Tapped on " + playerList[index].name);
                },
              );
            }),
      ),
    );
  }

    DEMO:

    enter image description here

    Flutter ListView example.

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

Back To Top
Search