Flutterで作るAndroidアプリ入門：Googleアカウント連携とGoogle Drive保存までを完全解説

スマートフォンアプリを作ってみたいと思ったことはありませんか？
特に Android アプリは、Google アカウントとの親和性が高く、データ保存先として Google Drive を活用することで便利なサービスを作ることができます。

本記事では、Flutter をフロントエンドに採用し、Google アカウントでログインして、データを Google Drive に保存するシンプルな Android アプリ を「1から最後まで」わかりやすく解説します。
開発環境の準備から、実際のソースコード例までを順を追って説明するので、初心者の方でもアプリ開発の流れをイメージできる内容です。

Flutterとは？
開発環境の準備
1. 必要なもの
2. 手順
Googleアカウント認証の実装
1. pubspec.yaml に追加
2. ログイン処理のコード
Google Driveへのデータ保存
1. APIリクエストの流れ
2. 保存処理の例
アプリ全体の動作イメージ
開発を発展させるポイント
まとめ

Flutterとは？

Flutter は Google が提供するクロスプラットフォーム開発フレームワークです。
1つのコードで Android / iOS 両対応 のアプリを作成できるのが大きな特徴です。
Dart というプログラミング言語を使い、ウィジェットを組み合わせて UI を作成します。

本記事で Flutter を選ぶ理由は以下の3つです。

Google アカウントや Firebase との相性が良い
UI作成が簡単で見た目がきれい
1つのソースで複数OSに対応可能

開発環境の準備

アプリを作るためには、まず環境を整える必要があります。

必要なもの

PC（Windows, macOS, Linux）
Android Studio（エミュレータや SDK 管理に必要）
Flutter SDK
Google Cloud Console のアカウント（API連携に必須）

手順

Flutter SDK を公式サイトからダウンロード
→ https://docs.flutter.dev/get-started/install
Android Studio をインストールし、Flutter プラグインを追加
Google Cloud Console にアクセスし、新しいプロジェクトを作成
Google Drive API を有効化し、OAuth クライアント ID を作成
- 認証情報を JSON 形式でダウンロードしておきます

Googleアカウント認証の実装

アプリで Google Drive を操作するには、まず Google アカウントでのログイン が必要です。

Flutter では google_sign_in パッケージを利用します。

pubspec.yaml に追加

dependencies:
  flutter:
    sdk: flutter
  google_sign_in: ^6.1.5
  http: ^0.13.6

ログイン処理のコード

import 'package:flutter/material.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: GoogleLoginPage(),
    );
  }
}

class GoogleLoginPage extends StatefulWidget {
  @override
  _GoogleLoginPageState createState() => _GoogleLoginPageState();
}

class _GoogleLoginPageState extends State<GoogleLoginPage> {
  final GoogleSignIn _googleSignIn = GoogleSignIn(
    scopes: ['email', 'https://www.googleapis.com/auth/drive.file'],
  );

  GoogleSignInAccount? _user;

  Future<void> _login() async {
    try {
      final user = await _googleSignIn.signIn();
      setState(() {
        _user = user;
      });
    } catch (error) {
      print("ログイン失敗: $error");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Google Drive アプリ")),
      body: Center(
        child: _user == null
            ? ElevatedButton(
                onPressed: _login,
                child: Text("Googleアカウントでログイン"),
              )
            : Text("ログイン成功: ${_user!.email}"),
      ),
    );
  }
}

このコードで、Google アカウントにログインできるようになります。

Google Driveへのデータ保存

ログイン後、次は Google Drive にファイルを保存してみましょう。

APIリクエストの流れ

認証トークンを取得
Google Drive API にリクエスト送信
ファイルをアップロード

保存処理の例

import 'dart:convert';
import 'package:http/http.dart' as http;

Future<void> uploadToDrive(String text, GoogleSignInAccount user) async {
  final authHeaders = await user.authHeaders;
  final httpClient = http.Client();

  final response = await httpClient.post(
    Uri.parse("https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart"),
    headers: {
      ...authHeaders,
      "Content-Type": "multipart/related; boundary=foo_bar_baz",
    },
    body: """
--foo_bar_baz
Content-Type: application/json; charset=UTF-8

{"name": "sample.txt"}
--foo_bar_baz
Content-Type: text/plain

$text
--foo_bar_baz--
""",
  );

  print("保存結果: ${response.body}");
}

この関数に "Hello Drive!" のような文字列を渡すと、Google Drive 上に sample.txt が保存されます。