title: Save Image from Image picker to firebase Storage in flutter
body: <p>I am trying to upload image in firebase storage getting the image from image picker plugin by accessing camera. Image is not uploading. I also add I change the firebase rules so only authenticated users can upload the image. Git hub <a href="https://github.com/shahryar-cmyk/chatApp" rel="nofollow noreferrer">Repo</a>. I used the image uploading logic defined at the <strong>auth_screen.dart</strong> <strong>Line No 48 to 59</strong>[I commented out for time being]. I also add as i add these line my other firebase fuctions which are running prefectly before. getting the errors.</p>
  <p><strong>auth_screen.dart</strong></p>
  <pre><code>import 'dart:io';
  
  import 'package:flutter/material.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/services.dart';
  import '../widgets/auth/auth_form.dart';
  
  class AuthScreen extends StatefulWidget {
    @override
    _AuthScreenState createState() =&gt; _AuthScreenState();
  }
  
  class _AuthScreenState extends State&lt;AuthScreen&gt; {
    final _auth = FirebaseAuth.instance;
    var _isLoading = false;
  
    void _submitAuthForm(
      String email,
      String password,
      String userName,
      File userImage,
      bool isLogin,
      BuildContext ctx,
    ) async {
      dynamic authResult;
      try {
        setState(() {
          _isLoading = true;
        });
        if (isLogin) {
          authResult = await _auth.signInWithEmailAndPassword(
            email: email,
            password: password,
          );
        } else {
          print(email);
          print(userName);
          print(userImage.path);
          authResult = await _auth.createUserWithEmailAndPassword(
            email: email,
            password: password,
          );
  
          // final FirebaseStorage storage = FirebaseStorage(
          //   app: FirebaseStorage.instance.app,
          //   storageBucket: 'gs://chatapp-1b780.appspot.com',
          // );
  
          // final StorageReference ref2 =
          //     storage.ref().child('userimage').child('${authResult.user.id}.jpg');
          // final StorageUploadTask uploadTask = ref2.putFile(userImage);
          // uploadTask.onComplete
          //     .then((value) =&gt; print(value))
          //     .catchError((error) =&gt; print(error));
          // print(uploadTask.lastSnapshot.error.toString());
  
          // ///...
          // final ref = FirebaseStorage.instance
          //     .ref()
          //     .child('user_image')
          //     .child(authResult.user.id + '.jpg');
          // await ref.putFile(userImage).onComplete;
  
          ///
          await FirebaseFirestore.instance
              .collection('users')
              .doc(authResult.user.uid)
              .set({
            'username': userName,
            'email': email,
          });
        }
      } on PlatformException catch (error) {
        var message = 'An error occured,Please check your credentials';
        if (error.message != null) {
          setState(() {
            _isLoading = false;
          });
          message = error.message;
        }
        print(message);
      } catch (error) {
        setState(() {
          _isLoading = false;
        });
        Scaffold.of(ctx).showSnackBar(
          SnackBar(
            content: Text(error.toString()),
            backgroundColor: Theme.of(ctx).errorColor,
          ),
        );
      }
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        backgroundColor: Theme.of(context).primaryColor,
        body: AuthForm(_submitAuthForm, _isLoading),
      );
    }
  }
  
  </code></pre>
  <p>image being picked using image picker from <strong>auth/auth_form.dart</strong> to  <strong>user_image_picker.dart</strong> where i added the argument so the image is passed down.
  <strong>auth/authform.dart</strong></p>
  <pre><code>import 'package:flutter/material.dart';
  import 'dart:io';
  
  import '../pickers/user_image_picker.dart';
  
  class AuthForm extends StatefulWidget {
    final bool isLoading;
    final void Function(String email, String password, String userName,
        File userImage, bool isLogin, BuildContext ctx) submitFn;
    AuthForm(this.submitFn, this.isLoading);
    @override
    _AuthFormState createState() =&gt; _AuthFormState();
  }
  
  class _AuthFormState extends State&lt;AuthForm&gt; {
    final _formKey = GlobalKey&lt;FormState&gt;();
    var _isLogin = true;
  
    String _userEmail = '';
    String _userName = '';
    String _userPassword = '';
    File _userImageFile;
    void _pickedImage(File image) {
      _userImageFile = image;
    }
  
    void _trysubmit() {
      final isValid = _formKey.currentState.validate();
      FocusScope.of(context).unfocus();
      if (_userImageFile == null &amp;&amp; !_isLogin) {
        Scaffold.of(context).showSnackBar(
          SnackBar(
            content: Text('Please Pick an Image'),
            backgroundColor: Theme.of(context).errorColor,
          ),
        );
        return;
      }
      if (isValid) {
        _formKey.currentState.save();
        print(_userEmail);
        print(_userPassword);
        widget.submitFn(_userEmail.trim(), _userPassword.trim(), _userName.trim(),
            _userImageFile, _isLogin, context);
        print(_userEmail);
        print(_userPassword);
      }
    }
  
    @override
    Widget build(BuildContext context) {
      return Center(
        child: Card(
          margin: EdgeInsets.all(20),
          child: SingleChildScrollView(
            child: Padding(
              padding: EdgeInsets.all(16),
              child: Form(
                key: _formKey,
                child: SingleChildScrollView(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: &lt;Widget&gt;[
                      if (!_isLogin)
                        UserImagePicker(
                          imagePickFn: _pickedImage,
                          
                        ),
                      TextFormField(
                        key: ValueKey('emailAdress'),
                        keyboardType: TextInputType.emailAddress,
                        decoration: InputDecoration(
                          labelText: 'Email address',
                        ),
                        validator: (value) {
                          if (value.isEmpty || !value.contains('@')) {
                            return 'Please return a valid email address';
                          }
                          return null;
                        },
                        onSaved: (newValue) {
                          _userEmail = newValue;
                        },
                      ),
                      if (!_isLogin)
                        TextFormField(
                          key: ValueKey('userName'),
                          decoration: InputDecoration(labelText: 'Username'),
                          validator: (value) {
                            if (value.isEmpty || value.length &lt; 4) {
                              return 'Please Enter at least 4 characters';
                            }
                            return null;
                          },
                          onSaved: (newValue) {
                            _userName = newValue;
                          },
                        ),
                      TextFormField(
                        key: ValueKey('password'),
                        decoration: InputDecoration(labelText: 'Password'),
                        obscureText: true,
                        validator: (value) {
                          if (value.isEmpty || value.length &lt; 7) {
                            return 'Please Enter at least 7 characters';
                          }
                          return null;
                        },
                        onSaved: (newValue) {
                          _userPassword = newValue;
                        },
                      ),
                      SizedBox(
                        height: 12,
                      ),
                      if (widget.isLoading) CircularProgressIndicator(),
                      if (!widget.isLoading)
                        RaisedButton(
                          onPressed: _trysubmit,
                          child: Text((_isLogin) ? 'Login' : 'SignUp'),
                        ),
                      if (!widget.isLoading)
                        FlatButton(
                          textColor: Theme.of(context).primaryColor,
                          child: Text(_isLogin
                              ? 'Create new account'
                              : 'I already have an account'),
                          onPressed: () {
                            setState(() {
                              _isLogin = !_isLogin;
                            });
                          },
                        ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ),
      );
    }
  }
  
  </code></pre>
  <p><strong>user_image_picker.dart</strong></p>
  <pre><code>import 'dart:io';
  
  import 'package:flutter/material.dart';
  import 'package:image_picker/image_picker.dart';
  
  class UserImagePicker extends StatefulWidget {
    UserImagePicker({this.imagePickFn});
    final void Function(File pickedImage) imagePickFn;
    @override
    _UserImagePickerState createState() =&gt; _UserImagePickerState();
  }
  
  class _UserImagePickerState extends State&lt;UserImagePicker&gt; {
    File _image;
    final picker = ImagePicker();
  
    Future&lt;void&gt; getImage() async {
      final pickedFile = await ImagePicker().getImage(source: ImageSource.camera);
  
      setState(() {
        _image = File(pickedFile.path);
      });
      widget.imagePickFn(_image);
    }
  
    @override
    Widget build(BuildContext context) {
      return Column(
        children: [
          CircleAvatar(
            radius: 40,
            backgroundColor: Colors.grey,
            backgroundImage: _image != null ? FileImage(_image) : null,
          ),
          FlatButton.icon(
            onPressed: getImage,
            icon: Icon(Icons.image),
            label: Text('Add Image'),
            textColor: Theme.of(context).primaryColor,
          ),
        ],
      );
    }
  }
  
  </code></pre>