How to Integrate Google Drive for File Storage in FlutterFlow

In Google Cloud Console (console.cloud.google.com), open your Firebase project (the same one linked to FlutterFlow). Go to APIs & Services → Library and search for Google Drive API — click Enable. Then go to APIs & Services → Credentials → Create Credentials → OAuth 2.0 Client IDs. Create one client for iOS (enter your iOS bundle ID from FlutterFlow Settings → App Details) and one for Android (enter your package name and the SHA-1 fingerprint from your keystore). Download the GoogleService-Info.plist updates if prompted. Back in FlutterFlow, the google_sign_in package is already included when Firebase is connected — you do not need to add it to Pubspec Dependencies. Configure the OAuth consent screen: APIs & Services → OAuth consent screen, set the scopes to https://www.googleapis.com/auth/drive.file (app-created files) or https://www.googleapis.com/auth/drive.readonly (read-only browsing).

Create a Custom Action named signInWithGoogleDrive. In the Dart code: import 'package:google_sign_in/google_sign_in.dart'; then create a GoogleSignIn instance with the drive.file scope: final googleSignIn = GoogleSignIn(scopes: ['https://www.googleapis.com/auth/drive.file']); Call final account = await googleSignIn.signIn(); then final auth = await account!.authentication; Store auth.accessToken in FlutterFlow App State as a String named driveAccessToken. Also store account.email as driveUserEmail. Create a second Custom Action signOutGoogleDrive that calls googleSignIn.signOut() and clears the App State variables. Add a Sign in with Google button on your Drive integration page — On Tap calls signInWithGoogleDrive. Show a Conditional Visibility container with the file browser only when driveAccessToken is not empty.

1// Custom Action: signInWithGoogleDrive
2import 'package:google_sign_in/google_sign_in.dart';
3
4Future signInWithGoogleDrive() async {
5  final googleSignIn = GoogleSignIn(
6    scopes: [
7      'https://www.googleapis.com/auth/drive.file',
8    ],
9  );
10
11  try {
12    final account = await googleSignIn.signIn();
13    if (account == null) return; // User cancelled
14
15    final auth = await account.authentication;
16    final accessToken = auth.accessToken;
17
18    if (accessToken != null) {
19      // Store in App State
20      FFAppState().driveAccessToken = accessToken;
21      FFAppState().driveUserEmail = account.email;
22    }
23  } catch (e) {
24    print('Google Drive sign in error: $e');
25  }
26}
27
28// Custom Action: signOutGoogleDrive
29Future signOutGoogleDrive() async {
30  final googleSignIn = GoogleSignIn();
31  await googleSignIn.signOut();
32  FFAppState().driveAccessToken = '';
33  FFAppState().driveUserEmail = '';
34  FFAppState().driveFiles = [];
35}

In FlutterFlow → API Manager → Add API Group, name it GoogleDriveAPI. Set the Base URL to https://www.googleapis.com/drive/v3. Under Headers, add Authorization with value Bearer [driveAccessToken] — use Set from Variable to reference the App State driveAccessToken variable. Add an endpoint named listFiles with Method GET and path /files. Add query parameters: q (file filter, e.g., trashed=false), fields (fields: 'files(id,name,mimeType,size,modifiedTime,webContentLink,webViewLink)'), orderBy (modifiedTime desc), pageSize (20). Leave the q parameter empty to list all non-trashed files, or set it to mimeType='application/vnd.google-apps.folder' to list only folders. Test the endpoint — it should return a files array. Create a listFilesByType endpoint with q parameter set to mimeType contains 'image' for image files, or mimeType='application/pdf' for PDFs.

Create a DriveFileBrowser page. Add a Backend Query using the listFiles API endpoint, passing the driveAccessToken from App State as the Authorization header variable. Add a ListView bound to the query result's files array. Create a DriveFileRow Component with these elements: a Container (40×40, rounded, colored by file type) with an Icon inside — use Conditional Value to pick the icon based on mimeType: Icons.folder for vnd.google-apps.folder, Icons.image for image/, Icons.picture_as_pdf for application/pdf, Icons.description for vnd.google-apps.document, Icons.table_chart for vnd.google-apps.spreadsheet, Icons.insert_drive_file for everything else. Next to the icon Container: a Column with Text for name (bold, maxLines: 1, overflow: ellipsis) and a Row with Text for the formatted file size (Custom Function: bytes to KB/MB) and Text for modifiedTime (formatted with Custom Function). On the right: an IconButton (Icons.download) that triggers a Launch URL action with webContentLink. Add a Row at the top with a Search TextField — bind the q parameter to contain the search query.

Google Drive's multipart upload requires sending file content and metadata in a single request — this is difficult to do correctly from FlutterFlow's API Manager and requires handling multipart/form-data boundaries. Use a Cloud Function instead. Create a Cloud Function named uploadToDrive that accepts multipart form data: POST with fields accessToken (the user's Drive token), fileName, mimeType, and the file binary. The Cloud Function uses the googleapis Node.js library to authenticate with the user's token and call drive.files.create with the multipart upload. In FlutterFlow, add a UploadButton widget (FlutterFlowUploadButton) on the DriveFileBrowser page. After the upload completes and you have the file bytes and name, call the uploadToDrive Cloud Function endpoint via an API Call action in the Action Flow, passing the accessToken from App State and the uploaded file data.

1// Cloud Function: uploadToDrive (Node.js 20)
2const functions = require('firebase-functions');
3const { google } = require('googleapis');
4const Busboy = require('busboy');
5
6exports.uploadToDrive = functions.https.onRequest(async (req, res) => {
7  res.set('Access-Control-Allow-Origin', '*');
8  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
9
10  // Parse multipart form data
11  const busboy = Busboy({ headers: req.headers });
12  let accessToken = '';
13  let fileName = 'upload';
14  let mimeType = 'application/octet-stream';
15  let fileBuffer = null;
16
17  busboy.on('field', (name, value) => {
18    if (name === 'accessToken') accessToken = value;
19    if (name === 'fileName') fileName = value;
20    if (name === 'mimeType') mimeType = value;
21  });
22
23  busboy.on('file', (name, file) => {
24    const chunks = [];
25    file.on('data', chunk => chunks.push(chunk));
26    file.on('end', () => { fileBuffer = Buffer.concat(chunks); });
27  });
28
29  busboy.on('finish', async () => {
30    const auth = new google.auth.OAuth2();
31    auth.setCredentials({ access_token: accessToken });
32    const drive = google.drive({ version: 'v3', auth });
33
34    const response = await drive.files.create({
35      requestBody: { name: fileName, mimeType },
36      media: { mimeType, body: require('stream').Readable.from(fileBuffer) },
37      fields: 'id, name, webViewLink',
38    });
39
40    res.json({ success: true, file: response.data });
41  });
42
43  busboy.end(req.rawBody);
44});