Flutter: Stream 生成器 -> 列表视图 99,285 个意外像素

Question

I am trying to pull user data from Firebase using a List View Builder inside of a stream builder. I'm getting 99,285 unexpected pixels at the bottom of the screen. The database is not very big at all, there are 2 users with 5 fields each but I'm only asking for one users data in this Stream. This makes me think there's some kind of repeating loop, there shouldn't be this much extra space but I don't know where I'm going wrong. I'm more curious as to what the pixels are, I could put a size constraint on the list view but I still don't want to be pulling unnecessary data every time I load the user page.

Error

Error: Cannot hit test a render box with no size.

The hitTest() method was called on this RenderBox: (...)
  
StreamBuilder<QuerySnapshot<Object?>> ← Row ← Column ← Center ← ⋯
  
parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
  
constraints: BoxConstraints(unconstrained)

layer: OffsetLayer#6ffdf DETACHED 

size: MISSING

Stream Builder -> List View

StreamBuilder(
              stream: collectionReference
                  .where("uid", isEqualTo: user.uid)
                  .snapshots(),
              builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
                if (snapshot.hasError) {
                  return const Text('Something went wrong.');
                }
                final data = snapshot.requireData;
                return ListView.builder( 
                  shrinkWrap: true, // I thought this line was supposed to stop the overflow
                  itemCount: data.size,
                  itemBuilder: (context, index) {
                    return Padding(
                      padding: const EdgeInsets.only(top: 8.0, left: 8.0), // A: This sets the padding for the profile picture
                      child: Align(
                        alignment: Alignment.topLeft,
                        child: SizedBox(
                          height: 80.0,
                          width: 80.0,
                          child: FittedBox(
                            //fit: BoxFit.contain,
                            child: GestureDetector(
                              onTap: () => uploadToStorage(),
                              child: CircleAvatar(
                                // radius: 20,
                                backgroundImage: NetworkImage(data.docs[index]['profileImageUrl']),
                              ),
                            ),
                          ),
                        ),
                      ),
                    );
                  },
                );
              },
            ),

Answer 1

I wrapped the Stream Builder in a ConstrainedBox widget to solve the issue. I also solved the error: "snapshot has no data or error by implementing a few if statements to check for snapshot data.

ConstrainedBox(
              constraints: const BoxConstraints(
                minWidth: 70,
                minHeight: 70,
                maxWidth: 150,
                maxHeight: 150,
              ),
              child: StreamBuilder(
                stream: collectionReference
                    .where("uid", isEqualTo: user.uid)
                    .snapshots(),
                builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
                  if (!snapshot.hasData) {
                    return const Text('Loading...');
                  } 
                  if (snapshot.hasError) {
                    return const Text('Something went wrong.');
                  }
                  final data = snapshot.requireData;
                  // listview height needs to be set
                  return ListView.builder(
                    shrinkWrap: true, // I thought this line was supposed to stop the overflow
                    itemCount: data.size,
                    itemBuilder: (context, index) {
                      return Padding(
                        padding: const EdgeInsets.only(
                          top: 8.0,
                          left: 8.0
                        ), // A: This sets the padding for the profile picture
                        child: Align(
                          alignment: Alignment.topLeft,
                          child: SizedBox(
                            height: 80.0,
                            width: 80.0,
                            child: FittedBox(
                              fit: BoxFit.contain,
                              child: GestureDetector(
                                onTap: () => uploadToStorage(),
                                child: CircleAvatar(
                                  radius: 20,
                                  backgroundImage: NetworkImage(
                                      data.docs[index]['profileImageUrl']),
                                ),
                              ),
                            ),
                          ),
                        ),
                      );
                    },
                  );
                },
              ),
            ),