Skip to main content
AppFlowy Editor provides comprehensive support for mobile platforms (iOS and Android) with touch-optimized interactions, mobile-specific toolbars, and platform-aware components.

​
Platform Detection

The editor automatically detects the platform and adapts its behavior accordingly: 
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:flutter/material.dart';

final editorState = EditorState(
  document: Document.blank(),
);

AppFlowyEditor(
  editorState: editorState,
  // Mobile-specific configurations are automatically applied
);

​
Mobile Toolbar

AppFlowy Editor includes a mobile-optimized toolbar with touch-friendly controls.

​
Basic Mobile Toolbar Setup

import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:flutter/material.dart';

class MobileEditorExample extends StatelessWidget {
  final EditorState editorState;

  const MobileEditorExample({required this.editorState});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: AppFlowyEditor(
            editorState: editorState,
          ),
        ),
        // Mobile toolbar
        MobileToolbar(
          editorState: editorState,
          toolbarItems: [
            // Add custom toolbar items
          ],
        ),
      ],
    );
  }
}

​
Custom Mobile Toolbar Items

You can create custom toolbar items with actions or menus: 
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:flutter/material.dart';

// Toolbar item with direct action
final boldItem = MobileToolbarItem.action(
  itemIconBuilder: (context, editorState, service) {
    return AFMobileIcon(
      afMobileIcons: AFMobileIcons.bold,
      color: Colors.black,
    );
  },
  actionHandler: (context, editorState) {
    // Toggle bold formatting
    final selection = editorState.selection;
    if (selection != null) {
      editorState.toggleAttribute('bold');
    }
  },
);

// Toolbar item with menu
final headingItem = MobileToolbarItem.withMenu(
  itemIconBuilder: (context, editorState, service) {
    return AFMobileIcon(
      afMobileIcons: AFMobileIcons.heading,
      color: Colors.black,
    );
  },
  itemMenuBuilder: (context, editorState, service) {
    return MobileToolbarItemMenu(
      items: [
        // Menu items for H1, H2, H3
      ],
    );
  },
);

​
Mobile Icons

AppFlowy Editor provides a set of mobile-optimized SVG icons: 
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:flutter/material.dart';

// Available mobile icons
AFMobileIcon(
  afMobileIcons: AFMobileIcons.bold,
  size: 24,
  color: Colors.black,
);

AFMobileIcon(
  afMobileIcons: AFMobileIcons.italic,
  size: 24,
  color: Colors.blue,
);

AFMobileIcon(
  afMobileIcons: AFMobileIcons.underline,
  size: 24,
);

​
Available Mobile Icons

  • AFMobileIcons.textDecoration
  • AFMobileIcons.bold
  • AFMobileIcons.italic
  • AFMobileIcons.underline
  • AFMobileIcons.strikethrough
  • AFMobileIcons.code
  • AFMobileIcons.color
  • AFMobileIcons.link
  • AFMobileIcons.heading / h1 / h2 / h3
  • AFMobileIcons.list / bulletedList / numberedList
  • AFMobileIcons.checkbox
  • AFMobileIcons.quote
  • AFMobileIcons.divider
  • AFMobileIcons.close

​
Mobile Selection Service

The mobile selection service handles touch gestures, magnifier, and selection handles. 
import 'package:appflowy_editor/appflowy_editor.dart';

final editorState = EditorState(
  document: Document.blank(),
);

// Mobile selection is automatically enabled on mobile platforms
// It includes:
// - Touch gesture recognition
// - Selection handles
// - Text magnifier
// - Context menu

​
Mobile Scroll Service

The mobile scroll service provides smooth scrolling optimized for touch interactions: 
import 'package:appflowy_editor/appflowy_editor.dart';

// Scroll service is automatically configured for mobile
// Features include:
// - Touch-based scrolling
// - Momentum scrolling
// - Scroll-to-cursor
// - Auto-scroll during selection

​
Touch Gesture Handling

Mobile platforms support various touch gestures:
  • Single Tap: Place cursor at tap position
  • Double Tap: Select word at tap position
  • Triple Tap: Select paragraph
  • Long Press: Show context menu
  • Drag: Adjust selection

​
Mobile-Specific Configuration

import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:flutter/material.dart';

final editorState = EditorState(
  document: Document.blank(),
);

// Enable debug paint for selection handles (debugging only)
final debugInfo = EditorStateDebugInfo(
  debugPaintSizeEnabled: true,
);

​
Platform-Specific Behavior

​
iOS-Specific

  • Native iOS selection handles
  • iOS-style magnifier
  • iOS haptic feedback
  • iOS context menu style

​
Android-Specific

  • Material Design selection handles
  • Android-style magnifier
  • Material context menu
  • Android haptic feedback

​
Best Practices

  1. Test on Real Devices: Always test mobile interactions on physical devices, not just simulators
  2. Touch Target Size: Ensure toolbar items are at least 44x44 points for easy tapping
  3. Gesture Conflicts: Be careful with custom gestures that might conflict with editor gestures
  4. Keyboard Behavior: Handle keyboard show/hide events appropriately
  5. Orientation: Support both portrait and landscape orientations

​
Responsive Design

Adapt your editor layout based on screen size: 
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:flutter/material.dart';

class ResponsiveEditor extends StatelessWidget {
  final EditorState editorState;

  const ResponsiveEditor({required this.editorState});

  @override
  Widget build(BuildContext context) {
    final isMobile = MediaQuery.of(context).size.width < 600;
    
    return AppFlowyEditor(
      editorState: editorState,
      // Adjust padding for mobile
      editorStyle: EditorStyle.mobile(
        padding: isMobile 
          ? const EdgeInsets.all(16)
          : const EdgeInsets.all(48),
      ),
    );
  }
}

​
Troubleshooting

​
Selection Handles Not Appearing

Ensure you’re running on a mobile platform or have mobile mode enabled in your configuration.

​
Toolbar Not Responding

Check that your toolbar items have proper action handlers or menu builders defined.

​
Keyboard Issues

Make sure your scaffold resizes properly when the keyboard appears: 
Scaffold(
  resizeToAvoidBottomInset: true,
  body: YourEditorWidget(),
);

Build docs developers (and LLMs) love

Get started for freeTalk to us