Quickstarters
How to Build a Backend for Flutter?

40min
Introduction
In this tutorial, you’ll learn how to build a backend for Flutter using Back4app, an open source and reliable backend as a service (BaaS). 
We’ll walk through integrating essential Back4app features—such as database management, Cloud Functions, RESTful APIs, GraphQL APIs, and user authentication—into your Flutter project. 
You’ll also discover how to handle real-time updates using Live Queries. By using Back4app’s powerful backend servers, you can skip much of the manual configuration and focus on creating a dynamic Flutter app.
This guide will show Flutter developers how to set up a secure, scalable, and robust backend structure that effortlessly communicates with your client side. 
We’ll also highlight the advantages of letting Back4app handle heavy lifting—like hosting, user authentication, and server logic—so you can benefit from features like automatic scaling, advanced security, and simplified maintenance. 
If you have a Flutter project and want to save countless hours of backend setup, this is the right place to start.
By the end of this tutorial, you’ll understand the type of backend you can create with Back4app and be ready to extend your backend services for a production-ready application or integrate more complex functionalities, such as external APIs and advanced user authentication. 
Let’s get started!
Prerequisites
To complete this tutorial, you will need:
A Back4app account and a new Back4app project
 Getting Started with Back4app.
If you do not have an account, you can create one for free. Follow the guide above to get your project ready.
Basic Flutter development environment
 Ensure you have the Flutter SDK installed and set up. Also, confirm you have an IDE (like Android Studio or VS Code) configured for Flutter.
Dart (programming language) environment
Usually this is installed along with Flutter. Make sure you can import dart packages without error.
Familiarity with Flutter fundamentals
 Flutter Official Documentation.
If you’re new to Flutter, review the official docs or a beginner’s tutorial before starting.
Make sure you have all of these prerequisites in place. Having your Back4app project set up and your local Flutter environment configured will help you follow along more easily.
Step 1 – Creating a New Project on Back4App and Connecting
Create a New Project
The first step in building your Flutter backend on Back4app is to create a new project. If you have not already created one, follow these steps:
Log in to your Back4app account.
Click the “New App” button in your Back4app dashboard.
Give your app a name (e.g., “Flutter-Backend-Tutorial”).
﻿
Once the project is created, you will see it listed in your Back4app dashboard. This project will be the foundation for all the backend configurations we will discuss.
Install and Initialize the Parse SDK in Your Flutter App
Back4app relies on the Parse Platform to manage your data, real-time updates, user authentication, and more. To connect your Flutter project to Back4app, follow these steps:
Add the Parse Flutter SDK to your app:
YAML
dependencies:
  parse_server_sdk_flutter: ^4.0.0
dependencies:
  parse_server_sdk_flutter: ^4.0.0
﻿
Import the Parse package in your main.dart (or wherever you initialize your app):
Dart
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyParseServerUrl = 'https://parseapi.back4app.com';
  const keyClientKey = 'YOUR_CLIENT_KEY';

  // Initialize Parse with debug set to true
  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
    debug: true, 
  );

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter + Back4App Example',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const Scaffold(
        body: Center(
          child: Text('Hello from Flutter + Back4App!'),
        ),
      ),
    );
  }
}
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyParseServerUrl = 'https://parseapi.back4app.com';
  const keyClientKey = 'YOUR_CLIENT_KEY';

  // Initialize Parse with debug set to true
  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
    debug: true, 
  );

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter + Back4App Example',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const Scaffold(
        body: Center(
          child: Text('Hello from Flutter + Back4App!'),
        ),
      ),
    );
  }
}
﻿
In your Back4app dashboard, go to your app’s Security & Keys section to find your Application ID, Client Key, and Parse Server URL. Replace the placeholders above with your own credentials. With this initialization, every request from your Flutter app is securely routed to your Back4app instance.
Remember that the master key should never be used on the client side of your Flutter app. If you need the master key, keep it on the server or in a secure environment.
Step 2 – Setting Up the Database
Creating a Data Model
Once your Flutter app is connected to Back4app, you can start designing your database schema. You can do this manually from the Back4app dashboard:
Navigate to the “Database” section in your dashboard.
Create a new class (e.g., “Todo”), and add relevant columns (e.g., title, isCompleted).
Create New Class
﻿
Back4app also provides an AI Agent to help with automatic schema creation:
Open the AI Agent from your App Dashboard or the menu.
Describe your data model in simple language (e.g., “Create a new ToDo App with a complete class schema.”).
Let the AI Agent create the schema for you.
﻿
This streamlines data architecture setup. If you want fields to be created automatically, you can simply start saving objects from your app—Parse supports schema creation on the fly.
Creating a Data Model Using the AI Agent
If you choose to use the Back4app AI Agent, just provide a short description, and it will build or suggest a schema for you. This is an excellent way to speed up the initial data modeling phase of your flutter project.
Reading and Writing Data Using Flutter Parse SDK
Below is a simple example demonstrating how to create and retrieve objects using the Parse Flutter SDK.
Dart
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

