Question 247460 in Firebase Question posted in
An extensive official documentation can be found here.

Firebase – Flutter – ImagePicker not showing selected image but saving to database

On the profile page of my app I have an ImagePicker being called when the user selects the circular avatar image. The problem is that when the user selects the image, it isn’t displayed on the page. However, when the user saves the profile, the image is saved in both the database (under the user) and firebase storage. It even displays in real time if the user leaves and comes back. I can’t figure out why the initial ImagePicker doesn’t display the image.

Here is the code where the image is being displayed on the profile page:

...
                    child: Column(
                      children: [
                        Container(
                            padding: const EdgeInsets.all(2),
                            decoration: BoxDecoration(
                              border: Border.all(
                                  color: Colors.greenAccent.shade400, width: 2),
                              borderRadius: BorderRadius.circular(70),
                            ),
                            child: userData['profilePic'] == ''
                                ? CircleAvatar(
                                    radius: 56,
                                    backgroundColor: Colors.grey.shade900,
                                    child: const Icon(
                                      Icons.camera_alt,
                                      color: Colors.white,
                                      size: 50,
                                    ),
                                  )
                                : CircleAvatar(
                                    radius: 56,
                                    backgroundColor: Colors.white,
                                    backgroundImage:
                                        NetworkImage(userData['profilePic']))),

Here is the ImagePicker Code:

// Image Picker
  imagePickDialog() {
    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: Center(
              child: Text('Upload Image',
                  style: GoogleFonts.knewave(color: Colors.black))),
          content: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              InkWell(
                onTap: () async {
                  final ImagePicker _picker = ImagePicker();
                  final XFile? image =
                      await _picker.pickImage(source: ImageSource.camera);
                  if (image != null) {
                    profileImage = File(image.path);
                    setState(() {});
                    Navigator.pop(context);
                  }
                },
                child: Icon(
                  Icons.camera_alt,
                  size: 40,
                  color: Colors.greenAccent.shade400,
                ),
              ),
              const SizedBox(
                width: 30,
              ),
              InkWell(
                onTap: () async {
                  final ImagePicker _picker = ImagePicker();
                  final XFile? image = await _picker.pickImage(
                    source: ImageSource.gallery,
                  );
                  if (image != null) {
                    profileImage = File(image.path);
                    setState(() {});
                    Navigator.pop(context);
                  }
                },
                child: Icon(Icons.photo_library_rounded,
                    size: 40, color: Colors.greenAccent.shade400),
              ),
            ],
          ),
        );
      },
    );
  }

// Profile Pic File Image
  File? profileImage;

// Data Controller
  late DataController? dataController;

// Init State
  @override
  void initState() {
    // init data controller
    super.initState();
    // fetch data from myDocument from Data Controller
    dataController = Get.put(DataController());
    try {
      profileImage = dataController!.myDocument!.get('profilePic');
    } catch (e) {
      profileImage = null;
    }
  }

I first tried:

 profileImage == null
                              ? CircleAvatar(
                                  radius: 56,
                                  backgroundColor: Colors.grey.shade900,
                                  child: const Icon(
                                    Icons.camera_alt,
                                    color: Colors.white,
                                    size: 50,
                                  ),
                                )
                              : CircleAvatar(
                                  radius: 56,
                                  backgroundColor: Colors.white,
                                  backgroundImage: FileImage(
                                    profileImage!,
                                  ),
                                ),

That will display the image from the ImagePicker but it only saves it locally.

Then I tried:

 userData['profilePic'] == ''
                              ? CircleAvatar(
                                  radius: 56,
                                  backgroundColor: Colors.grey.shade900,
                                  child: const Icon(
                                    Icons.camera_alt,
                                    color: Colors.white,
                                    size: 50,
                                  ),
                                )
                              : CircleAvatar(
                                  radius: 56,
                                  backgroundColor: Colors.white,
                                  backgroundImage: NetworkImage(
                                    userData['profilePic'],
                                  ),
                                ),

That saves the image to the database, and will display in real time for the user but the ImagePicker doesn’t work.

