title: Edit User Profile Page and Profile Picture. Using Real-Time Database flutter
body: <p>I am trying to pull user data from my UserProfileBrowse Data model and display it on my user profile edit page. Including the image. I also want to update the data into my real-time Database.
  <img src="https://i.stack.imgur.com/uXXyH.png" alt="User Profile Edit Page Display" /></p>
  <p><img src="https://i.stack.imgur.com/JvJVu.png" alt="RealTime Database in firestore" /></p>
  <p>THIS IS MY DATA MODEL</p>
  <pre><code>class UserProfileBrowse {
    String userId;
    int age;
    String name;
    String email;
    String imageUrl;
  
    UserProfileBrowse(
      this.userId,
      this.age,
      this.name,
      this.email,
      this.imageUrl,
    );
  
    Map&lt;dynamic, dynamic&gt; toJson() =&gt; &lt;dynamic, dynamic&gt;{
          'userId': userId,
          'age': age,
          'name': name,
          'email': email,
          'imageUrl' : imageUrl,
        };
  }
  </code></pre>
  <p>THIS IS MY USER PROFILE EDIT PAGE</p>
  <pre><code>import 'package:firebase_auth/firebase_auth.dart';
  import 'package:flutter/material.dart';
  import 'package:provider/provider.dart';
  import '../services/auth.dart';
  import 'home.dart';
  import 'settings.dart';
  import 'package:shadow_app_project/data_models/user_profile_browse.dart';
  import 'package:shadow_app_project/image_selection/user_edit_image.dart';
  import 'package:firebase_auth/firebase_auth.dart';
  import 'package:firebase_database/firebase_database.dart';
  
  class SettingsUI extends StatelessWidget {
    const SettingsUI({Key? key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return const MaterialApp(
        debugShowCheckedModeBanner: false,
        title: &quot;Setting UI&quot;,
        home: EditProfilePage(),
      );
    }
  }
  
  class EditProfilePage extends StatefulWidget {
    const EditProfilePage({Key? key}) : super(key: key);
  
    @override
    _EditProfilePageState createState() =&gt; _EditProfilePageState();
  }
  
  class _EditProfilePageState extends State&lt;EditProfilePage&gt; {
  
    String currentUser = (Auth().auth.currentUser as User).email.toString();
    TextEditingController displayNameController = TextEditingController();
    TextEditingController ageController = TextEditingController();
    bool isLoading = false;
    User? user;
    UserProfileBrowse? userModel;
    String? imageUrl;
    final refDatabase = FirebaseDatabase.instance;
    bool showPassword = false;
    @override
    Widget build(BuildContext context) {
  
      return Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).scaffoldBackgroundColor,
          elevation: 1,
          leading: IconButton(
            icon: const Icon(
              Icons.arrow_back,
              color: Colors.green,
            ),
            onPressed: () {
              Navigator.of(context).push(MaterialPageRoute(
                  builder: (BuildContext context) =&gt; const SettingsPage()));
            },
          ),
          actions: [
            IconButton(
              icon: const Icon(
                Icons.settings,
                color: Colors.green,
              ),
              onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(
                    builder: (BuildContext context) =&gt; const SettingsPage()));
              },
            ),
          ],
        ),
        body: Container(
          padding: const EdgeInsets.only(left: 16, top: 25, right: 16),
          child: GestureDetector(
            onTap: () {
              FocusScope.of(context).unfocus();
            },
            child: ListView(
              children: [
                const Text(
                  &quot;Edit Profile&quot;,
                  style: TextStyle(fontSize: 25, fontWeight: FontWeight.w500),
                ),
                const SizedBox(
                  height: 15,
                ),
                Container(
                  width: 130,
                  height: 130,
                  decoration: BoxDecoration(
                      border: Border.all(
                          width: 4,
                          color: Theme.of(context).scaffoldBackgroundColor),
                      boxShadow: [
                        BoxShadow(
                            spreadRadius: 2,
                            blurRadius: 10,
                            color: Colors.black.withOpacity(0.1),
                            offset: const Offset(0, 10))
                      ],
                      shape: BoxShape.circle,
                      image: const DecorationImage(
                          fit: BoxFit.cover,
                          image: NetworkImage(
                            &quot;https://images.pexels.com/photos/3307758/pexels-photo-3307758.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=3&amp;h=250&quot;,
                          ))),
                ),
                const SizedBox(
                  height: 35,
                ),
                TextField(
                  decoration: const InputDecoration(
                    labelText: &quot;Name&quot;,
                    border: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.teal)),
                    hintText: 'Input Name',
                  ),
                  controller: displayNameController,
                  keyboardType: TextInputType.name,
                ),
                TextField(
                  decoration: const InputDecoration(
                    labelText: &quot;Age&quot;,
                    border: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.teal)),
                    hintText: 'Input Age',
                  ),
                  controller: ageController,
                  //
                  keyboardType: TextInputType.number,
                ),
                const Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Text(&quot;Email: &quot;, style: TextStyle(fontSize: 20),),
                ),
                const SizedBox(
                  height: 35,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    TextButton(
                      onPressed: () {},
                      child: const Text(&quot;CANCEL&quot;,
                          style: TextStyle(
                              fontSize: 14,
                              letterSpacing: 2.2,
                              color: Colors.black)),
                    ),
                    TextButton(
                      onPressed: () {
                        FirebaseDatabase.instance.ref()
                            .child('useProfileBrowse')
                            .child(user!.uid)
                            .update({
                          'name': displayNameController.text //yes I know.
                        });
                        FirebaseDatabase.instance.ref()
                            .child('useProfileBrowse')
                            .child(user!.uid)
                            .update({
                          'age': ageController.text //yes I know.
                        });
                      },
                      child: const Text(
                        &quot;SAVE&quot;,
                        style: TextStyle(
                            fontSize: 14,
                            letterSpacing: 2.2,
                            color: Colors.white),
                      ),
                    )
                  ],
                )
              ],
            ),
          ),
        ),
      );
    }
  }
  </code></pre>
  <p>I am thinking to use a StreamBuilder in my body: with stream: FirebaseDatabase.instance.ref().child('userProfileBrowse').child(user!.uid).onValue,</p>
  <p>Any idea how can I display User profile Imageurl, name, and age from my real-time Database
  And also edit the information using stream builder or any other method</p>
  <p>I have just coded the UI for my profile edit page. I just want someone to help me retrieve data from my data model class and display it on my user edit page. A single line to display just a name from my data model will help a lot to understand how retrieving data works. I have already saved data(imageUrl, name, age) into my data models during the signup process. Just want to display it</p>