如何将 Firebase 添加到 Flutter 应用程序

时间:2021-04-11 12:18:56

标签: firebase flutter dart firebase-authentication

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'Header1.dart';
import 'InputWrapper1.dart';

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset : false,
      body: Container(
        width: double.infinity,
        decoration: BoxDecoration(
          gradient: LinearGradient(begin: Alignment.topCenter, colors: [
            Colors.blue[500],
            Colors.purple[300],
            Colors.purple[400]
          ]),
        ),
        child: Column(
          children: <Widget>[
            SizedBox(height: 80,),
            Header1(),
            Expanded(child: Container(
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(60),
                    topRight: Radius.circular(60),
                  )
              ),
              child: InputWrapper1(),
            ))

          ],
        ),
      ),
    );
  } 
}

我想将 firebase 添加到此登录和注册页面,但我很困惑,看到许多视频他们正在添加登录功能,但在这里,每个元素都分为多个部分,在哪里添加? [1]:https://i.stack.imgur.com/Mkh7W.jpg [2]:https://i.stack.imgur.com/zqPYE.jpg

1 个答案:

答案 0 :(得分:1)

您应该将 UI 与登录逻辑以及与数据管理相关的所有其他内容分开。例如,使用 provider package 并设置一个登录提供程序来处理您的登录逻辑。我建议您观看 this video 以了解有关正确状态管理的更多信息。

设置登录提供程序后,您可以从源代码中的任何位置访问登录功能。 Flutter 中的 Firebase 身份验证在使用 Firebase authentication package 时效果最佳。以防万一你还没有使用它:)