【问题标题】:Flutter Firebase Auth: How to display the user email and name in the Flutter DrawerFlutter Firebase Auth:如何在 Flutter Drawer 中显示用户电子邮件和姓名
【发布时间】:2019-09-14 07:03:49
【问题描述】:

我已成功从 Firebase Auth 中检索到用户电子邮件和姓名。但我想在 Flutter Drawer 中显示这个

姓名和电子邮件检索:

    Future<FirebaseUser> _handleSignIn() async {
  final GoogleSignInAccount googleUser = await _googleSignIn.signIn();
  final GoogleSignInAuthentication googleAuth = await googleUser.authentication;

  final AuthCredential credential = GoogleAuthProvider.getCredential(
    accessToken: googleAuth.accessToken,
    idToken: googleAuth.idToken,
  );

  final FirebaseUser user = await _auth.signInWithCredential(credential);
  print("signed in " + user.displayName);
  print("signed in " + user.email);
  return user;
}

颤振抽屉:

drawer: new Drawer(
    elevation: 10.0,
    child: new ListView(
      children: <Widget>[
        new UserAccountsDrawerHeader(
          accountName: new Text("Name"), //I want to display user NAME here
          accountEmail: new Text("Email"), //display user EMAIL here 
          decoration: new BoxDecoration(
              image: new DecorationImage(
                  fit: BoxFit.fill,
                  image: new NetworkImage(
                      "https://img00.deviantart.net/35f0/i/2015/018/2/6/low_poly_landscape__the_river_cut_by_bv_designs-d8eib00.jpg"))),
        ),

【问题讨论】:

    标签: firebase flutter firebase-authentication


    【解决方案1】:

    只需调用当前用户,然后您将拥有 currentUser 数据,在您的抽屉中使用它

    // call this in initState for example
    final FirebaseUser user = await _auth.currentUser();
    
    // reset of code
    drawer: Drawer(
      elevation: 10.0,
      child: ListView(
        children: <Widget>[
          UserAccountsDrawerHeader(
            accountName: Text("${user.displayName}"),
            accountEmail: Text("${user.email}"),
            decoration: BoxDecoration(
              image: DecorationImage(
                fit: BoxFit.fill,
                image: NetworkImage("${user.photoUrl}"),
              ),
            ),
          ),
        ],
      ),
    ),
    

    整页示例

    import 'package:firebase_auth/firebase_auth.dart';
    import 'package:flutter/material.dart';
    
    class ExamplePage extends StatefulWidget {
      @override
      _ExamplePageState createState() => _ExamplePageState();
    }
    
    class _ExamplePageState extends State<ExamplePage> {
      final FirebaseAuth _auth = FirebaseAuth.instance;
      FirebaseUser user;
    
      @override
      void initState() {
        super.initState();
        initUser();
      }
    
      initUser() async {
        user = await _auth.currentUser();
        setState(() {});
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("this is an appbar yaay!"),
          ),
          drawer: Drawer(
            elevation: 10.0,
            child: ListView(
              children: <Widget>[
                UserAccountsDrawerHeader(
                  accountName: Text("${user?.displayName}"),
                  accountEmail: Text("${user?.email}"),
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      fit: BoxFit.fill,
                      image: NetworkImage("${user?.photoUrl}"),
                    ),
                  ),
                ),
              ],
            ),
          ),
          body: Center(
            child: Container(),
          ),
        );
      }
    }
    

    【讨论】:

    • 由于某种原因,当我在 sccount 名称中输入“new Text("${user.displayName}")”时,它会显示“未定义名称用户”。这就是我启动“FirebaseUser”的方式: void initState() async{ super.initState(); controller = new TabController(length: 3, vsync: this);最终 FirebaseUser 用户 = 等待 FirebaseAuth.instance.currentUser(); }
    • initstate 无论如何都不能异步,我将在几分钟内用完整示例更新我的答案
    • 现在结帐@aneesh-yalgi
    • 为什么不用FutureBuilder 而不是await
    • 是的,这是个好主意,当我写这个答案时,我不知道未来的建设者存在
    猜你喜欢
    • 2022-01-24
    • 2020-03-21
    • 1970-01-01
    • 2018-12-25
    • 2020-08-02
    • 2022-08-14
    • 2020-12-11
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多