Display the firestore data like name, phone number that store without using StreamBuilder

I'm trying to do something like this. example

I store my data in my Firebase and I want to display the data like name, phone number and address like the diagram above. This is my database. enter image description here

So far I have success display the Form and it is able to update the info to database. This is my progress now. enter image description here

This is the code.

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

class Profile extends StatefulWidget {
  static const routeName = '/Profile';
  @override
  _ProfileState createState() => _ProfileState();
}

class _ProfileState extends State<Profile> {
  final user = FirebaseAuth.instance.currentUser;
  final _formKey = GlobalKey<FormState>();
  List<String> _users = ['Customer', 'Confinement Lady'];
  String _selectedUser;
  CollectionReference userInfo = FirebaseFirestore.instance.collection('users');

  TextEditingController name = TextEditingController();
  TextEditingController phone = TextEditingController();
  TextEditingController add1 = TextEditingController();
  TextEditingController add2 = TextEditingController();
  TextEditingController add3 = TextEditingController();

  FToast fToast;

  @override
  void initState() {
    super.initState();
    fToast = FToast();
    fToast.init(context);
  }

  _showToast(String text) {
    Widget toast = Container(
      padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(25.0),
        color: Colors.grey.shade100,
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(text),
        ],
      ),
    );

    fToast.showToast(
      child: toast,
      gravity: ToastGravity.BOTTOM,
      toastDuration: Duration(seconds: 2),
    );
  }

  void _updateProfile() {
    final isValid = _formKey.currentState.validate();
    FocusScope.of(context).unfocus();

    if (isValid) {
      if (_selectedUser == null) {
        _showToast('Please select a user type');
        return;
      }

      userInfo.doc(user.uid).set({
        'name': name.text,
        'phone': phone.text,
        'address1': add1.text,
        'address2': add2.text,
        'address3': add3.text,
        'userType': _selectedUser,
      }).whenComplete(() => {
        _showToast('Update sucessful')
          });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Edit Profile',
          style: TextStyle(
            fontSize: 30,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
        actions: [
          TextButton(
              onPressed: () => _updateProfile(),
              child: Text(
                'Save',
                style: TextStyle(color: Colors.white),
              ))
        ],
      ),
      backgroundColor: Theme.of(context).canvasColor,
      body: SingleChildScrollView(
        child: Container(
          height: MediaQuery.of(context).size.height * 1,
          child: Container(
            height: MediaQuery.of(context).size.height * 0.82,
            child: Card(
              margin: EdgeInsets.only(left: 20, top: 20, right: 20, bottom: 25),
              child: SingleChildScrollView(
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Form(
                    key: _formKey,
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        Container(
                          height: 150,
                          decoration: BoxDecoration(
                              shape: BoxShape.circle, color: Colors.grey),
                        ),
                        TextFormField(
                          key: ValueKey('name'),
                          validator: (value) {
                            if (value.isEmpty) {
                              return 'Please enter your name';
                            }
                            return null;
                          },
                          decoration: InputDecoration(
                            labelText: '1. Name',
                          ),
                          controller: name,
                        ),
                        TextFormField(
                          key: ValueKey('phone'),
                          validator: (value) {
                            if (value.isEmpty ||
                                value.length > 11 ||
                                value.length < 10) {
                              return 'Please enter a valid phone number';
                            }
                            return null;
                          },
                          decoration: InputDecoration(
                            labelText: '2. Phone number (01234567890)',
                          ),
                          controller: phone,
                          keyboardType: TextInputType.numberWithOptions(),
                        ),
                        TextFormField(
                          key: ValueKey('add1'),
                          decoration: InputDecoration(
                            labelText: '3. Address 1',
                          ),
                          controller: add1,
                        ),
                        TextFormField(
                          key: ValueKey('add2'),
                          decoration: InputDecoration(
                            labelText: '4. Address 2',
                          ),
                          controller: add2,
                        ),
                        TextFormField(
                          key: ValueKey('add3'),
                          decoration: InputDecoration(
                            labelText: '5. Address 3',
                          ),
                          controller: add3,
                        ),
                        TextFormField(
                          readOnly: true,
                          decoration: InputDecoration(
                            hintText: '6. User ID: ' + user.uid,
                          ),
                        ),
                        SizedBox(
                          height: 20,
                        ),
                        Align(
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '7. Please Select a User Type',
                            style: TextStyle(color: Colors.grey.shade700),
                            softWrap: true,
                          ),
                        ),
                        Align(
                          key: ValueKey('user'),
                          alignment: Alignment.centerLeft,
                          child: DropdownButton(
                            value: _selectedUser,
                            onChanged: (newValue) {
                              setState(() {
                                _selectedUser = newValue;
                              });
                            },
                            items: _users.map((user) {
                              return DropdownMenuItem(
                                child: Text(user),
                                value: user,
                              );
                            }).toList(),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

The expected result that I want is

When I click into the profile button It will display the personals information of the user. And once I click it I will be able to input the text I want and update it

Is it possible to do it without using StreamBuilder? If no, how should I do it?

Appreciate for the help.



Read more here: https://stackoverflow.com/questions/68474094/display-the-firestore-data-like-name-phone-number-that-store-without-using-stre

Content Attribution

This content was originally published by kiku at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: