Quickstarters
How to Build a CRUD App with Flutter?

29min
Overview
In this guide, you'll develop a Flutter application that handles essential CRUD operations—create, read, update, and delete—by leveraging Back4app as your backend service. 
We will walk you through setting up a Back4app project, designing a flexible data schema, and integrating your Flutter app with the backend using the Parse SDK for Flutter.
Initially, you will create a new Back4app project named Basic-CRUD-App-Flutter. This project provides a reliable data storage solution for your mobile application. You will then define your data model by creating collections and fields either manually or with the help of Back4app's AI Agent.
Next, you'll use the intuitive Back4app Admin App to manage your data seamlessly. Finally, you will connect your Flutter application to Back4app by using the parse_server_sdk_flutter package, enabling secure and efficient CRUD operations.
By the end of this tutorial, you will have a production-ready Flutter application capable of performing basic CRUD functions along with secure user authentication and data management.
Key Insights
Build a Flutter app that interacts with a powerful backend.
Learn to design a scalable backend schema on Back4app.
Utilize the Back4app Admin App for effortless data management.
Implement robust security measures including ACLs and user authentication.
﻿
Prerequisites
Before you start, make sure you have:
A Back4app account with an active project.
Need assistance? Visit Getting Started with Back4app.
A Flutter development environment.
Install Flutter and choose an IDE like Visual Studio Code or Android Studio.
A basic understanding of Flutter, Dart, and REST APIs.
Check out the Flutter documentation if needed.
﻿
Step 1 – Project Initialization
Creating a New Back4app Project
Log in to your Back4app account.
Click the “New App” button on your dashboard.
Name your project: Basic-CRUD-App-Flutter and follow the prompts to complete the setup.
Create New Project
﻿
After your project is created, it will appear on your dashboard, ready for backend configuration.
﻿
Step 2 – Crafting the Data Model
Setting Up Your Data Structures
For this Flutter application, you will establish several collections within your Back4app project. Below are examples of the key collections and fields required to support the CRUD functionality.
1. Products Collection
This collection stores details about individual products.
Field
Type
Description
_id
ObjectId
Automatically assigned unique identifier.
name
String
The name of the product.
details
String
A brief description of the product.
createdAt
Date
Timestamp when the product was added.
updatedAt
Date
Timestamp when the product was last updated.
2. Users Collection
This collection manages user credentials and authentication details.
Field
Type
Description
_id
ObjectId
Auto-generated unique identifier.
username
String
Unique username for the user.
email
String
Unique email address of the user.
passwordHash
String
Encrypted password for secure authentication.
createdAt
Date
Timestamp when the account was created.
updatedAt
Date
Timestamp when the account was last updated.
You can create these collections manually in the Back4app dashboard.
Create New Class
﻿
To add fields, simply select the data type, specify the field name, set a default value if necessary, and mark it as required.
Create Column
﻿
Using Back4app's AI Agent for Schema Creation
The integrated AI Agent in Back4app can automatically generate your data schema based on your description, streamlining the setup process.
How to Use the AI Agent:
Access the AI Agent:
Open your Back4app dashboard and locate the AI Agent in your project settings.
Describe Your Schema:
Provide a detailed prompt outlining the collections and fields you need.
Review and Confirm:
Once the AI Agent processes your input, review the proposed schema and confirm to apply it.
Sample Prompt
Text
Create the following collections in my Back4app project:

1) Collection: Products
- Fields:
  - _id: ObjectId (auto-generated)
  - name: String
  - details: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
Create the following collections in my Back4app project:

1) Collection: Products
- Fields:
  - _id: ObjectId (auto-generated)
  - name: String
  - details: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