Future<void> createTodoItem(String title, bool isCompleted) async {
  final todo = ParseObject('Todo')
    ..set('title', title)
    ..set('isCompleted', isCompleted);

  final response = await todo.save();
  if (response.success && response.result != null) {
    print('Todo saved successfully: ${response.result}');
  } else {
    print('Error saving Todo: ${response.error?.message}');
  }
}

Future<List<ParseObject>?> fetchTodos() async {
  final QueryBuilder<ParseObject> queryTodo =
      QueryBuilder<ParseObject>(ParseObject('Todo'));

  final response = await queryTodo.query();
  if (response.success && response.results != null) {
    print('Fetched Todo items: ${response.results}');
    return response.results as List<ParseObject>;
  } else {
    print('Error fetching Todos: ${response.error?.message}');
    return null;
  }
}
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

Future<void> createTodoItem(String title, bool isCompleted) async {
  final todo = ParseObject('Todo')
    ..set('title', title)
    ..set('isCompleted', isCompleted);

  final response = await todo.save();
  if (response.success && response.result != null) {
    print('Todo saved successfully: ${response.result}');
  } else {
    print('Error saving Todo: ${response.error?.message}');
  }
}

Future<List<ParseObject>?> fetchTodos() async {
  final QueryBuilder<ParseObject> queryTodo =
      QueryBuilder<ParseObject>(ParseObject('Todo'));

  final response = await queryTodo.query();
  if (response.success && response.results != null) {
    print('Fetched Todo items: ${response.results}');
    return response.results as List<ParseObject>;
  } else {
    print('Error fetching Todos: ${response.error?.message}');
    return null;
  }
}
﻿
With this, you can directly interact with your Back4app database from your Flutter app. Simply call createTodoItem('Feed the cat', false) or fetchTodos() to write and read data.
Reading and Writing Data Using REST API
If you need to integrate with other services or prefer a more traditional approach, you can still use the Back4app REST API:
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"title": "Buy groceries", "isCompleted": false}' \
  https://parseapi.back4app.com/classes/Todo
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"title": "Buy groceries", "isCompleted": false}' \
  https://parseapi.back4app.com/classes/Todo
﻿
Reading and Writing Data Using GraphQL API
Back4app also offers a GraphQL endpoint:
GraphQL
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
﻿
This gives you flexibility to build whatever approach works best for your Flutter app.
Working with Live Queries
Back4app provides Live Queries so you can receive real-time updates to your data. Enable Live Queries in the Back4app dashboard (Server Settings) and then use the Parse LiveQuery Flutter client.
Dart
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';
import 'package:parse_server_sdk_flutter/live_query.dart';

Future<void> subscribeToTodos() async {
  final liveQuery = LiveQuery();
  final query = QueryBuilder<ParseObject>(ParseObject('Todo'));

  Subscription subscription = await liveQuery.client.subscribe(query);

  subscription.on(LiveQueryEvent.create, (value) {
    print('New Todo created: $value');
  });

  subscription.on(LiveQueryEvent.update, (value) {
    print('Todo updated: $value');
  });

  subscription.on(LiveQueryEvent.delete, (value) {
    print('Todo deleted: $value');
  });
}
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';
import 'package:parse_server_sdk_flutter/live_query.dart';