What am I doing wrong?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Got it to work!

                return ListView(
              children: [
                // profile pic
                InkWell(
                  onTap: () {
                    imagePickDialog();
                    isImagePicked = !isImagePicked;
                  },
                  child: Container(
                    margin: const EdgeInsets.only(top: 35),
                    padding: const EdgeInsets.all(2),

                    // avatar circular border
                    child: Column(
                      children: [
                        Container(
                            padding: const EdgeInsets.all(2),
                            decoration: BoxDecoration(
                              border: Border.all(
                                  color: Colors.greenAccent.shade400, width: 2),
                              borderRadius: BorderRadius.circular(70),
                            ),
                            child: userData['profilePic'] == ''
                                ? CircleAvatar(
                                    radius: 56,
                                    backgroundColor: Colors.grey.shade900,
                                    child: const Icon(
                                      Icons.camera_alt,
                                      color: Colors.white,
                                      size: 50,
                                    ),
                                  )
                                : isImagePicked
                                    ? CircleAvatar(
                                        radius: 56,
                                        backgroundColor: Colors.white,
                                        backgroundImage:
                                            FileImage(profileImage!),
                                      )
                                    : CircleAvatar(
                                        radius: 56,
                                        backgroundColor: Colors.white,
                                        backgroundImage: NetworkImage(
                                            userData['profilePic']),
                                      )),
                      ],
                    ),


  2. 0 
    import 'dart:developer';
import 'dart:io';
import 'package:aishwarya_college/Widgets/uihelper.dart';
import 'package:aishwarya_college/screens/bottomnavigationbar.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import '../models/usermodel.dart';

class UserDetails extends StatefulWidget {
  final UserModel userModel;
  final User firebaseuser;
  UserDetails({required this.userModel, required this.firebaseuser});
  @override
  State<UserDetails> createState() => _UserDeatilsState();
}

class _UserDeatilsState extends State<UserDetails> {
  TextEditingController nameController = TextEditingController();
  File? pickedImage;

  void CheckValues() async {
    String name = nameController.text.trim();
    if (name == "" || pickedImage == "") {
      showDialog(
          context: context,
          builder: (BuildContext context) {
            return AlertDialog(
              title: Text("Enter Valid Details"),
              actions: [
                TextButton(
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    child: Text("Ok"))
              ],
            );
          });
    } else {
      UploadData();
    }
  }

  void UploadData() async {
    UiHelper.ShowIndicator(context);
    UploadTask uploadTask = FirebaseStorage.instance
        .ref("profilepictures")
        .child(widget.userModel.email.toString())
        .putFile(pickedImage!);
    TaskSnapshot snapshot = await uploadTask;
    String? imageUrl = await snapshot.ref.getDownloadURL();
    String? name = nameController.text.trim();
    widget.userModel.profilepic = imageUrl;
    widget.userModel.fullname = name;
    log(name);
    FirebaseFirestore.instance
        .collection("students")
        .doc(widget.userModel.email)
        .set(widget.userModel.toMap())
        .then((value) => showDialog(
            context: context,
            builder: (BuildContext context) {
              return AlertDialog(
                title: Text("Profile Uploaded"),
                actions: [
                  TextButton(
                      onPressed: () {
                        Navigator.pop(context);
                      },
                      child: Text("Ok"))
                ],
              );
            }));
    Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) => Bottom(
                userModel: widget.userModel,
                firebaseuser: widget.firebaseuser)));
  }

  void SelectImage() {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Text("Pick Image From"),
            content: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                ListTile(
                  onTap: () {
                    pickImage(ImageSource.camera);
                    Navigator.pop(context);
                  },
                  leading: Icon(Icons.camera_alt),
                  title: Text("Select From Camera"),
                ),
                ListTile(
                  onTap: () {
                    pickImage(ImageSource.gallery);
                    Navigator.pop(context);
                  },
                  leading: Icon(Icons.image),
                  title: Text("Select From Gallery"),
                )
              ],
            ),
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomInset: false,
        body: Container(
          decoration: BoxDecoration(
              gradient: LinearGradient(colors: [
            Colors.blue,
            Colors.white,
          ], begin: Alignment.topCenter, end: Alignment.bottomCenter)),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Padding(
                padding: const EdgeInsets.all(30.0),
                child: Stack(children: [
                  Card(
                    elevation: 16,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(16)),
                    child: Container(
                      height: 400,
                      width: 400,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(15),
                          color: Colors.white),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsetsDirectional.only(top: 45),
                    child: Container(
                        alignment: Alignment.center,
                        child: Text('Profile', style: TextStyle(fontSize: 25,fontWeight: FontWeight.bold))),
                  ),
                  GestureDetector(
                    onTap: () {
                      SelectImage();
                    },
                    child: Container(
                        margin: EdgeInsets.only(top: 85),
                        alignment: Alignment.center,
                        child: pickedImage != null
                            ? Card(
                          elevation: 8,
                              shape:CircleBorder(),
                              child: CircleAvatar(
                                  backgroundImage: FileImage(pickedImage!),
                                  radius: 55,
                                ),
                            )
                            : CircleAvatar(
                                radius: 54,
                                child: Image.network(
                                    "https://cdn.icon-icons.com/icons2/1378/PNG/512/avatardefault_92824.png"),
                              )),
                  ),
                  Padding(
                    padding: const EdgeInsetsDirectional.only(top: 220),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Container(
                          height: 45,
                          width: 280,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(8),
                              color: Colors.black12),
                          child: TextField(
                            controller: nameController,
                            keyboardType: TextInputType.text,
                            decoration: InputDecoration(
                                hintText: 'Full Name',
                                prefixIcon: Icon(Icons.person),
                                border: InputBorder.none),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsetsDirectional.only(top: 290),
                    child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          SizedBox(
                              height: 40,
                              width: 130,
                              child: ElevatedButton(
                                onPressed: () async {
                                  CheckValues();
                                },
                                child: Text('Submit'),
                                style: ElevatedButton.styleFrom(
                                    shape: RoundedRectangleBorder(
                                        borderRadius: BorderRadius.circular(8)),
                                    backgroundColor: Colors.blue),
                              )),
                        ]),
                  ),
                ]),
              )
            ],
          ),
        ));
  }

  pickImage(ImageSource imagetype) async {
    try {
      final photo = await ImagePicker().pickImage(source: imagetype);
      if (photo == null) return;
      final tempimage = File(photo.path);
      setState(() {
        pickedImage = tempimage;
      });
    } catch (ex) {
      log(ex.toString());
    }
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search