Skip to main content

​
Installation

Get started with AppFlowy Editor by adding it to your Flutter project. This guide will walk you through the installation process and initial setup.

​
Prerequisites

Before installing AppFlowy Editor, ensure your development environment meets these requirements:
  • Flutter SDK: >= 3.32.0
  • Dart SDK: >= 3.6.0 < 4.0.0
Check your Flutter version by running flutter --version in your terminal.

​
Add Package Dependency

Add AppFlowy Editor to your Flutter project using your preferred package manager: 
flutter pub add appflowy_editor
After adding the dependency, run flutter pub get to download the package.

​
Install Dependencies

Fetch the package and its dependencies: 
flutter pub get

​
Configure Localization

AppFlowy Editor requires localization delegates to be configured in your app. Add the localization delegates to your MaterialApp widget:
main.dart
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        AppFlowyEditorLocalizations.delegate,
      ],
      supportedLocales: AppFlowyEditorLocalizations.delegate.supportedLocales,
      home: const MyHomePage(),
    );
  }
}
The localizationsDelegates configuration is required. Without it, the editor may not function correctly.

​
Import the Package

Import AppFlowy Editor in your Dart files where you want to use it: 
import 'package:appflowy_editor/appflowy_editor.dart';

​
Verify Installation

Verify that AppFlowy Editor is properly installed by running your app: 
flutter run
Use flutter devices to list all available devices.

​
Try the Example App

AppFlowy Editor includes a comprehensive example app demonstrating various features. Clone the repository and run the example:
Terminal
git clone https://github.com/AppFlowy-IO/appflowy-editor.git
cd appflowy-editor
flutter pub get
flutter run
The example app showcases:
  • Basic editor setup
  • Custom themes
  • Block components
  • Toolbar customization
  • Mobile and desktop layouts
  • Collaborative editing
  • Import/export functionality

​
Package Information

Here are the key details about the AppFlowy Editor package:
PropertyValue
Package Nameappflowy_editor
Current Version6.1.0
Homepagegithub.com/AppFlowy-IO/appflowy-editor
PlatformsAndroid, iOS, Linux, macOS, Windows, Web

​
Troubleshooting

​
Version Conflicts

If you encounter version conflicts with dependencies, try:
Terminal
flutter pub upgrade
flutter clean
flutter pub get

​
Localization Issues

If you see localization-related errors, ensure:
  1. AppFlowyEditorLocalizations.delegate is added to localizationsDelegates
  2. flutter_localizations is added as a dependency
  3. You’ve run flutter pub get after adding dependencies

​
Platform-Specific Issues

For platform-specific issues, check the GitHub issues or ask in our Discord community.

​
Next Steps

Now that AppFlowy Editor is installed, you’re ready to create your first editor!

Quick Start Guide

Follow the quick start guide to build your first editor in minutes

Build docs developers (and LLMs) love

Get started for freeTalk to us