﻿
This approach saves time and ensures that your data schema is both consistent and optimized.
﻿
Step 3 – Activating the Admin App & Managing CRUD Operations
Introduction to the Admin App
The Back4app Admin App offers a no-code interface for managing your backend data. Its drag-and-drop functionality allows you to effortlessly perform CRUD operations such as creating, reading, updating, and deleting records.
Enabling the Admin App
Navigate to the “More” menu in your Back4app dashboard.
Select “Admin App” and then click “Enable Admin App.”
Set up your admin credentials by creating an initial administrator account, which will also configure roles like B4aAdminUser.
Enable Admin App
﻿
After enabling, log in to the Admin App to manage your application data.
Admin App Dashboard
﻿
Managing CRUD Operations
Within the Admin App, you can:
Create Entries: Use the “Add Record” option in a collection (e.g., Products) to insert new data.
View and Edit Entries: Click on a record to inspect details or update fields.
Delete Entries: Remove records that are no longer needed.
This user-friendly interface simplifies the process of managing your backend data.
﻿
Step 4 – Connecting Your Flutter App with Back4app
With your backend configured, it's time to integrate your Flutter application with Back4app.
Using the Parse SDK for Flutter
Add the Dependency:
Open your pubspec.yaml and include the parse_server_sdk_flutter package:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^3.1.0
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^3.1.0
﻿
Initialize Parse in Your App:
In your main.dart, initialize Parse with your Back4app credentials:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Parse().initialize(
    'YOUR_APPLICATION_ID',
    'https://parseapi.back4app.com',
    clientKey: 'YOUR_FLUTTER_KEY',
    debug: true,
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Basic CRUD App',
      home: HomePage(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Parse().initialize(
    'YOUR_APPLICATION_ID',
    'https://parseapi.back4app.com',
    clientKey: 'YOUR_FLUTTER_KEY',
    debug: true,
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Basic CRUD App',
      home: HomePage(),
    );
  }
}
﻿
Implementing CRUD Operations:
Create a Dart file (e.g., product_service.dart) to handle your CRUD actions:
Dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class ProductService {
  Future<List<ParseObject>> fetchProducts() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Products'));
    final response = await query.query();
    if (response.success && response.results != null) {
      return response.results as List<ParseObject>;
    }
    return [];
  }

  Future<void> addProduct(String name, String details) async {
    final product = ParseObject('Products')
      ..set('name', name)
      ..set('details', details);
    final response = await product.save();
    if (response.success) {
      print('Product added successfully.');
    } else {
      print('Error adding product: ${response.error?.message}');
    }
  }

  Future<void> updateProduct(String objectId, String newName, String newDetails) async {
    final query = QueryBuilder<ParseObject>(ParseObject('Products'));
    query.whereEqualTo('objectId', objectId);
    final response = await query.first();
    if (response != null && response.success) {
      final product = response.results!.first as ParseObject;
      product
        ..set('name', newName)
        ..set('details', newDetails);
      final saveResponse = await product.save();
      if (saveResponse.success) {
        print('Product updated.');
      }
    }
  }

  Future<void> deleteProduct(String objectId) async {
    final query = QueryBuilder<ParseObject>(ParseObject('Products'));
    query.whereEqualTo('objectId', objectId);
    final response = await query.first();
    if (response != null && response.success) {
      final product = response.results!.first as ParseObject;
      final deleteResponse = await product.delete();
      if (deleteResponse.success) {
        print('Product deleted.');
      }
    }
  }
}
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class ProductService {
  Future<List<ParseObject>> fetchProducts() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Products'));
    final response = await query.query();
    if (response.success && response.results != null) {
      return response.results as List<ParseObject>;
    }
    return [];
  }

  Future<void> addProduct(String name, String details) async {
    final product = ParseObject('Products')
      ..set('name', name)
      ..set('details', details);
    final response = await product.save();
    if (response.success) {
      print('Product added successfully.');
    } else {
      print('Error adding product: ${response.error?.message}');
    }
  }

  Future<void> updateProduct(String objectId, String newName, String newDetails) async {
    final query = QueryBuilder<ParseObject>(ParseObject('Products'));
    query.whereEqualTo('objectId', objectId);
    final response = await query.first();
    if (response != null && response.success) {
      final product = response.results!.first as ParseObject;
      product
        ..set('name', newName)
        ..set('details', newDetails);
      final saveResponse = await product.save();
      if (saveResponse.success) {
        print('Product updated.');
      }
    }
  }

  Future<void> deleteProduct(String objectId) async {
    final query = QueryBuilder<ParseObject>(ParseObject('Products'));
    query.whereEqualTo('objectId', objectId);
    final response = await query.first();
    if (response != null && response.success) {
      final product = response.results!.first as ParseObject;
      final deleteResponse = await product.delete();
      if (deleteResponse.success) {
        print('Product deleted.');
      }
    }
  }
}
﻿
This service file enables your Flutter UI to interact smoothly with your Back4app backend.
Alternative: Using REST/GraphQL in Flutter
If you choose not to use the Parse SDK, you can make REST calls using packages like http. However, the Parse SDK is recommended for a more integrated experience.
﻿
Step 5 – Securing Your Backend
Access Control Lists (ACLs)
To protect your data, configure ACLs for your objects. For example, create a product that is visible only to its creator:
Dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

