What Are The Steps To Integrate Google Drive Into The Flutter App?

In the modern-day, Google APIs have been widely used for various reasons. There are more than 200 entries enabled from Google API explorer. Some of the most popular APIs are Google Drive, Google Cloud Storage, Gmail, and many more. It is also quite an easier option for integrating Google Drive API in the Flutter app.

These are popular choices for quickly gaining more advantages for accessing Google Drive instantly, even without hassle. It is also easier to use Google Drive to enable quick backup and restore them uniquely. Suppose you find the Google drive integration difficult or having some issues in your existing application. We have arranged a list of top app development companies in the USA for you, where you can consult or hire dedicated mobile app developers for your project.

Steps To Integrate Google Drive In Flutter App:

Step 1:

The primary step is to create the new application in the Flutter. Creating the new application in Flutter is quite simple. You can follow the below instructions

• Open Visual Studio Code
• Install the extensions for Flutter
• Search for Dart
• Install it
• Search Flutter
• Install it
• Go to View
• Go to Command Palette
• Type “flutter”
• Select Flutter: New Project
• Enter project name
• Press ‘Enter’
• Create parent directory
• Your first flutter app will be created using the default counter template
• Run your project with a connected external device
• Run command ‘Flutter’ run

Step 2:

Upon creating the Flutter app, you can easily integrate the Google Plus Login and Google Firebase Project

Step 3:

Enable Google Drive API from the Google Developer Console

Select the same project in the Google Developer Console

Step 4:

You can easily add the dependencies that help to implement the Google Drive Operations, such as Google API and Pick File. It also gives you a better way to upload and download the file in mobile storage. Follow the below instructions for the dependencies.

dependencies:

flutter:

sdk: flutter

cupertino_icons: ^0.1.2

firebase_auth: ^0.15.2

google_sign_in: ^4.1.0

flutter_secure_storage: ^3.3.1+1

googleapis: ^0.54.0

googleapis_auth: ^0.2.11

path_provider: ^1.5.1

file_picker: ^1.3.8

Step 5:

Now it is quite important to define the permission for the reading and to write the file. Add define the file with the permission alongside AndroidManifest File.

<uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE” />

<uses-permission android:name=”android.permission.READ_EXTERNAL_STORAGE”/>

Step 6:

Implement ‘File Upload’ in the Flutter along with listing as well as getting the login programmatically. These will be listed in the main.dart file, and it is a convenient option to enable the class for mapping with Google Auth Credential. Follow the below instructions

class GoogleHttpClient extends IOClient {

Map<String, String> _headers;

GoogleHttpClient(this._headers) : super();

@override

Future<http.StreamedResponse> send(http.BaseRequest request) =>

super.send(request..headers.addAll(_headers));

@override

Future<http.Response> head(Object url, {Map<String, String> headers}) =>

super.head(url, headers: headers..addAll(_headers));

}

Step 7:

Upon implementing the complete Google plus login, you can also simply check the file to be uploaded with Google drive. These are extensive options for the file download and list the uploading process in Google drive.

Future<void> _loginWithGoogle() async {

signedIn = await storage.read(key: “signedIn”) == “true” ? true : false;

googleSignIn.onCurrentUserChanged

.listen((GoogleSignInAccount googleSignInAccount) async {

if (googleSignInAccount != null) {

_afterGoogleLogin(googleSignInAccount);

}

});

Google Logout:

Normally, the default app has a single floating button in the lower right corner along with the label in the middle. These floating buttons are added with a plus button from its new features. When the user presses a plus button, it will automatically increment in the middle. Google-services.json file is not included in the source code, so it is important to setup the firebase project for enabling the android->app folder.

void _logoutFromGoogle() async {

googleSignIn.signOut().then((value) {

print(“User Sign Out”);

storage.write(key: “signedIn”, value: “false”).then((value) {

setState(() {

signedIn = false;

});

Making Google Sign in And Integrating With Flutter App:

With creating the new Flutter application, it is quite an efficient option for easily enabling the complete integrating procedures. This process mainly helps to easily give your app instant access to Google Drive.

Open main.dart

locate the _incrementCounter() function

void _incrementCounter() {

setState(() {

_counter++;

});

}

Upon integrating the Google Drive in the Flutter app, it is an easier option to sign in with the API for ensuring the continuous login to the extent. With changing the Google Drive integrated features, it is an efficient way for asking users to easily sign in with a Google account. You can also grant the Google Drive permission that includes

Future<void> _incrementCounter() async {

setState(() {

_counter++;

});

final googleSignIn = signIn.GoogleSignIn.standard(scopes: [drive.DriveApi.DriveScope]);

final signIn.GoogleSignInAccount account = await googleSignIn.signIn();

print(“User account $account”);

}

Recently, Google Drive API v3 was released with more features, and they give you a better way of integrating with the Flutter app. You can add the imports on top using main. dart file:

import ‘package:googleapis/drive/v3.dart’ as drive;

import ‘package:google_sign_in/google_sign_in.dart’ as signIn;

It is a convenient option to upload the data alongside the hidden app directory. All the applications use their own folder, and these are hidden from the user. Normally, the user cannot manipulate or edit the files of the applications. For using these hidden folders, it is quite important to set the following ‘drive.DriveApi.driveAppdataScope’

final googleSignIn = GoogleSignIn.standard(scopes: [

drive.DriveApi.driveAppdataScope,

]);

The above indicates the progress of integrating the feature to the greatest extent. You can easily remove the dialog in the final stage. Enabling the progress indicator assures with getting instant information about the process

Future<void> _uploadToHidden() async {

try {

final driveApi = await _getDriveApi();

if (driveApi == null) {

return;

}

// Not allow a user to do something else

showGeneralDialog(

context: context,

barrierDismissible: false,

transitionDuration: Duration(seconds: 2),

barrierColor: Colors.black.withOpacity(0.5),

pageBuilder: (context, animation, secondaryAnimation) => Center(

child: CircularProgressIndicator(),

),

);

…

} finally {

// Remove a dialog

Navigator.pop(context);

}

}

How to Create A GoogleAuthClient For Sending Additional Headers?

To create the GoogleAuthClient, it is important to have Google use it for getting the authorized information. This information can be retrieved using the below codes.

Future<drive.DriveApi?> _getDriveApi() async {

final googleUser = await googleSignIn.signIn();

final headers = await googleUser?.authHeaders;

if (headers == null) {

await showMessage(context, “Sign-in first”, “Error”);

return null;

}

final client = GoogleAuthClient(headers);

final driveApi = drive.DriveApi(client);

return driveApi;

}

Conclusion:

The above article states the way of integrating Google Drive into the Flutter app. It is also a suitable option for learning about the ways of uploading, listing, and downloading the Google drive files using the Flutter app developed by a professional flutter app company. Google Plus login also allows authentication along with quick access to Google drive. Google Drive implementation in Flutter lets you gain more features.

 

 

Disclaimer: For more interesting articles visit Business Times.