编辑用户个人资料页面和个人资料图片。使用 Real-Time 数据库颤动

Question

我正在尝试从我的 UserProfileBrowse 数据模型中提取用户数据并将其显示在我的用户个人资料编辑页面上。包括图像。我还想将数据更新到我的 real-time 数据库中。

这是我的数据模型

class UserProfileBrowse {
  String userId;
  int age;
  String name;
  String email;
  String imageUrl;

  UserProfileBrowse(
    this.userId,
    this.age,
    this.name,
    this.email,
    this.imageUrl,
  );

  Map<dynamic, dynamic> toJson() => <dynamic, dynamic>{
        'userId': userId,
        'age': age,
        'name': name,
        'email': email,
        'imageUrl' : imageUrl,
      };
}

这是我的用户个人资料编辑页面

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: "Setting UI",
      home: EditProfilePage(),
    );
  }
}

class EditProfilePage extends StatefulWidget {
  const EditProfilePage({Key? key}) : super(key: key);

  @override
  _EditProfilePageState createState() => _EditProfilePageState();
}

class _EditProfilePageState extends State<EditProfilePage> {

  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) => const SettingsPage()));
          },
        ),
        actions: [
          IconButton(
            icon: const Icon(
              Icons.settings,
              color: Colors.green,
            ),
            onPressed: () {
              Navigator.of(context).push(MaterialPageRoute(
                  builder: (BuildContext context) => 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(
                "Edit Profile",
                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(
                          "https://images.pexels.com/photos/3307758/pexels-photo-3307758.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250",
                        ))),
              ),
              const SizedBox(
                height: 35,
              ),
              TextField(
                decoration: const InputDecoration(
                  labelText: "Name",
                  border: OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.teal)),
                  hintText: 'Input Name',
                ),
                controller: displayNameController,
                keyboardType: TextInputType.name,
              ),
              TextField(
                decoration: const InputDecoration(
                  labelText: "Age",
                  border: OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.teal)),
                  hintText: 'Input Age',
                ),
                controller: ageController,
                //
                keyboardType: TextInputType.number,
              ),
              const Padding(
                padding: EdgeInsets.all(8.0),
                child: Text("Email: ", style: TextStyle(fontSize: 20),),
              ),
              const SizedBox(
                height: 35,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  TextButton(
                    onPressed: () {},
                    child: const Text("CANCEL",
                        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(
                      "SAVE",
                      style: TextStyle(
                          fontSize: 14,
                          letterSpacing: 2.2,
                          color: Colors.white),
                    ),
                  )
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

我正在考虑在我的 body 中使用 StreamBuilder：with stream: FirebaseDatabase.instance.ref().child('userProfileBrowse').child( user!.uid).onValue,

知道如何显示我的 real-time 数据库中的用户个人资料图像 url、姓名和年龄并使用流生成器或任何其他方法编辑信息

我刚刚为个人资料编辑页面编写了 UI。我只是希望有人帮我从我的数据模型 class 中检索数据并将其显示在我的用户编辑页面上。仅显示我的数据模型中的名称的一行将有助于理解检索数据的工作原理。我已经在注册过程中将数据（imageUrl、姓名、年龄）保存到我的数据模型中。只想展示一下

Answer 1

您已经开始使用 Provider 作为状态管理，所以我建议您像这样使用 StreamProvider：

StreamProvider<String>(
  create: (_) => Profile(name: 'Yohan', initialImageURL: ''),
  initialData: ''.toString(),
  catchError: (_, error) => error.toString(),
  child: child(),
  builder: (context) {
        // Pretend this is loading data and reporting the percent loaded.
        
      },
),
)

或者您可以在每次使用 ChangeNotifier 从 firebase 获得更改时通知 UI，

有关示例，请访问 Docs

Answer 2

StreamProvider 的完整示例：

import 'dart:collection';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class Person {
  Person({required this.name, required this.initialAge});

  final String name;
  final int initialAge;

  Stream<String> get age async* {
    var i = initialAge;
    while (i < 85) {
      await Future.delayed(const Duration(seconds: 1), () {
        i++;
      });
      yield i.toString();
    }
  }
}

void main() {
  runApp(
    StreamProvider<String>(
      create: (_) => Person(name: 'Yohan', initialAge: 25).age,
      initialData: 25.toString(),
      catchError: (_, error) => error.toString(),
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Future Provider"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: Consumer<String>(
            builder: (context, String age, child) {
              return Column(
                children: <Widget>[
                  const Text("Watch Yohan Age..."),
                  const Text("name: Yohan"),
                  Text("age: $age"),
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}

编辑用户个人资料页面和个人资料图片。使用 Real-Time 数据库颤动

Edit User Profile Page and Profile Picture. Using Real-Time Database flutter

firebase

firebase-realtime-database

flutter

flutter-streambuilder