Future<void> subscribeToTodos() async {
  final liveQuery = LiveQuery();
  final query = QueryBuilder<ParseObject>(ParseObject('Todo'));

  Subscription subscription = await liveQuery.client.subscribe(query);

  subscription.on(LiveQueryEvent.create, (value) {
    print('New Todo created: $value');
  });

  subscription.on(LiveQueryEvent.update, (value) {
    print('Todo updated: $value');
  });

  subscription.on(LiveQueryEvent.delete, (value) {
    print('Todo deleted: $value');
  });
}
﻿
With this subscription, you can listen for data changes as they happen. This is fantastic for building collaborative apps where multiple users see live data updates. Once hot reload is triggered, your subscription will remain unless the app restarts.
Step 3 – Applying Security with ACLs and CLPs
What are ACLs and CLPs?
Back4app uses ACLs (Access Control Lists) and CLPs (Class-Level Permissions) to restrict who can read or write data on both object and class levels. This layer ensures your data is protected from unauthorized access.
Setting Up Class-Level Permissions
In your Back4app Dashboard, go to Database and select a class (e.g., “Todo”).
Navigate to Class-Level Permissions.
Set defaults (e.g., only authenticated users can create new objects).
﻿
Configuring ACLs in Code
You can also apply ACLs at the object level from the Flutter code:
Dart
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

Future<void> createPrivateTodo(ParseUser ownerUser, String title) async {
  final todo = ParseObject('Todo')..set('title', title);

  final acl = ParseACL(owner: ownerUser);
  acl.setPublicReadAccess(allowed: false);
  acl.setPublicWriteAccess(allowed: false);

  todo.setACL(acl);

  final response = await todo.save();
  if (response.success) {
    print('Private Todo saved.');
  } else {
    print('Error: ${response.error?.message}');
  }
}
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

Future<void> createPrivateTodo(ParseUser ownerUser, String title) async {
  final todo = ParseObject('Todo')..set('title', title);

  final acl = ParseACL(owner: ownerUser);
  acl.setPublicReadAccess(allowed: false);
  acl.setPublicWriteAccess(allowed: false);

  todo.setACL(acl);

  final response = await todo.save();
  if (response.success) {
    print('Private Todo saved.');
  } else {
    print('Error: ${response.error?.message}');
  }
}
﻿
By combining CLPs and ACLs, you can ensure that only the right people or roles can access or modify specific data.
Step 4 – Writing Cloud Code Functions
Why Cloud Code?
Cloud Code allows you to run server-side logic without manually setting up any backend servers. This is perfect for validating data, integrating with external services, or enforcing certain rules in your backend as a service (BaaS).
Example Function
Here is an example Cloud Function that calculates the length of a text:
JS
// main.js in your Cloud Code
Parse.Cloud.define('calculateTextLength', async (request) => {
  const { text } = request.params;
  if (!text) {
    throw new Error('No text provided');
  }
  return { length: text.length };
});
// main.js in your Cloud Code
Parse.Cloud.define('calculateTextLength', async (request) => {
  const { text } = request.params;
  if (!text) {
    throw new Error('No text provided');
  }
  return { length: text.length };
});
﻿
You can deploy this code via the Back4app CLI or in your app’s dashboard under Cloud Code.
Deployment
Using Back4app CLI:
Bash
b4a configure accountkey
b4a deploy
b4a configure accountkey
b4a deploy
﻿
Using the Dashboard:
In your app’s dashboard, go to Cloud Code > Functions.
Paste the JavaScript code.
Click Deploy.
﻿
Calling Cloud Code from Flutter
Dart
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

Future<void> getTextLength(String text) async {
  final function = ParseCloudFunction('calculateTextLength');
  final params = <String, dynamic>{'text': text};

  final ParseResponse result = await function.execute(parameters: params);
  if (result.success && result.result != null) {
    print('Text length: ${result.result['length']}');
  } else {
    print('Error calling Cloud Code: ${result.error?.message}');
  }
}
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

