我如何显示用户数据从firebase到flutter应用？

doinxwow 于 2023-01-18 发布在 Flutter

关注(0)|答案(2)|浏览(105)

我是flutter的新手，我想知道如何从firebase检索用户数据到我的个人资料页面？
我的firebase数据包含一个名字，电子邮件，血型，和出生日期。我想检索这些数据到我的应用程序的个人资料页面。
这是我的个人资料页代码

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'),
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

firebase

来源：https://stackoverflow.com/questions/75131174/how-do-i-show-user-data-from-firebase-to-my-flutter-app

2条答案

按热度按时间

plicqrtu1#

您必须从firebase检索数据，然后显示它。

示例：

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) //👈 retrive your user from this function
        .get()
        .then((value) {
      print(value.data()?[' uname'];
      setState(() {
        name = value.data()?[' uname'];
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
          child:
              name != null ? Text(name!) : const CircularProgressIndicator()),//👈 display your name here

       // 👉 Here add rest of your widgets according to your needs 👈 
    );
  }
}

赞(0）回复(0）举报 2023-01-18

ecr0jaav2#

你可以使用streambuilder从firebase中获取数据并真实的显示给用户。它可能在样式方面有一些问题，因为我没有使用任何IDE来编写它，但是我希望你能了解如何从streambuilder中获取数据。

示例：

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

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

class _ProfilePageState extends State<ProfilePage> {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
           children:[
           StreamBuilder(
               stream: FirebaseFirestore.instance
                                    .collection('your_collection')
                                    .snapshots(),
               builder: (context,
                                AsyncSnapshot<QuerySnapshot> snapshot) {
if (!snapshot.hasData) {
                                return Center(
                                  child: SizedBox(
                                    height: 50,
                                    width: 50,
                                    child: CircularProgressIndicator(
                                      color: Style.blueColorDark,
                                      backgroundColor: Style.olive,
                                    ),
                                  ),
                                );
                              }else{
return ListView(
                        shrinkWrap: true,
                        children: snapshot.data!.docs.map((document) {
                          
                          return Padding(
                            padding: const EdgeInsets.symmetric(
                                horizontal: 16),
                            child: Card(
                              color: const Color.fromRGBO(
                                  255, 255, 255, 1)
                                  .withOpacity(0.6),
                              shape: RoundedRectangleBorder(
                                borderRadius:
                                BorderRadius.circular(15),
                              ),
                              child: Column(
        children: <Widget>[
          Text(data['name']),
          Text(data['email']),
          Text(data['bloodType']),
          Text(data['dob']),
        ],
      ),
                            ),
                          );
                        }).toList(),
                      );
}
    }
    
    )
    ]

)

  }
}

赞(0）回复(0）举报 2023-01-18

我来回答

我如何显示用户数据从firebase到flutter应用？

2条答案

示例：

相关问题

热门标签

最新问答