Why does my Firestore StreamBuilder skip when scrolling up if it's put inside a CustomScrollView? - firebase

Question

For some reason, my StreamBuilder skips a whole Container whenever I try scrolling up. However, it only starts skipping Containers when I start scrolling up from a certain point in my Firestore stream. Maybe like 2000 or so pixels down? Either way, the important aspect is that this does NOT happen when I put a normal container in the same scenario-only with StreamBuilders. This only issue only happens when I put it inside a CustomScrollView. (See video below)
This whole thing occurred after I was trying to wrap my StreamBuilder in a Column/ListView so that I could put other Containers above the Stream Containers. Wrapping it in a Column/ListView didn't work because, in a Column, the other container would not scroll down with the rest of the stream. In a ListView, the StreamBuilder had its own scrolling system that was separate.
Basically, my goal is to have one big list of widgets that scroll. There will be some at the top that will be separate from the ones that came from the Firestore (which will be at the bottom). Upon clicking on one of those Firestore Containers, I would be taken to another page.
This is the closest I've gotten to get my goal, but if there's another way, I'd love to hear it.
Video:
Only the GREEN Containers are from the Firestore StreamBuilder. NOT the red or blue ones.
https://youtu.be/jOo08oLhZP8
Code:
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:google_sign_in/google_sign_in.dart';
import 'package:firebase_auth/firebase_auth.dart';
class GeneralTopicsPage extends StatefulWidget {
GeneralTopicsPage({this.user, this.googleSignIn, this.index});
final FirebaseUser user;
final GoogleSignIn googleSignIn;
var index;
#override
_GeneralTopicsPageState createState() => new _GeneralTopicsPageState();
}
class _GeneralTopicsPageState extends State<GeneralTopicsPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
pinned: true,
title: Text(
"Testing",
),
),
SliverPadding(
//Works perfectly fine.
padding: EdgeInsets.all(16.0),
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
margin: EdgeInsets.all(20.0),
color: Colors.red,
height: 400.0,
child: Center(
child: Text(
"This is a normal, hardcoded Container in red and it works perfectly fine. Notice the lack of skipping when scrolling up.",
style: TextStyle(
color: Colors.white
),
textAlign: TextAlign.center,
),
),
);
},
childCount: 7,
),
),
),
SliverPadding(
//This is where it doesn't work as intended. Its behavior is separate from the containers located above and below it because it suddenly includes a StreamBuilder.
padding: EdgeInsets.all(16.0),
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return StreamBuilder(
stream: Firestore.instance.collection("content").snapshots(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (!snapshot.hasData) {
return Container(
child: Center(
child: CircularProgressIndicator(),
),
);
} else {
return Container(
margin: EdgeInsets.all(20.0),
color: Colors.green,
height: 400.0,
child: Center(
child: Text(
snapshot.data.documents[index]['title'],
style: TextStyle(
color: Colors.white
),
textAlign: TextAlign.center,
),
),
);
}
},
);
},
childCount: 8,
),
),
),
SliverPadding(
//Works perfectly fine.
padding: EdgeInsets.all(16.0),
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
margin: EdgeInsets.all(20.0),
color: Colors.blue,
height: 400.0,
child: Center(
child: Text(
"This is a normal, hardcoded Container in blue and it works perfectly fine. Notice the lack of skipping when scrolling up.",
style: TextStyle(
color: Colors.white
),
textAlign: TextAlign.center,
),
),
);
},
childCount: 3,
),
),
),
],
),
);
}
}