Future<void> getTextLength(String text) async {
  final function = ParseCloudFunction('calculateTextLength');
  final params = <String, dynamic>{'text': text};

  final ParseResponse result = await function.execute(parameters: params);
  if (result.success && result.result != null) {
    print('Text length: ${result.result['length']}');
  } else {
    print('Error calling Cloud Code: ${result.error?.message}');
  }
}
﻿
This secure approach ensures sensitive logic remains on the server, while your Flutter app simply makes requests.
Step 5 – Configuring Authentication
Enable User Authentication
Back4app uses the Parse.User class to handle user sign-up and login. By default, Parse takes care of password hashing, session tokens, and secure storage.
Dart
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

Future<void> signUpUser(String username, String password, String email) async {
  final user = ParseUser(username, password, email);
  final response = await user.signUp();
  if (response.success) {
    print('User signed up successfully!');
  } else {
    print('Sign up error: ${response.error?.message}');
  }
}

Future<void> logInUser(String username, String password) async {
  final user = ParseUser(username, password, null);
  final response = await user.login();
  if (response.success) {
    print('User logged in: ${response.result}');
  } else {
    print('Login error: ${response.error?.message}');
  }
}
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

Future<void> signUpUser(String username, String password, String email) async {
  final user = ParseUser(username, password, email);
  final response = await user.signUp();
  if (response.success) {
    print('User signed up successfully!');
  } else {
    print('Sign up error: ${response.error?.message}');
  }
}

Future<void> logInUser(String username, String password) async {
  final user = ParseUser(username, password, null);
  final response = await user.login();
  if (response.success) {
    print('User logged in: ${response.result}');
  } else {
    print('Login error: ${response.error?.message}');
  }
}
﻿
Social Login
Back4app supports integrations with Google, Apple, Facebook, and more. Each provider has a specific approach and may require additional libraries (e.g., for Facebook or Google sign-in). You can then call:
Dart
await ParseUser.loginWith('facebook', <String, dynamic>{
  'id': 'USER_FACEBOOK_ID',
  'access_token': 'FACEBOOK_ACCESS_TOKEN',
  'expiration_date': 'DATE'
});
await ParseUser.loginWith('facebook', <String, dynamic>{
  'id': 'USER_FACEBOOK_ID',
  'access_token': 'FACEBOOK_ACCESS_TOKEN',
  'expiration_date': 'DATE'
});
﻿
Adjust the parameters according to the provider’s documentation.
Step 6 – Handling File Storage
Setting Up File Storage
You can store images, documents, or other media files using ParseFile. Back4app secures these files and provides a URL for retrieval.
Dart
import 'dart:io';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';
import 'package:image_picker/image_picker.dart';

Future<void> uploadImage() async {
  final picker = ImagePicker();
  final XFile? pickedFile = await picker.pickImage(source: ImageSource.gallery);
  if (pickedFile == null) {
    print('No file selected.');
    return;
  }

  final parseFile = ParseFile(File(pickedFile.path));
  final response = await parseFile.save();
  if (response.success) {
    print('File saved: ${parseFile.url}');
  } else {
    print('Error uploading file: ${response.error?.message}');
  }
}
import 'dart:io';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';
import 'package:image_picker/image_picker.dart';

Future<void> uploadImage() async {
  final picker = ImagePicker();
  final XFile? pickedFile = await picker.pickImage(source: ImageSource.gallery);
  if (pickedFile == null) {
    print('No file selected.');
    return;
  }

  final parseFile = ParseFile(File(pickedFile.path));
  final response = await parseFile.save();
  if (response.success) {
    print('File saved: ${parseFile.url}');
  } else {
    print('Error uploading file: ${response.error?.message}');
  }
}
﻿
Security Considerations
You can define who has access to files (public, authenticated users, or restricted) by combining file-level security with ACLs. This ensures your file data remains safe.
Step 7 – Email Verification and Password Reset
Why They Matter
Email verification confirms that a user owns the email address provided, while password reset flows enhance user experience and security.
Dashboard Configuration
Go to your app’s Email Settings in the Back4app dashboard.
Enable Email Verification and Password Reset.
Configure email templates or your custom domain if needed.
These settings let your Flutter app automatically handle user ownership checks and password recovery.
Implementation in Flutter
Dart
final user = ParseUser('testuser', 'password123', '[email protected]');
final signUpResponse = await user.signUp();
if (signUpResponse.success) {
  // The user will receive a verification email
}

