Home > front end >  How do i show user data from firebase to my flutter app?
How do i show user data from firebase to my flutter app?

Time:01-16

im new to flutter and i wanted to know how can i retrieve a user data from firebase to my profile page?

my firebase data contain a name, email, blood type, and a date of birth. and i would like to retrieve these data to my app's profile page.

this is my profile page code

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:line_awesome_flutter/line_awesome_flutter.dart';
import '../Reminder/ui/theme.dart';

class ProfilePage extends StatefulWidget {
  const ProfilePage({super.key});

  @override
  State<ProfilePage> createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
  final user = FirebaseAuth.instance.currentUser!;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        //leading: IconButton(onPressed: (){}, icon: const Icon(Icons.arrow_back_ios_new),),
        centerTitle: true,
        title: Text(
          'Profile',
          style: headingStyle,
        ),
        backgroundColor: Get.isDarkMode ? Colors.grey[700] : Colors.white,
      ),
      body: SingleChildScrollView(
        child: Container(
          padding: const EdgeInsets.all(10),
          child: Column(
            children: [
              SizedBox(
                width: 120,
                height: 120,
                child: Image(image: AssetImage("images/profile.png")),
              ),
              const SizedBox(height: 50),
              Form(
                child: Column(
                  children: [
                    TextFormField(
                      decoration: InputDecoration(
                          prefixIconColor: Get.isDarkMode?Colors.black:Colors.white,
                          focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(100), borderSide: BorderSide(color: Get.isDarkMode?Colors.white:Colors.black,)),
                          labelText: "Email",
                          prefixIcon: Icon(LineAwesomeIcons.envelope_1, color:  Get.isDarkMode?Colors.white:Colors.black),
                          border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(100))),
                    ),
                    SizedBox(height: 10),
                    TextFormField(
                      decoration: InputDecoration(
                          prefixIconColor: Get.isDarkMode?Colors.black:Colors.white,
                          focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(100), borderSide: BorderSide(color: Get.isDarkMode?Colors.white:Colors.black,)),
                          labelText: "Full Name",
                          prefixIcon: Icon(LineAwesomeIcons.user, color:  Get.isDarkMode?Colors.white:Colors.black),
                          border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(100))),
                    ),
                    SizedBox(height: 10),
                    TextFormField(
                      decoration: InputDecoration(
                          prefixIconColor: Get.isDarkMode?Colors.black:Colors.white,
                          focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(100), borderSide: BorderSide(color: Get.isDarkMode?Colors.white:Colors.black,)),
                          labelText: "Date of Birth",
                          prefixIcon: Icon(LineAwesomeIcons.baby_carriage, color:  Get.isDarkMode?Colors.white:Colors.black),
                          border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(100))),
                    ),
                    SizedBox(height: 10),
                    TextFormField(
                      decoration: InputDecoration(
                          prefixIconColor: Get.isDarkMode?Colors.black:Colors.white,
                          focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(100), borderSide: BorderSide(color: Get.isDarkMode?Colors.white:Colors.black,)),
                          labelText: "Blood Type",
                          prefixIcon: Icon(Icons.bloodtype, color:  Get.isDarkMode?Colors.white:Colors.black),
                          border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(100))),
                    ),
                    SizedBox(height: 15,),
                    SizedBox(
                      width: 100,
                      child: MaterialButton(
                        onPressed: () {
                          FirebaseAuth.instance.signOut();
                        },
                        color: Colors.redAccent,
                        child: Text('SIGN OUT'),
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

CodePudding user response:

You would have to retrive data from firebase and then display it.

Example:

class ProfilePage extends StatefulWidget {
  const ProfilePage({super.key});

  @override
  State<ProfilePage> createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
  String? name;

  @override
  void initState() {
    FirebaseFirestore.instance
        .collection('Users')
        .doc(FirebaseAuth.instance.currentUser!.uid) //           
  • Related