Sathwik Doddi
Sathwik Doddi

Reputation: 57

flutter scrollView not scrolling in Stream

I am working on a Flutter project that uses Firebase and has a StreamBuilder that creates a card that is similar to a blog App. Whenever I add a lot of "blogs", I get a bottom Overflow error and when I wrap body: MemoirsList(), in a SingleChildScrollView, the app won't let me scroll down.

Here is the code for the MemoirsList():

  Widget MemoirsList() {
    return Container(
      child: memoirsStream != null
          ? ListView(
            shrinkWrap: true,
              children: <Widget>[
                StreamBuilder(
                  stream: memoirsStream,
                  builder: (context, snapshot) {
                    return ListView.builder(
                        padding: EdgeInsets.symmetric(horizontal: 16),
                        itemCount: snapshot.data.documents.length,
                        shrinkWrap: true,
                        itemBuilder: (context, index) {
                          return MemoirsCard(
                            authorName: snapshot.data.documents[index].data['authorName'],
                            title: snapshot.data.documents[index].data["title"],
                            description: snapshot.data.documents[index].data['description'],
                            imgUrl: snapshot.data.documents[index].data['imgURL'],
                          );
                        });
                  },
                )
              ],
            )
          : Container(
              alignment: Alignment.center,
              child: CircularProgressIndicator(),
          ),
    );
  }

Code for MemoirsCard():

class MemoirsCard extends StatelessWidget {

  String imgUrl, title, description, authorName;
  MemoirsCard({@required this.imgUrl, @required this.title, @required this.description, @required this.authorName});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(bottom: 20),
      height: 200,
      child: Stack(
        children: <Widget>[
          ClipRRect(
            borderRadius: BorderRadius.circular(10), 
            child: Image.network(
              imgUrl, 
              width: MediaQuery.of(context).size.width,
              fit: BoxFit.cover
            )
          ),
          Container(
            height: 200,
            decoration: BoxDecoration(
              color: Colors.black54.withOpacity(0.3),
              borderRadius: BorderRadius.circular(10),
            ),
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Text(
                  title,
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 32,
                    fontWeight: FontWeight.w700
                  ),
                ),
                SizedBox(height: 8),
                Text(
                  description,
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 15,
                    fontWeight: FontWeight.w400
                  )
                ),
              ],
            ),
          ),
        ],
      )
    );
  }
}

Upvotes: 1

Views: 850

Answers (2)

Sathwik Doddi
Sathwik Doddi

Reputation: 57

Here is the final code for anyone who is wondering:

  Widget MemoirsList() {
    return SingleChildScrollView(
      child: memoirsStream != null
          ? Column(
              children: <Widget>[
                StreamBuilder(
                  stream: memoirsStream,
                  builder: (context, snapshot) {
                    if(snapshot.data == null) return CircularProgressIndicator(); //Removes called documents on null error
                    return ListView.builder(
                        padding: EdgeInsets.symmetric(horizontal: 16),
                        itemCount: snapshot.data.documents.length,
                        shrinkWrap: true,
                        physics: NeverScrollableScrollPhysics(),
                        itemBuilder: (context, index) {
                          return MemoirsCard(
                            authorName: snapshot.data.documents[index].data['authorName'],
                            title: snapshot.data.documents[index].data["title"],
                            description: snapshot.data.documents[index].data['description'],
                            imgUrl: snapshot.data.documents[index].data['imgURL'],
                          );
                        });
                  },
                )
              ],
            )
          : Container(
              alignment: Alignment.center,
              child: CircularProgressIndicator(),
          ),
    );
  }

Upvotes: 1

Jitesh Mohite
Jitesh Mohite

Reputation: 34180

Listview.Builder inside Listview, it's not a good option which the flutter suggest you

Just replace top Listview with Column

Modify code like this

SingleChildScrollView(
                child: Column(
                  children: <Widget>[
                    ListView.builder(
                        shrinkWrap: true,
                        physics: NeverScrollableScrollPhysics(),
                        ...

Upvotes: 1

Related Questions