how to retrieve phone number from firebase using flutter

Question

How to retrieve phone number which is used during phone authentication in Firebase and display it using flutter, I tried this below method but it is not working for me:

    FirebaseAuth.instance.currentUser().then((user) {
      _userId = user.uid;
      _phone = user.phoneNumber;
    });

This is my full code

    class HomePageState extends State<HomeScreen>{
  String _userId,_phone;

  @override
  Widget build(BuildContext context) {
       FirebaseAuth.instance.currentUser().then((user) {
      _userId = user.uid;
      _phone = user.phoneNumber;
    });

    var myGridView = new GridView.builder(
      itemCount: services.length,
      gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        // childAspectRatio: (itemWidth / itemHeight),
      ),
      itemBuilder: (BuildContext context, int index) {
        return FlatButton(
          child: Padding(
            padding: const EdgeInsets.all(0.0),
            // child:new Card(
            //elevation: 5.0,
            child: new Container(
              alignment: Alignment.centerLeft,
              child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    new Text(_userId), 
                  ],
                ),
              ),
            ),
          ),
          onPressed: () {
            String catgry = services[index];
            if (catgry == "coming soon") {
              showDialog(
                  barrierDismissible: false,
                  context: context,
                  child: new CupertinoAlertDialog(
                    title: new Column(
                      children: <Widget>[
                        new Text("This feature is coming soon"),
                        new Icon(
                          Icons.favorite,
                          color: Colors.red,
                        ),
                      ],
                    ),
                    // content: new Text( services[index]),
                    actions: <Widget>[
                      new FlatButton(
                          onPressed: () {
                            Navigator.of(context).pop();
                          },
                          child: new Text("OK"))
                    ],
                  ));
            } else {
              Navigator.push(
                  context,
                  new MaterialPageRoute(
                      builder: (context) => Details(catgry,phone1)));
            }
          },
        );
      },
    );

    return new Scaffold(
      appBar: new AppBar(
        backgroundColor: Colors.black,
        title: Text("Appbar", style: TextStyle(color: Colors.white),),
      ),),
      body: myGridView,
      bottomNavigationBar: CustomBottomBar(),
    );
  }
}

Answer 1

You can do this using async/await and once you get the data you can call setState()

String phone;

@override
void initState(){
  super.initState();
  getPhone();
}

getPhone() async{
 FirebaseUser currentUser = await FirebaseAuth.instance.currentUser();
 setState(() {
   phone=currentUser.phoneNumber;
 });
}

Answer 2

SInce you're using a StatefulWidget, you can create a getUser function that will update the userId and phone then call the Function in your initState. Also add a loading screen with Center(child: CircularProgressIndicator()) when fetching the values

class _HomeScreenState extends State<HomeScreen> {
  String _userId,_phone;
  bool loading = true;
  
  getUser(){
    FirebaseAuth.instance.currentUser().then((user) {
      _userId = user.uid;
      _phone = user.phoneNumber;
      loading = false;
      setState(() {});
    });
  }

  @override
  void initState() {
    super.initState();
    getUser();
  }
  
  @override
  Widget build(BuildContext context) {
    var myGridView = new GridView.builder(
      itemCount: services.length,
      gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        // childAspectRatio: (itemWidth / itemHeight),
      ),
      itemBuilder: (BuildContext context, int index) {
        return FlatButton(
          child: Padding(
            padding: const EdgeInsets.all(0.0),
            // child:new Card(
            //elevation: 5.0,
            child: new Container(
              alignment: Alignment.centerLeft,
              child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    new Text(_userId),
                  ],
                ),
              ),
            ),
          ),
          onPressed: () {
            String catgry = services[index];
            if (catgry == "coming soon") {
              showDialog(
                  barrierDismissible: false,
                  context: context,
                  child: new CupertinoAlertDialog(
                    title: new Column(
                      children: <Widget>[
                        new Text("This feature is coming soon"),
                        new Icon(
                          Icons.favorite,
                          color: Colors.red,
                        ),
                      ],
                    ),
                    // content: new Text( services[index]),
                    actions: <Widget>[
                      new FlatButton(
                          onPressed: () {
                            Navigator.of(context).pop();
                          },
                          child: new Text("OK"))
                    ],
                  ));
            } else {
              Navigator.push(
                  context,
                  new MaterialPageRoute(
                      builder: (context) => Details(catgry,phone1)));
            }
          },
        );
      },
    );

    return new Scaffold(
      appBar: new AppBar(
        backgroundColor: Colors.black,
        title: Text("Appbar", style: TextStyle(color: Colors.white),),
      ),
      body: loading?Center(child: CircularProgressIndicator()):myGridView,
      bottomNavigationBar: CustomBottomBar(),
    );
  }
}