Skip to main content
AppFlowy Editor provides customizable toolbars for both desktop and mobile platforms. The floating toolbar appears when text is selected, while mobile devices get a dedicated mobile toolbar.

​
Overview

AppFlowy Editor supports two types of toolbars:
  • Floating Toolbar (Desktop) - Appears above selected text
  • Mobile Toolbar - Bottom toolbar for mobile devices with touch-optimized controls

​
Desktop floating toolbar

The floating toolbar appears when text is selected on desktop platforms.

​
Default toolbar items

The standard floating toolbar includes:
  • Text formatting (bold, italic, underline, strikethrough)
  • Text and highlight colors
  • Link insertion
  • Code formatting
  • Heading levels
  • List conversions (bulleted, numbered)
  • Quote blocks
  • Alignment options

​
Customizing toolbar items

You can customize which items appear in the toolbar: 
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:flutter/material.dart';

final customToolbarItems = [
  // Text formatting
  ...buildTextFormatItems(editorState),
  
  // Colors
  textColorItem,
  highlightColorItem,
  
  // Links
  buildLinkItem(),
  
  // Headings
  ...headingItems,
  
  // Lists
  bulletedListItem,
  numberedListItem,
  
  // Quotes
  quoteItem,
];

AppFlowyEditor(
  editorState: editorState,
  // Apply custom toolbar items
);

​
Creating custom toolbar items

Create your own toolbar items: 
import 'package:appflowy_editor/appflowy_editor.dart';

final customItem = ToolbarItem(
  id: 'custom_action',
  type: ToolbarItemType.action,
  tooltipsMessage: 'Custom Action',
  iconBuilder: (isHighlight) => Icon(
    Icons.star,
    color: isHighlight ? Colors.blue : Colors.grey,
  ),
  handler: (editorState, context) {
    // Your custom action here
    final selection = editorState.selection;
    if (selection == null) return;
    
    // Perform custom operation
  },
);

​
Mobile toolbar

The mobile toolbar is optimized for touch interactions on iOS and Android.

​
Mobile toolbar items

Create mobile toolbar items with MobileToolbarItem: 
import 'package:appflowy_editor/appflowy_editor.dart';

// Action item
final boldItem = MobileToolbarItem.action(
  itemIcon: const AFMobileIcon(afMobileIcons: AFMobileIcons.bold),
  actionHandler: (editorState, selection) {
    editorState.toggleAttribute(AppFlowyRichTextKeys.bold);
  },
);

// Menu item with options
final headingItem = MobileToolbarItem.withMenu(
  itemIcon: const AFMobileIcon(afMobileIcons: AFMobileIcons.heading),
  itemMenuBuilder: (editorState, selection, itemMenuService) {
    return GridView.count(
      crossAxisCount: 3,
      children: [
        // Heading 1
        MobileToolbarMenuBtn(
          icon: AFMobileIcon(afMobileIcons: AFMobileIcons.h1),
          label: Text('H1'),
          onPressed: () {
            // Convert to H1
          },
        ),
        // More heading levels...
      ],
    );
  },
);
Source: lib/src/editor/toolbar/mobile/mobile_toolbar_item.dart

​
AFMobileIcon

Use built-in mobile icons: 
const AFMobileIcon(
  afMobileIcons: AFMobileIcons.bold,      // Bold
)
const AFMobileIcon(
  afMobileIcons: AFMobileIcons.italic,    // Italic
)
const AFMobileIcon(
  afMobileIcons: AFMobileIcons.heading,   // Heading
)
const AFMobileIcon(
  afMobileIcons: AFMobileIcons.list,      // List
)
See the Mobile Support guide for all available icons.

​
Applying mobile toolbar

import 'package:appflowy_editor/appflowy_editor.dart';

final customMobileToolbarItems = [
  boldItem,
  italicItem,
  underlineItem,
  headingItem,
  listItem,
];

AppFlowyEditor(
  editorState: editorState,
  // Mobile toolbar will use these items
);

​
Toolbar styling

​
Desktop toolbar styling

Customize the floating toolbar appearance: 
// Toolbar colors and styling are controlled through the theme
final editorStyle = EditorStyle(
  selectionColor: Colors.blue.withOpacity(0.3),
  // Other style properties
);

​
Mobile toolbar styling

Customize mobile toolbar appearance with MobileToolbarStyle: 
import 'package:appflowy_editor/appflowy_editor.dart';

final toolbarStyle = MobileToolbarStyle(
  backgroundColor: Colors.white,
  foregroundColor: Colors.black,
  clearDiagonalLineColor: Colors.grey,
  itemHighlightColor: Colors.blue,
  itemOutlineColor: Colors.grey.shade300,
  tabbarSelectedBackgroundColor: Colors.blue,
  tabbarSelectedForegroundColor: Colors.white,
  primaryColor: Colors.blue,
  onPrimaryColor: Colors.white,
  outlineColor: Colors.grey,
);
Source: lib/src/editor/toolbar/mobile/mobile_toolbar_style.dart

​
Disabling toolbar

You can disable the toolbar entirely if needed: 
AppFlowyEditor(
  editorState: editorState,
  // Set to false to disable floating toolbar
  showMagnifier: false,
)
The toolbar automatically adapts to the platform. On desktop, a floating toolbar appears on selection. On mobile, a bottom toolbar provides touch-optimized controls.

Mobile Support

Learn more about mobile-specific features

Customization Overview

Customize editor appearance and behavior

Build docs developers (and LLMs) love

Get started for freeTalk to us