Future<void> addPrivateProduct(String name, String details, ParseUser owner) async {
  final product = ParseObject('Products')
    ..set('name', name)
    ..set('details', details);

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

  product.setACL(acl);

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

Future<void> addPrivateProduct(String name, String details, ParseUser owner) async {
  final product = ParseObject('Products')
    ..set('name', name)
    ..set('details', details);

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

  product.setACL(acl);

  final response = await product.save();
  if (response.success) {
    print('Private product created.');
  } else {
    print('Error: ${response.error?.message}');
  }
}
﻿
Class-Level Permissions (CLPs)
In your Back4app dashboard, configure CLPs to enforce default security rules, ensuring that only authenticated users can access or modify specific collections.
﻿
Step 6 – Implementing User Authentication
Setting Up User Registration and Login
Back4app utilizes the Parse User class for handling authentication. In your Flutter app, implement user registration and login as follows:
Dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class AuthService {
  Future<void> registerUser(String username, String password, String email) async {
    final user = ParseUser.createUser(username, password, email);
    final response = await user.signUp();
    if (response.success) {
      print('User registered successfully!');
    } else {
      print('Registration failed: ${response.error?.message}');
    }
  }

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

class AuthService {
  Future<void> registerUser(String username, String password, String email) async {
    final user = ParseUser.createUser(username, password, email);
    final response = await user.signUp();
    if (response.success) {
      print('User registered successfully!');
    } else {
      print('Registration failed: ${response.error?.message}');
    }
  }

  Future<void> loginUser(String username, String password) async {
    final user = await ParseUser.login(username, password);
    if (user.success) {
      print('Logged in as: ${user.result?.username}');
    } else {
      print('Login error: ${user.error?.message}');
    }
  }
}
﻿
This setup covers user registration, login, and additional authentication management for your Flutter application.
﻿
Step 7 – Conclusion and Future Enhancements
Congratulations! You have successfully built a Flutter-based CRUD application integrated with Back4app. 
In this tutorial, you created a project named Basic-CRUD-App-Flutter, defined collections for Products and Users, and managed your backend using the Admin App. 
Additionally, you connected your Flutter app with Back4app using the parse_server_sdk_flutter package while implementing robust security and user authentication.
Next Steps:
Expand Your App:
Add features like advanced search, detailed views, or real-time updates.
Enhance Backend Functionality:
Explore cloud functions, third-party API integrations, or more granular role-based access controls.
Continue Learning:
Review the Back4app documentation and additional tutorials to further optimize your application.
Happy coding and best wishes on your Flutter development journey!
Field	Type	Description
_id	ObjectId	Automatically assigned unique identifier.
name	String	The name of the product.
details	String	A brief description of the product.
createdAt	Date	Timestamp when the product was added.
updatedAt	Date	Timestamp when the product was last updated.
Field	Type	Description
_id	ObjectId	Auto-generated unique identifier.
username	String	Unique username for the user.
email	String	Unique email address of the user.
passwordHash	String	Encrypted password for secure authentication.
createdAt	Date	Timestamp when the account was created.
updatedAt	Date	Timestamp when the account was last updated.
Updated 20 Feb 2025
Did this page help you?
How to Build a CRUD App with Xamarin?
How to Build a CRUD App with React Native?