Flutter谷歌登录插件nagorik_google_login的使用

如果您厌倦了实现复杂的Google登录过程，例如添加包、编写登录代码、添加懒加载等，此插件是您的最佳选择。

功能 #

  • 轻松集成Google Sign-In
  • 支持Android和iOS平台

开始使用 #

您需要设置Firebase并启用Google登录认证方法。

在项目的终端中，添加 cd android 然后 ./gradlew signingReport 或 gradlew signingReport。

将 SHA-1 和 SHA-256 添加到Firebase项目中。

使用方法 #

如何使用 nagorik_google_login

默认实现 #

NagorikGoogleLogin()

自定义实现 #

NagorikGoogleLogin(  
  isLoading: isLoading,  
  backgroundColor: Colors.blue,  
  borderColor: Colors.white,  
  foregroundColor: Colors.white,  
  customWidget: Container(),  
),

在这里，在 customWidget 中，如果您需要显示一个定制的组件，则使用此参数，否则它不是必需的。

完整示例Demo #

以下是一个完整的Flutter应用示例，展示了如何使用 nagorik_google_login 插件进行Google登录。

import 'package:flutter/material.dart';
import 'package:nagorik_google_login/nagorik_google_login.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GoogleLoginExample(),
    );
  }
}

class GoogleLoginExample extends StatefulWidget {
  @override
  _GoogleLoginExampleState createState() => _GoogleLoginExampleState();
}

class _GoogleLoginExampleState extends State<GoogleLoginExample> {
  bool isLoading = false;

  Future<void> handleGoogleSignIn() async {
    setState(() {
      isLoading = true;
    });

    try {
      // 这里可以添加Google登录的具体逻辑
      print("Google登录成功");
    } catch (e) {
      print("Google登录失败: $e");
    } finally {
      setState(() {
        isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Login Example'),
      ),
      body: Center(
        child: NagorikGoogleLogin(
          isLoading: isLoading,
          backgroundColor: Colors.blue,
          borderColor: Colors.white,
          foregroundColor: Colors.white,
          customWidget: Container(),
          onLoginSuccess: (userData) {
            print("用户数据: $userData");
          },
          onLoginError: (error) {
            print("登录错误: $error");
          },
        ),
      ),
    );
  }
}

更多关于Flutter谷歌登录插件nagorik_google_login的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter谷歌登录插件nagorik_google_login的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter应用中使用nagorik_google_login插件来实现谷歌登录的示例代码。这个插件允许你使用谷歌的身份验证服务来登录用户。

首先，确保你已经在pubspec.yaml文件中添加了nagorik_google_login依赖：

dependencies:
  flutter:
    sdk: flutter
  nagorik_google_login: ^x.y.z  # 请替换为最新版本号

然后，运行flutter pub get来安装依赖。

接下来，你需要配置你的Firebase项目以支持谷歌登录。这通常涉及在Firebase控制台中启用谷歌身份验证提供者，并下载GoogleService-Info.plist（iOS）或google-services.json（Android）文件，并将它们添加到你的项目中。

以下是Flutter应用的示例代码，展示如何使用nagorik_google_login插件：

import 'package:flutter/material.dart';
import 'package:nagorik_google_login/nagorik_google_login.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        // 假设你有一个AuthProvider来处理登录状态
        ChangeNotifierProvider(create: (_) => AuthProvider()),
      ],
      child: MaterialApp(
        title: 'Flutter Google Login Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: GoogleLoginScreen(),
      ),
    );
  }
}

class AuthProvider with ChangeNotifier {
  bool isSignedIn = false;
  GoogleUser? user;

  void signIn(GoogleUser googleUser) {
    user = googleUser;
    isSignedIn = true;
    notifyListeners();
  }

  void signOut() {
    user = null;
    isSignedIn = false;
    notifyListeners();
  }
}

class GoogleLoginScreen extends StatelessWidget {
  final GoogleSignIn _googleSignIn = GoogleSignIn(
    scopes: <String>[
      'email',
      'https://www.googleapis.com/auth/contacts.readonly',
    ],
  );

  @override
  Widget build(BuildContext context) {
    final AuthProvider authProvider = Provider.of<AuthProvider>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Google Login Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            if (authProvider.isSignedIn)
              Text(
                'Hello, ${authProvider.user?.displayName ?? ''}!',
                style: TextStyle(fontSize: 20),
              ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                try {
                  final GoogleUser? googleUser = await _googleSignIn.signIn();
                  if (googleUser != null) {
                    authProvider.signIn(googleUser);
                    // 你可以在这里导航到另一个屏幕或执行其他操作
                  }
                } catch (e) {
                  print(e);
                }
              },
              child: Text('Sign in with Google'),
            ),
            if (authProvider.isSignedIn)
              ElevatedButton(
                onPressed: () {
                  _googleSignIn.signOut();
                  authProvider.signOut();
                  // 你可以在这里导航回登录屏幕或执行其他操作
                },
                child: Text('Sign out'),
              ),
          ],
        ),
      ),
    );
  }
}

注意：

  1. 上面的代码使用了provider包来管理应用状态，这是一个流行的状态管理库。如果你不熟悉provider，可以简单地使用setState来更新UI。
  2. _googleSignIn.scopes中的范围可以根据你的应用需求进行调整。
  3. 请确保你已经正确配置了Firebase和谷歌开发者控制台，以便nagorik_google_login插件可以正常工作。
  4. 由于nagorik_google_login可能不是官方或广泛使用的插件名称，如果找不到这个包，请检查是否有拼写错误或考虑使用更流行的插件如google_sign_in。上面的代码示例是基于假设的nagorik_google_login插件的API设计的，实际使用时可能需要调整以适应真实插件的API。

如果你实际使用的是google_sign_in插件，代码会非常相似，只是导入的包和API调用会有所不同。

回到顶部