Flutter

Install Parse SDK on Flutter project

Introduction

In this guide you will learn how to get started with Back4App for your Flutter project using the Flutter plugin for Parse Server.

Prerequisites

To complete this tutorial, you will need:

Step 1 - Creating a new Flutter project

Open the cmd or terminal (depending on your operating system) and create your new project called “flutter_parse”:

flutter create flutter_parse

Check if everything is OK Running the application:

cd flutter_parse
flutter run

Step 2 - Installing Flutter plugin for Parse Server

You will add the Parse to the project dependencies. Go to pubspec.yaml and add the following:

dependencies:
  parse_server_sdk_flutter: ^latest_version

See the image below as an example:

Run the flutter pub get command to install the dependencies in the project.

Step 3 - Setting up Parse SDK

Import package

In your Dart Code, clean all main.dart code and start a new one importing the Parse SDK, and also the flutter package.

Note: the main.dart file is available at lib folder (in flutter_parse project).

In main.dart, you can use:

1
2
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

Initialize your Parse app

After adding the library to your project, let’s now initialize Parse. Go to main.dart, and add the following code:

1
2
3
4
5
6
7
8
9
10
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final keyApplicationId = 'YOUR_APP_ID_HERE';
  final keyClientKey = 'YOUR_CLIENT_KEY_HERE';
  final keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, autoSendSessionId: true);

}

To allow the application to securely connect to the Back4App servers, you must provide the Parse SDK with the application credentials.

The connection requires updating the string values with your Application Id, Client key, and Server URL.

Locate your Application Id and Client Key credentials navigating to your app Dashboard > App Settings > Security & Keys.

Copy these credentials and replace in main.dart.

  • keyApplicationId = App Id
  • keyClientKey = Client Key

It should look like this:

Step 4 - Test your connection

You can test the SDK to verify that Parse is working with this application.

Let’s add the test code to main as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final keyApplicationId = 'YOUR_APP_ID_HERE';
  final keyClientKey = 'YOUR_CLIENT_KEY_HERE';
  final keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, autoSendSessionId: true);

  var firstObject = ParseObject('FirstClass')
    ..set(
        'message', 'Hey ! First message from Flutter. Parse is now connected');
  await firstObject.save();
  
  print('done');
  
}

Launch your app and go to Back4App Website. Find your app and then click on DASHBOARD.

Now got to Database > Browser > First Class. You should see the First Class with an object, as shown in the image below.

It’s done!

We completed the section! Now you have learned how to install the Parse SDK in your Flutter Application and connect to Back4App.