前回の記事では、Flutter を使って Android アプリを作成し、Google アカウントでログインして Google Drive にデータを保存する方法を紹介しました。
今回はその応用編として、Google Drive に保存されたデータをアプリ側で読み出す方法 を解説します。
テキストファイルの取得を例に、Drive API を使ったリクエストの流れ、Flutter での実装例、UIとの連携方法を具体的に紹介します。
これを理解すれば、Drive 上のデータをアプリ内で確認したり、ユーザーの保存データを一覧表示するようなアプリを作ることも可能になります。
Google Drive API を使ってデータを取得する場合、大きく分けて次の2ステップです。
この流れをアプリに組み込むことで、Drive 内のデータを操作できるようになります。
前回の「Google Drive 保存」と同じ準備が必要です。
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
を指定することで、ファイルの中身(コンテンツ)が直接取得できます次に、アプリ画面でファイル一覧を表示し、タップしたファイルを読み出して中身を表示するシンプルなサンプルを作ります。
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),
),
),
],
),
);
}
}
今回の「ファイル読み出し」を応用すると、以下のようなアプリが作れます。
"https://www.googleapis.com/auth/drive.readonly"
が必要です。"drive.file"
を指定してください。本記事では、Flutter アプリで Google Drive からデータを読み出す方法 を解説しました。
手順をまとめると以下の通りです。
これで、「保存したデータをアプリ側で再利用できる」仕組みが整いました。
前回の「保存」と今回の「読み出し」を組み合わせれば、Drive をストレージ代わりに活用する本格的なアプリが作れるようになります。