CODEWITHSUNDEEP
androidflutterdartlistviewscroll
Jocabin
Jocabin

Reputation: 13

ListView won't scroll in Flutter

I try to create a scrollable ListView, but for somes reasons it's not working.

My goal: create a ListView connected to Firebase. My ListView gather well datas, but scoll is impossible.

The body of my Scaffold:

body: const SingleChildScrollView(
  child: RecipesInformations(),
),

My widget:

@override
  Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
      stream: _recipesStream,
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (snapshot.hasError) {
          return const Text('Something went wrong');
        }

        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Text("Chargement recettes");
        }

        return ListView(
          shrinkWrap: true,
          children: snapshot.data!.docs.map((DocumentSnapshot document) {
            Map<String, dynamic> data =
                document.data()! as Map<String, dynamic>;
            List tags = List.from(document["tags"]);

            return Container(
                decoration: BoxDecoration(
                    color: Colors.white,
                    border: Border.all(color: const Color(0xFF011200)),
                    borderRadius: const BorderRadius.all(Radius.circular(8))),
                margin: const EdgeInsets.only(
                    bottom: 32, left: 16, right: 16, top: 8),
                padding: const EdgeInsets.all(32),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          data["title"],
                          overflow: TextOverflow.fade,
                          maxLines: 1,
                          softWrap: false,
                          style: Theme.of(context).textTheme.headline1,
                        )
                      ],
                    ),
                  ],
                ));
          }).toList(),
        );
      },
    );
  }

Let me know if you need more informations.

Upvotes: 1

Views: 151

Answers (4)

APEALED
APEALED

Reputation: 1663

In you ListViewconstructor, set primary: false since you are nesting it inside of a SingleChildScrollView.

Upvotes: 0

lepsch
lepsch

Reputation: 10379

You'd need to use FutureBuilder instead of StreamBuilder.

From the docs, the StreamBuilder is a Widget that builds itself based on the latest snapshot of interaction with a Stream. So, only the last item is going to show up on the screen.

Instead, transform the stream to a List with the toList() method and use it on the FutureBuilder.future property like so:

    ...

    return FutureBuilder<List<QuerySnapshot>>(
      future: _recipesStream.toList(),
      builder: (BuildContext context, snapshot) {

    ...

snapshot.data now is a List of QuerySnapshot. So, it's going to be a bit different to iterate over it:

      ...

      return ListView(
        shrinkWrap: true,
        children: snapshot.data!.map((query) {
          Map<String, dynamic> data = query.docs.first;

      ...

The result is going to be something like this:

enter image description here

Upvotes: 0

user18309290
user18309290

Reputation: 8370

Use ListView.builder to simplify things and remove unnecessary nested scrollviews. Something like this could work:

body: RecipesInformations(),

Widget build(BuildContext context) {
  return StreamBuilder<QuerySnapshot>(
    stream: _recipesStream,
    builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
...
      return ListView.builder(
        itemCount: snapshot.data!.docs.length,
        itemBuilder: (context, index) {
          final document = snapshot.data!.docs[index];
          return Container(
            ...
          );
        },
      ) 
...

Upvotes: 0

Aslan Demir
Aslan Demir

Reputation: 54

Removing SingleChildScrollView might help.

Upvotes: 1

Related Questions