title: Flutter Image Picker to Image URL
body: <p>i have the following code below. ive used image_picker package to upload pictures to be used as profile pictures. ive commented my previous code that uses an image url instead. my question is if there's a way to convert the images uploaded to images url, that way, i can display the profile picture when i get into the home screen.</p>
  <pre><code>// ignore_for_file: use_build_context_synchronously, deprecated_member_use
  
  import 'dart:io';
  
  import 'package:cloud_functions/cloud_functions.dart';
  import 'package:firebase_auth/firebase_auth.dart' as firebase;
  import 'package:flutter/cupertino.dart';
  import 'package:flutter/material.dart';
  import 'package:google_fonts/google_fonts.dart';
  import 'package:ibchat/pages/verify_email_page.dart';
  import 'package:ibchat/screens/screens.dart';
  import 'package:ibchat/theme.dart';
  import 'package:image_picker/image_picker.dart';
  import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
  
  import '../app.dart';
  
  class SignUpScreen extends StatefulWidget {
    static Route get route =&gt; MaterialPageRoute(
          builder: (context) =&gt; const SignUpScreen(),
        );
    const SignUpScreen({Key? key}) : super(key: key);
  
    @override
    State&lt;SignUpScreen&gt; createState() =&gt; _SignUpScreenState();
  }
  
  class _SignUpScreenState extends State&lt;SignUpScreen&gt; {
    final auth = firebase.FirebaseAuth.instance;
    final functions = FirebaseFunctions.instance;
  
    final _formKey = GlobalKey&lt;FormState&gt;();
    PickedFile? _imageFile;
    final ImagePicker _picker = ImagePicker();
    //final _profilePictureController = TextEditingController();
    final _nameController = TextEditingController();
    final _emailController = TextEditingController();
    final _passwordController = TextEditingController();
    final _designationController = TextEditingController();
    final _companyController = TextEditingController();
  
    final _emailRegex = RegExp(
        r&quot;^[a-zA-Z0-9.a-zA-Z0-9.!#$%&amp;'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+&quot;);
  
    bool _loading = false;
  
    Future&lt;void&gt; _signUp() async {
      if (_formKey.currentState!.validate()) {
        setState(() {
          _loading = true;
        });
        try {
          // Authenticate with Firebase
          final creds =
              await firebase.FirebaseAuth.instance.createUserWithEmailAndPassword(
            email: _emailController.text,
            password: _passwordController.text,
          );
          final user = creds.user;
          if (user == null) {
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(content: Text('Member not found')),
            );
            return;
          }
  
          // Set Firebase display name and profile picture
          List&lt;Future&lt;void&gt;&gt; futures = [
            /*if (_profilePictureController.text.isNotEmpty)
              creds.user!.updatePhotoURL(_profilePictureController.text),*/
            /*if (_picker.toString().isNotEmpty)
              creds.user!.updatePhotoURL(_picker.toString()),*/
            creds.user!.updateDisplayName(_nameController.text),
          ];
  
          await Future.wait(futures);
  
          // Create Stream user and get token using Firebase Functions
          final callable = functions.httpsCallable('createStreamUserAndGetToken');
          final results = await callable();
  
          // Connect user to Stream and set user data
          final client = StreamChatCore.of(context).client;
          await client.connectUser(
            User(
                //image: _profilePictureController.text,
                //image: _picker.toString(),
                id: creds.user!.uid,
                name: _nameController.text,
                extraData: {
                  &quot;email&quot;: _emailController.text,
                  &quot;designation&quot;: _designationController.text,
                  &quot;company&quot;: _companyController.text,
                }),
            results.data,
          );
  
          // Navigate to verify email page
          await Navigator.of(context).pushReplacement(VerifyEmailPage.route);
        } on firebase.FirebaseAuthException catch (e) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
                backgroundColor: Colors.red,
                content: Text(e.message ?? 'Verification error')),
          );
        } catch (e, st) {
          logger.e('Sign up error', e, st);
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(
                backgroundColor: Colors.red, content: Text('An error occured')),
          );
        }
        setState(() {
          _loading = false;
        });
      }
    }
  
    String? _nameInputValidator(String? value) {
      if (value == null || value.isEmpty) {
        return 'Name cannot be empty';
      }
      return null;
    }
  
    String? _emailInputValidator(String? value) {
      if (value == null || value.isEmpty) {
        return 'Email cannot be empty';
      }
      if (!_emailRegex.hasMatch(value)) {
        return 'Not a valid email';
      }
      return null;
    }
  
    String? _passwordInputValidator(String? value) {
      if (value == null || value.isEmpty) {
        return 'Password Cannot be empty';
      }
      if (value.length &lt;= 6) {
        return 'Password needs to be longer than 6 characters';
      }
      return null;
    }
  
    @override
    void dispose() {
      //_profilePictureController.dispose();
      _nameController.dispose();
      _emailController.dispose();
      _passwordController.dispose();
      _designationController.dispose();
      _companyController.dispose();
      super.dispose();
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          automaticallyImplyLeading: false,
          title: Image.asset('assets/images/logo.png', scale: 2),
          backgroundColor: Colors.transparent,
        ),
        body: (_loading)
            ? const Center(
                child: SizedBox(
                    height: 100,
                    width: 100,
                    child: CircularProgressIndicator(color: AppColors.accent)))
            : SingleChildScrollView(
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Form(
                    onWillPop: () async =&gt; false,
                    key: _formKey,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Padding(
                          padding: const EdgeInsets.only(bottom: 24),
                          child: Text(
                            'Registeration',
                            style: GoogleFonts.lato(
                                fontSize: 28, fontWeight: FontWeight.w800),
                          ),
                        ),
                        /*Padding(
                          padding: const EdgeInsets.all(12.0),
                          child: TextFormField(
                            controller: _profilePictureController,
                            decoration: const InputDecoration(
                              focusedBorder: UnderlineInputBorder(
                                borderSide:
                                    BorderSide(color: AppColors.accent, width: 2),
                              ),
                              hintText: 'Picture URL',
                              hintStyle: TextStyle(fontSize: 17),
                            ),
                            style: const TextStyle(fontSize: 17),
                            keyboardType: TextInputType.url,
                          ),
                        ),*/
                        imageProfile(),
                        Padding(
                          padding: const EdgeInsets.all(12.0),
                          child: TextFormField(
                            controller: _nameController,
                            validator: _nameInputValidator,
                            decoration: const InputDecoration(
                              focusedBorder: UnderlineInputBorder(
                                borderSide:
                                    BorderSide(color: AppColors.accent, width: 2),
                              ),
                              hintText: 'Name',
                              hintStyle: TextStyle(fontSize: 17),
                            ),
                            style: const TextStyle(fontSize: 17),
                            keyboardType: TextInputType.name,
                            autofillHints: const [
                              AutofillHints.name,
                              AutofillHints.username
                            ],
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(12.0),
                          child: TextFormField(
                            controller: _emailController,
                            validator: _emailInputValidator,
                            decoration: const InputDecoration(
                              focusedBorder: UnderlineInputBorder(
                                borderSide:
                                    BorderSide(color: AppColors.accent, width: 2),
                              ),
                              hintText: 'Email',
                              hintStyle: TextStyle(fontSize: 17),
                            ),
                            style: const TextStyle(fontSize: 17),
                            keyboardType: TextInputType.emailAddress,
                            autofillHints: const [AutofillHints.email],
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(12.0),
                          child: TextFormField(
                            controller: _passwordController,
                            validator: _passwordInputValidator,
                            decoration: const InputDecoration(
                              focusedBorder: UnderlineInputBorder(
                                borderSide:
                                    BorderSide(color: AppColors.accent, width: 2),
                              ),
                              hintText: 'Password',
                              hintStyle: TextStyle(fontSize: 17),
                            ),
                            style: const TextStyle(fontSize: 17),
                            obscureText: true,
                            enableSuggestions: false,
                            autocorrect: false,
                            keyboardType: TextInputType.visiblePassword,
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(12.0),
                          child: TextFormField(
                            controller: _designationController,
                            decoration: const InputDecoration(
                              focusedBorder: UnderlineInputBorder(
                                borderSide:
                                    BorderSide(color: AppColors.accent, width: 2),
                              ),
                              hintText: 'Designation',
                              hintStyle: TextStyle(fontSize: 17),
                            ),
                            style: const TextStyle(fontSize: 17),
                            keyboardType: TextInputType.name,
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(12.0),
                          child: TextFormField(
                            controller: _companyController,
                            decoration: const InputDecoration(
                              focusedBorder: UnderlineInputBorder(
                                borderSide:
                                    BorderSide(color: AppColors.accent, width: 2),
                              ),
                              hintText: 'Company',
                              hintStyle: TextStyle(fontSize: 17),
                            ),
                            style: const TextStyle(fontSize: 17),
                            keyboardType: TextInputType.name,
                          ),
                        ),
                        const SizedBox(height: 30),
                        Padding(
                          padding: const EdgeInsets.all(12.0),
                          child: SizedBox(
                            height: 50,
                            width: 250,
                            child: ElevatedButton(
                              style: ButtonStyle(
                                  shape: MaterialStateProperty.all&lt;
                                          RoundedRectangleBorder&gt;(
                                      RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(25.0),
                              ))),
                              onPressed: _signUp,
                              child: Text('Sign Up',
                                  style: GoogleFonts.lato(
                                      fontSize: 21,
                                      fontWeight: FontWeight.bold,
                                      color: Colors.black)),
                            ),
                          ),
                        ),
                        const SizedBox(
                          height: 20,
                        ),
                        const Padding(
                          padding: EdgeInsets.symmetric(vertical: 16.0),
                          child: Divider(),
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text('Already a Member?',
                                style: Theme.of(context).textTheme.subtitle2),
                            const SizedBox(width: 8),
                            TextButton(
                              style: TextButton.styleFrom(
                                  shape: RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(30.0)),
                                  primary: AppColors.accent),
                              onPressed: () {
                                Navigator.of(context).push(SignInScreen.route);
                              },
                              child: const Text('Sign In',
                                  style: TextStyle(color: AppColors.secondary)),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
              ),
      );
    }
  
    Widget imageProfile() {
      return Center(
        child: Stack(
          children: &lt;Widget&gt;[
            CircleAvatar(
              radius: 34,
              backgroundImage: _imageFile == null
                  ? const AssetImage(&quot;assets/images/profile_default.png&quot;)
                      as ImageProvider
                  : FileImage(File(_imageFile!.path)),
            ),
            Positioned(
              bottom: -2,
              right: -1,
              child: InkWell(
                  onTap: () {
                    showModalBottomSheet(
                      context: context,
                      builder: ((builder) =&gt; bottomSheet()),
                    );
                  },
                  child: const Icon(CupertinoIcons.camera_fill,
                      color: AppColors.accent, size: 20)),
            )
          ],
        ),
      );
    }
  
    Widget bottomSheet() {
      return Container(
          height: 100,
          width: MediaQuery.of(context).size.width,
          margin: const EdgeInsets.symmetric(
            horizontal: 20,
            vertical: 20,
          ),
          child: Column(
            children: &lt;Widget&gt;[
              const Text(
                &quot;Upload a Profile Photo&quot;,
                style: TextStyle(
                  fontSize: 18.0,
                ),
              ),
              const SizedBox(height: 10),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: &lt;Widget&gt;[
                  FlatButton.icon(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(20.0)),
                      icon: const Icon(CupertinoIcons.camera_fill),
                      onPressed: () {
                        takePhoto(ImageSource.camera);
                      },
                      label: const Text(&quot;Camera&quot;)),
                  FlatButton.icon(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(20.0)),
                      icon:
                          const Icon(CupertinoIcons.photo_fill_on_rectangle_fill),
                      onPressed: () {
                        takePhoto(ImageSource.gallery);
                      },
                      label: const Text(&quot;Photos&quot;)),
                ],
              )
            ],
          ));
    }
  
    void takePhoto(ImageSource source) async {
      final pickedFile = await _picker.getImage(source: source);
      setState(() {
        _imageFile = pickedFile!;
      });
    }
  }
  </code></pre>