Display image from imagepicker and firestore flutter

Question

i have a edit profile page that look like this

Above is where user pick their image and display picked image then immediately store them into firestore database. user click the background for choosing background image from imagepicker.

the thing thats work is after user pick image, the image is displayed in the screen but after navigate to another page it goes back to default image (white brick image)

The problem lies when displaying the chosen image from user for the background image, this is the display of firestore.

this is the firestore

This is the code for background image

File? imageFileBackground;
String? myImageBackground;

 GestureDetector(
                  child: Container(
                    color: Colors.grey,
                    height: 200,
                    child: Image(
                      image: imageFileBackground == null
                          ? NetworkImage(myImageBackground!) // this //get error null check is used on null value
                          : Image.file(imageFileBackground!).image,
                    ),
                  ),
                  onTap: () {
                    _showImageDialogBackground();
                    print('_showImageDialogBACKGROUND is pressed');
                  },
                ),

This is for get data from users database

Future getData() async {
    setState(() {
      isLoading = true;
    });

    FirebaseAuth.instance.currentUser!;
    // final DataUser =
    await FirebaseFirestore.instance
        .collection('users')
        .doc(FirebaseAuth.instance.currentUser!.uid)
        .get()
        .then<dynamic>((DocumentSnapshot snapshot) async {
      myDescription = snapshot.get('description');
      myName = snapshot.get('name');
      myEducation = snapshot.get('education');
      myImage = snapshot.get('userImage');
      myImageBackground = snapshot.get('userImageBackground');
    });
    setState(() {
      isLoading = false;
    });
  }

above the widget build

@override
  void initState() {
    // TODO: implement initState
    super.initState();
    getData();
  }

i get error null check is used on null value even though in firestore is not null?

This is another alternative i have,

GestureDetector(
                  child: Container(
                    color: Colors.grey,
                    child: imageFileBackground == null
                        ? Image.network(
                            'https://images.unsplash.com/photo-1531685250784-7569952593d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80',
                            width: double.infinity,
                            height: coverheight,
                            fit: BoxFit.cover,
                          )
                        : Container(
                            width: double.infinity,
                            height: coverheight,
                            child: Image(
                                image: Image.file(imageFileBackground!).image)),
                  ),
                  onTap: () {
                    _showImageDialogBackground();
                    print('_showImageDialogBACKGROUND is pressed');
                  },
                ),

But the second one cannot display the image, just the image that used if userimagebackground is empty.

any suggestion how to correct it?

Answer 1

if you sure you are sure the myImage = snapshot.get('userImage') and myImageBackground = snapshot.get('userImageBackground') retrives the url from firestore use this snippet

   GestureDetector(
                      child: Container(
                        color: Colors.grey,
                        height: 200,
                        child: Image(
                          image: imageFileBackground != null
                              ? Image.file(imageFileBackground!).image :Image.network( myImageBackground ??
                            'https://images.unsplash.com/photo-1531685250784-7569952593d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80',
                            width: double.infinity,
                            height: coverheight,
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),
                      onTap: () {
                        _showImageDialogBackground();
                        print('_showImageDialogBACKGROUND is pressed');
                      },
                    ),