// For password reset
final resetResponse = await ParseUser.requestPasswordReset('[email protected]');
if (resetResponse.success) {
  print('Reset email sent successfully!');
}
final user = ParseUser('testuser', 'password123', 'test@example.com');
final signUpResponse = await user.signUp();
if (signUpResponse.success) {
  // The user will receive a verification email
}

// For password reset
final resetResponse = await ParseUser.requestPasswordReset('test@example.com');
if (resetResponse.success) {
  print('Reset email sent successfully!');
}
﻿
Step 8 – Scheduling Tasks with Cloud Jobs
Cloud Jobs
You might want to schedule recurring tasks (like cleaning old data or sending periodic emails). Cloud Jobs let you do just that:
JS
// main.js
Parse.Cloud.job('cleanupOldTodos', async (request) => {
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);
  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  const cutoff = new Date(now - THIRTY_DAYS);

  query.lessThan('createdAt', cutoff);
  const oldTodos = await query.find({ useMasterKey: true });
  await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
  return `Deleted ${oldTodos.length} old Todos.`;
});
// main.js
Parse.Cloud.job('cleanupOldTodos', async (request) => {
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);
  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  const cutoff = new Date(now - THIRTY_DAYS);

  query.lessThan('createdAt', cutoff);
  const oldTodos = await query.find({ useMasterKey: true });
  await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
  return `Deleted ${oldTodos.length} old Todos.`;
});
﻿
Deploy this code, then go to App Settings > Server Settings > Background Jobs in your Back4app dashboard to schedule it.
Scheduling a Cloud Job
﻿
Step 9 – Integrating Webhooks
What Are Webhooks?
Webhooks let your Back4app app send HTTP requests to an external service when certain events occur (like saving a new object). This is ideal for integrating with third-party tools.
Go to More > WebHooks in your Back4app dashboard and Add Webhook.
Set your endpoint and triggers (e.g., “New record in Todo”).
Adding a Webhook
﻿
You can also manually configure webhooks in Cloud Code by making HTTP requests in beforeSave or afterSave triggers.
BeforeSave WebHook
﻿
Step 10 – Exploring the Back4App Admin Panel
Where to Find It
The Back4app Admin App is a user-friendly interface that allows non-technical team members to manage data (CRUD operations, data tasks, etc.) without needing to open the Parse Dashboard.
Go to App Dashboard > More > Admin App.
Click Enable Admin App.
Enable Admin App
﻿
You’ll create an admin user, choose a subdomain, and log in with the newly created credentials. The Admin App helps with quick data reviews and modifications.
Conclusion
In this tutorial, you learned how to build a backend for Flutter using Back4app and the Parse Flutter SDK. 
You created classes, stored data, configured real-time queries, applied security with ACLs and CLPs, wrote Cloud Functions, scheduled tasks, integrated webhooks, and explored the Back4app Admin Panel. 
This approach accelerates development by letting you focus on your Flutter client side rather than complex server configuration.
The final string you have now is a functioning and secure backend that leverages restful apis, user authentication, and easy data manipulation. 
You can integrate more advanced features any time—like additional Cloud Functions, external API calls, or custom roles. 
Next Steps
Go production-ready: Implement advanced caching, analytics, or role-based access controls.
Extend your app: Integrate third-party services or build more Cloud Functions for specialized business logic.
Consult the Back4app documentation: Explore advanced security, performance tuning, logs analysis, and more.
Learn more: Check out tutorials for live chat apps, location-based services, or more complex data structures. Combine them with your Flutter project for real-world use cases.
By continuing to refine this setup, you’ll transform your Flutter app into a powerful, scalable solution built on top of a robust backend service. Happy coding!
Updated 15 Jan 2025
Did this page help you?
How to Build a Backend for Objective-C?
How to Build a Backend for Gatsby?