FlutterアプリでGoogle Driveからデータを読み出す方法を徹底解説

前回の記事では、Flutter を使って Android アプリを作成し、Google アカウントでログインして Google Drive にデータを保存する方法を紹介しました。

今回はその応用編として、Google Drive に保存されたデータをアプリ側で読み出す方法 を解説します。
テキストファイルの取得を例に、Drive API を使ったリクエストの流れ、Flutter での実装例、UIとの連携方法を具体的に紹介します。

これを理解すれば、Drive 上のデータをアプリ内で確認したり、ユーザーの保存データを一覧表示するようなアプリを作ることも可能になります。

Google Driveからデータを読み出す流れ

Google Drive API を使ってデータを取得する場合、大きく分けて次の2ステップです。

  1. ファイル一覧の取得
    → Drive に保存されているファイルのメタデータ（ID、名前、MIMEタイプなど）を取得します。
  2. ファイル本体のダウンロード
    → ファイル ID を指定して、実際の内容を取得します。

この流れをアプリに組み込むことで、Drive 内のデータを操作できるようになります。

必要な準備

前回の「Google Drive 保存」と同じ準備が必要です。

  • Google Cloud Console で Drive API を有効化済み
  • OAuth 2.0 クライアント ID を設定済み
  • Flutter プロジェクトに以下の依存関係を追加
dependencies:
  flutter:
    sdk: flutter
  google_sign_in: ^6.1.5
  http: ^0.13.6

ファイル一覧を取得するコード例

まずは Google Drive にあるファイルの一覧を取得してみましょう。

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

Future<void> listDriveFiles(GoogleSignInAccount user) async {
  final authHeaders = await user.authHeaders;
  final httpClient = http.Client();

  final response = await httpClient.get(
    Uri.parse("https://www.googleapis.com/drive/v3/files?pageSize=10&fields=files(id,name,mimeType)"),
    headers: authHeaders,
  );

  if (response.statusCode == 200) {
    final data = json.decode(response.body);
    final files = data["files"];
    for (var file in files) {
      print("ファイル名: ${file['name']} (ID: ${file['id']}, MIME: ${file['mimeType']})");
    }
  } else {
    print("エラー: ${response.body}");
  }
}

ポイント

  • pageSize=10 は取得件数を制御するオプションです
  • fields で取得する項目を指定できます（ここでは id, name, mimeType）
  • 得られた id を使って次の「ダウンロード処理」を行います

ファイルをダウンロードするコード例

特定のファイル ID を指定して、中身を読み出してみましょう。

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

  final response = await httpClient.get(
    Uri.parse("https://www.googleapis.com/drive/v3/files/$fileId?alt=media"),
    headers: authHeaders,
  );

  if (response.statusCode == 200) {
    print("ファイル内容:\n${response.body}");
  } else {
    print("ダウンロード失敗: ${response.body}");
  }
}

説明

  • alt=media を指定することで、ファイルの中身（コンテンツ）が直接取得できます
  • 取得内容はプレーンテキストのほか、JSONや画像データなどファイル形式によって変わります

UIと組み合わせたサンプル

次に、アプリ画面でファイル一覧を表示し、タップしたファイルを読み出して中身を表示するシンプルなサンプルを作ります。

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:google_sign_in/google_sign_in.dart';
import 'package:http/http.dart' as http;

class DriveReaderPage extends StatefulWidget {
  final GoogleSignInAccount user;
  DriveReaderPage({required this.user});

  @override
  _DriveReaderPageState createState() => _DriveReaderPageState();
}

class _DriveReaderPageState extends State<DriveReaderPage> {
  List<Map<String, String>> _files = [];
  String _content = "";

  @override
  void initState() {
    super.initState();
    _listFiles();
  }

  Future<void> _listFiles() async {
    final authHeaders = await widget.user.authHeaders;
    final httpClient = http.Client();

    final response = await httpClient.get(
      Uri.parse("https://www.googleapis.com/drive/v3/files?pageSize=10&fields=files(id,name,mimeType)"),
      headers: authHeaders,
    );

    if (response.statusCode == 200) {
      final data = json.decode(response.body);
      final files = List<Map<String, dynamic>>.from(data["files"]);
      setState(() {
        _files = files.map((f) => {"id": f["id"], "name": f["name"]}).toList();
      });
    }
  }

  Future<void> _downloadFile(String fileId) async {
    final authHeaders = await widget.user.authHeaders;
    final httpClient = http.Client();

    final response = await httpClient.get(
      Uri.parse("https://www.googleapis.com/drive/v3/files/$fileId?alt=media"),
      headers: authHeaders,
    );

    if (response.statusCode == 200) {
      setState(() {
        _content = response.body;
      });
    } else {
      setState(() {
        _content = "ダウンロード失敗";
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Google Drive 読み出し")),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: _files.length,
              itemBuilder: (context, index) {
                final file = _files[index];
                return ListTile(
                  title: Text(file["name"] ?? ""),
                  onTap: () => _downloadFile(file["id"]!),
                );
              },
            ),
          ),
          Divider(),
          Expanded(
            child: SingleChildScrollView(
              padding: EdgeInsets.all(16),
              child: Text(_content),
            ),
          ),
        ],
      ),
    );
  }
}

動作の流れ

  1. アプリ起動後、ファイル一覧を取得して画面に表示
  2. 任意のファイルをタップ
  3. ファイル内容が画面下部に表示される

応用例

今回の「ファイル読み出し」を応用すると、以下のようなアプリが作れます。

  • メモ帳アプリ：Drive 上に保存したメモを読み出して編集
  • 写真ギャラリーアプリ：Drive 上の画像を取得して一覧表示
  • チーム共有アプリ：Drive に置いたドキュメントをメンバーで確認

注意点

  • 認証スコープ
    ファイル読み取りには "https://www.googleapis.com/auth/drive.readonly" が必要です。
    書き込みと両方使う場合は "drive.file" を指定してください。
  • 権限設定
    Google Drive 上のファイルは、ユーザー自身がアクセス権限を持つものに限定されます。
    共有ファイルを扱う場合は追加設定が必要です。
  • ファイルサイズ
    大きなファイルを扱う場合、ストリーミング処理や一時保存が必要になります。

まとめ

本記事では、Flutter アプリで Google Drive からデータを読み出す方法 を解説しました。

手順をまとめると以下の通りです。

  1. Drive API を使ってファイル一覧を取得
  2. ファイル ID を指定して内容をダウンロード
  3. Flutter の UI と連携して表示

これで、「保存したデータをアプリ側で再利用できる」仕組みが整いました。
前回の「保存」と今回の「読み出し」を組み合わせれば、Drive をストレージ代わりに活用する本格的なアプリが作れるようになります。

タイトルとURLをコピーしました