Flutter User Auth

Question

I'm new to flutter hence I need some help. I use the phone authentication method to log in a user. Now when the user is successfully logged in I receive the following error:

Here's my full code:

import 'package:flutter/material.dart';
import 'package:neuroequlibrium/reusable.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

class EditDetails extends StatefulWidget {
  @override
  _EditDetailsState createState() => _EditDetailsState();
}

class _EditDetailsState extends State<EditDetails> {
  final _firestore = Firestore.instance;
  final _auth = FirebaseAuth.instance;
  FirebaseUser loggedInUser;

  void getCurrentUser() async {
    final user = await _auth.currentUser();
    try {
      if (user != null) {
        loggedInUser = user;
        print(loggedInUser.phoneNumber);
      }
    } catch (e) {
      print(e);
    }
  }

  void initState() {
    // TODO: implement initState
    super.initState();

    getCurrentUser();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Verify your details'),
      ),
      body: Center(
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 50.0),
          child: Padding(
            padding: EdgeInsets.symmetric(
              horizontal: 0,
              vertical: 50.0,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                TextLabel('Name'),
                TextField(
                  onChanged: (value) {},
                  decoration: kInputStyle.copyWith(
                    hintText: 'Samyak',
                  ),
                ),
                SizedBox(height: 25.0),
                TextLabel('Date of birth'),
                TextField(
                  onChanged: (value) {},
                  decoration: kInputStyle.copyWith(hintText: '5/10/2003'),
                ),
                SizedBox(height: 25.0),
                TextLabel('Sex'),
                TextField(
                  onChanged: (value) {},
                  decoration: kInputStyle.copyWith(hintText: 'Male'),
                ),
                SizedBox(height: 25.0),
                TextLabel('Phone No.'),
                TextField(
                  onChanged: (value) {},
                  decoration:
                      kInputStyle.copyWith(hintText: loggedInUser.phoneNumber),
                ),
                SizedBox(height: 30.0),
                RoundedButton(
                  color: Colors.blueAccent,
                  text: 'Verify',
                  onPressed: () {
                    // Update Details & Redirect user
                    Navigator.pushNamed(context, 'additional_details1');
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

When I run getCurrentUser() in initState() function I don't get any errors and the user's number is printed in the console. How when I want to display it as a placeholder in one of the text fields the above exception is raised.

Also, as I hot reload my app, it starts working perfectly, and the number shows up in the text field without any changes to the code.

Note: I'm using flutter and android studio for development

Any help would be much appreciated!

Answer 1

The reason this is happening is because when Flutter builds the widget, first it builds the state of the widget, in that state you're trying to get the user's number BUT you're fetching the numbers only after you're building the widget - hence the error. When you hot reload flutter remembers the variables' data and that's why it is able to update the UI. 2 fixes can be made in order to fix this issue:

(1) - is to first call the getCurrentUser() and only then building the widget super.initState .

(2) - when building the object check the data of the variable and if it's null present a different widget. when getCurrentUser() is finished update the state of the widget using setState((){})

A simple way to check the variable is using the ? format like so:

  int a = 5;
  a == 5 ? print('yes') : print('no');

output is obviously yes