Flutter谷歌服务集成插件google的使用

Flutter 谷歌服务集成插件 google 的使用

在本教程中，我们将学习如何在 Flutter 应用程序中集成 Google 服务。我们将使用 google_sign_in 插件来实现用户通过 Google 账号登录的功能。

步骤 1: 添加依赖

首先，在你的 pubspec.yaml 文件中添加 google_sign_in 依赖：

dependencies:
  flutter:
    sdk: flutter
  google_sign_in: ^5.2.1

然后运行 flutter pub get 来获取新的依赖项。

步骤 2: 配置 Google Sign-In

在 Android 和 iOS 平台上分别配置 Google Sign-In。

Android 配置

  1. 在 Firebase 控制台创建一个新项目并添加 Android 应用。
  2. 下载 google-services.json 文件，并将其放置在 android/app/ 目录下。

iOS 配置

  1. 在 Firebase 控制台创建一个新项目并添加 iOS 应用。
  2. 下载 GoogleService-Info.plist 文件，并将其放置在 ios/Runner/ 目录下。

步骤 3: 实现 Google 登录功能

现在我们可以在 Flutter 应用程序中实现 Google 登录功能了。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Google Sign-In Example'),
        ),
        body: Center(
          child: GoogleSignInButton(),
        ),
      ),
    );
  }
}

class GoogleSignInButton extends StatefulWidget {
  [@override](/user/override)
  _GoogleSignInButtonState createState() => _GoogleSignInButtonState();
}

class _GoogleSignInButtonState extends State<GoogleSignInButton> {
  final GoogleSignIn _googleSignIn = GoogleSignIn(scopes: ['email']);
  bool _isSignedIn = false;

  [@override](/user/override)
  void initState() {
    super.initState();
    _googleSignIn.onCurrentUserChanged.listen((account) {
      setState(() {
        _isSignedIn = account != null;
      });
    });
    _googleSignIn.signInSilently();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () async {
        if (_isSignedIn) {
          await _googleSignIn.signOut();
          setState(() {
            _isSignedIn = false;
          });
        } else {
          await _googleSignIn.signIn();
          setState(() {
            _isSignedIn = true;
          });
        }
      },
      child: _isSignedIn
          ? Text('已登录')
          : Text('使用 Google 登录'),
    );
  }
}

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

1 回复

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


在Flutter项目中集成并使用Google服务，通常会涉及到多个插件，这些插件可以帮助你访问Google的各种API和功能，如身份验证、云存储、实时数据库等。以下是一个基本的示例，展示了如何在Flutter项目中集成并使用googleapis包来访问Google Calendar API。

步骤 1: 设置Flutter项目

首先，确保你已经创建了一个Flutter项目。如果还没有，可以使用以下命令创建一个新的Flutter项目：

flutter create my_flutter_app
cd my_flutter_app

步骤 2: 添加依赖项

在pubspec.yaml文件中添加googleapis和google_sign_in依赖项：

dependencies:
  flutter:
    sdk: flutter
  googleapis: ^2.0.0  # 确保使用最新版本
  google_sign_in: ^5.0.0  # 确保使用最新版本

然后运行flutter pub get来安装这些依赖项。

步骤 3: 配置Google API凭证

  1. 前往Google Cloud Console并创建一个新的项目。
  2. 启用Google Calendar API。
  3. 创建一个OAuth 2.0客户端ID凭证，选择Web应用类型，并记录下生成的CLIENT_ID和CLIENT_SECRET。
  4. 下载并保存生成的credentials.json文件。

步骤 4: 编写Flutter代码

在lib/main.dart文件中，编写以下代码来集成Google Sign-In并使用Google Calendar API：

import 'package:flutter/material.dart';
import 'package:googleapis/calendar/v3.dart';
import 'package:googleapis_auth/auth_io.dart';
import 'package:google_sign_in/google_sign_in.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Google Calendar API Example'),
        ),
        body: CalendarScreen(),
      ),
    );
  }
}

class CalendarScreen extends StatefulWidget {
  @override
  _CalendarScreenState createState() => _CalendarScreenState();
}

class _CalendarScreenState extends State<CalendarScreen> {
  GoogleSignIn _googleSignIn = GoogleSignIn(
    scopes: <String>[
      CalendarApi.calendarReadonlyScope,
    ],
  );

  Future<void> _handleSignIn() async {
    final GoogleSignInAccount? googleUser = await _googleSignIn.signIn();

    if (googleUser == null) return;

    final AuthClient authClient = await googleUser.authentication;

    final CalendarApi calendar = CalendarApi(authClient);

    try {
      List<Event> events = await calendar.events.list('primary').execute();
      print(events);
    } catch (e) {
      print('Failed to get events: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: _handleSignIn,
        child: Text('Sign in with Google and get Calendar Events'),
      ),
    );
  }
}

步骤 5: 配置OAuth凭证

将下载的credentials.json文件放置在项目的android/app目录下。此外，你还需要在Android和iOS项目中配置OAuth重定向URI。

对于Android，你需要在android/app/src/main/AndroidManifest.xml中添加以下配置（确保替换YOUR_CLIENT_ID）：

<activity
    android:name="com.google.android.gms.auth.api.signin.internal.SignInHubActivity"
    android:theme="@android:style/Theme.Translucent.NoTitleBar"
    android:exported="true">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="YOUR_CLIENT_ID" android:host="oauthredirect.com" />
    </intent-filter>
</activity>

对于iOS，你需要在ios/Runner/Info.plist中添加以下内容，并确保在Xcode中配置了相应的URL Scheme：

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>com.googleusercontent.apps.YOUR_CLIENT_ID</string>
        </array>
    </dict>
</array>

总结

以上代码展示了如何在Flutter项目中集成Google服务，特别是如何使用Google Calendar API。请根据你的具体需求调整代码和配置。注意，实际应用中还需要处理用户权限、错误处理等细节。

回到顶部