skip to Main Content

I am trying to implement a screen where a user would upload photos to add to their profile. I am using a StreamBuilder to do this. For some reason, on my simulator the screen works perfectly fine and loads all widgets normally, however when I run this specific screen on my physical device I have a runtime error due to a null check… Can someone help me find out why this is happening?

Something I also noticed is that on my physical device, inside of the Builder of StreamBuilder, the code falls to the else statement where I have a comment (// TODO() : implement connection state error check)… however on the simulator it executes the top level code block. That’s why I have some duplicate code right now.

Basically, Im checking Firebase storage for the user’s photos, if they don’t have any I will pass an empty string to symbolize that

Code:

import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:locusu/classes/firebase_methods.dart';
import 'package:locusu/classes/jcu_colors.dart';
import 'package:locusu/screens/dorm_pref.dart';
import 'package:locusu/widgets/picture_container.dart';

class OnboardPhotos extends StatefulWidget {
  const OnboardPhotos({super.key});

  @override
  State<OnboardPhotos> createState() => OnboardPhotosState();
}

class OnboardPhotosState extends State<OnboardPhotos> {

  late Stream<List<String>> streamData = FirebaseMethods().getProfilePhotos();

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
        resizeToAvoidBottomInset: false,
        backgroundColor: Colors.transparent,
        body: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.topRight,
              colors: [
                 JcuColors().gradientColor1,
                 JcuColors().gradientColor2,
              ]
            ),
          ),
          child: SingleChildScrollView(
            child: SizedBox(
              height: MediaQuery.of(context).size.height,
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      const SizedBox(height: 100),
                      
                      const Center(
                        child: Icon(
                          Icons.photo_album_outlined,
                          size: 75,
                          ),
                      ),
                      const SizedBox(height: 10),
                       Center(
                            child: Text(
                                "Add some photos to your profile",
                                textAlign: TextAlign.center,
                                style: GoogleFonts.montserrat(
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold,
                                  fontSize: 25,
                              ),
                            ),
                          ),

                          const SizedBox(height: 30),

                          StreamBuilder<List<String>>(
                          stream: streamData,
                          initialData: const [""],
                          builder: (context, AsyncSnapshot<List<String>> snapshot) {
                          List<String> photos = snapshot.data!;
                          print(snapshot.data![0] == "");
                          print(snapshot.hasData);
                          if(snapshot.hasData) {
                            return Column(
                              children: [
                                Row(
                                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                    children: [
                                      PictureContainer(photoURL: snapshot.data![0] == "" ? "" : photos[0]),
                                      PictureContainer(photoURL: snapshot.data![0] == "" ? "" : photos[1]),
                                      PictureContainer(photoURL: snapshot.data![0] == "" ? "" : photos[2]),
                                    ],
                                  ),
                                  const SizedBox(height: 15),

                                  Row(
                                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                    children: [
                                      PictureContainer(photoURL: snapshot.data![0] == "" ? "" : photos[3]),
                                      PictureContainer(photoURL: snapshot.data![0] == "" ? "" : photos[4]),
                                      PictureContainer(photoURL: snapshot.data![0] == "" ? "" : photos[5]),
                                    ],
                                  ),
                              ],
                            );
                          }
                          else if (snapshot.connectionState ==
                          ConnectionState.none) {
                          return Center(
                              child: Text(
                                  "No network connection, try again later.",
                                  textAlign: TextAlign.center,
                                  style: GoogleFonts.montserrat(
                                    fontWeight: FontWeight.bold,
                                    fontSize: 18,
                                  ),
                                )
                              );
                         }
                         else {
                          // TODO() : implement connection state error check
                          return Column(
                              children: [
                                Row(
                                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                    children: [
                                      PictureContainer(photoURL: snapshot.data![0] == "" ? "" : photos[0]),
                                      PictureContainer(photoURL: snapshot.data![0] == "" ? "" : photos[1]),
                                      PictureContainer(photoURL: snapshot.data![0] == "" ? "" : photos[2]),
                                    ],
                                  ),
                                  const SizedBox(height: 15),

                                  Row(
                                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                    children: [
                                      PictureContainer(photoURL: snapshot.data![0] == "" ? "" : photos[3]),
                                      PictureContainer(photoURL: snapshot.data![0] == "" ? "" : photos[4]),
                                      PictureContainer(photoURL: snapshot.data![0] == "" ? "" : photos[5]),
                                    ],
                                  ),
                              ],
                            );
                         }
              
                      }
                    ),

                    const SizedBox(height: 50),

                      Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 35.0),
                      child: GestureDetector(
                        onTap: () {
                          Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => const DormPreference()));
                        },
                        child: Container(
                          padding: const EdgeInsets.all(10),
                          decoration: BoxDecoration(
                            color: Colors.blue,
                            borderRadius: BorderRadius.circular(50),
                          ),
                          child: Center(
                            child: Text(
                              'Continue',
                                style: GoogleFonts.montserrat(
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold,
                                  fontSize: 22,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),

                    ],
                ),
            ),
          ),
        ),
    );
  }
}```

2

Answers


  1. Chosen as BEST ANSWER

    Thanks to @Darshan Kachhadiya and @Yeasin Sheikh I was able to figure out the problem. Here's the final code:

                              stream: streamData,
                              builder: (context, AsyncSnapshot<List<String>> snapshot) {
                                //print(snapshot.data);
                                if (snapshot.connectionState == ConnectionState.waiting) {
                                  // While waiting for data to arrive, you can show a loading indicator.
                                  return CircularProgressIndicator();
                                
                                } else if (!snapshot.hasData || snapshot.data == null || snapshot.data!.isEmpty) {
                                  // If there is no data available, show a message indicating no photos are present.
                                  return Column(
                                    children: [
                                      Row(
                                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                        children: [
                                          PictureContainer(photoURL: ""),
                                          PictureContainer(photoURL: ""),
                                          PictureContainer(photoURL: ""),
                                        ],
                                      ),
                                      const SizedBox(height: 15),
                                      Row(
                                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                        children: [
                                          PictureContainer(photoURL: ""),
                                          PictureContainer(photoURL: ""),
                                          PictureContainer(photoURL: ""),
                                        ],
                                      ),
                                    ],
                                  );
                                } else {
                                  print("Here");
                                  // Data is available, show the photos using the `PictureContainer` widget.
                                  List<String> photos = snapshot.data!;
                                  int numPhotos = photos.length;
                                  print(numPhotos);
                                  return Column(
                                    children: [
                                      Row(
                                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                        children: [
                                          numPhotos > 0 ? PictureContainer(photoURL: photos[0]) : PictureContainer(photoURL: ""),
                                          numPhotos > 1 ? PictureContainer(photoURL: photos[1]) : PictureContainer(photoURL: ""),
                                          numPhotos > 2 ? PictureContainer(photoURL: photos[2]) : PictureContainer(photoURL: ""),
                                        ],
                                      ),
                                      const SizedBox(height: 15),
                                      Row(
                                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                        children: [
                                          numPhotos > 3 ? PictureContainer(photoURL: photos[3]) : PictureContainer(photoURL: ""),
                                          numPhotos > 4 ? PictureContainer(photoURL: photos[4]) : PictureContainer(photoURL: ""),
                                          numPhotos > 5 ? PictureContainer(photoURL: photos[5]) : PictureContainer(photoURL: ""),
                                        ],
                                      ),
                                    ],
                                  );
                                }
                              },
                            ),```
    

  2. You can try this code,some change in code:

    StreamBuilder<List<String>>(
      stream: streamData,
      builder: (context, AsyncSnapshot<List<String>> snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          // While waiting for data to arrive, you can show a loading indicator.
          return CircularProgressIndicator();
        } else if (snapshot.hasError) {
          // If there's an error with the stream, display an error message.
          return Center(
            child: Text(
              "Error loading photos. Please try again later.",
              textAlign: TextAlign.center,
              style: GoogleFonts.montserrat(
                fontWeight: FontWeight.bold,
                fontSize: 18,
              ),
            ),
          );
        } else if (!snapshot.hasData || snapshot.data == null || snapshot.data!.isEmpty) {
          // If there is no data available, show a message indicating no photos are present.
          return Center(
            child: Text(
              "No photos available. Add some photos to your profile.",
              textAlign: TextAlign.center,
              style: GoogleFonts.montserrat(
                fontWeight: FontWeight.bold,
                fontSize: 18,
              ),
            ),
          );
        } else {
          // Data is available, show the photos using the `PictureContainer` widget.
          List<String> photos = snapshot.data!;
          return Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  PictureContainer(photoURL: photos[0]),
                  PictureContainer(photoURL: photos[1]),
                  PictureContainer(photoURL: photos[2]),
                ],
              ),
              const SizedBox(height: 15),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  PictureContainer(photoURL: photos[3]),
                  PictureContainer(photoURL: photos[4]),
                  PictureContainer(photoURL: photos[5]),
                ],
              ),
            ],
          );
        }
      },
    ),
    
     
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search