flutter_quill_kit 0.1.0

A modular rich text editor for Flutter built on the Quill Delta format — a lean core with opt-in add-ons, a declarative toolbar, and a stateless viewer.

example/lib/main.dart

import 'package:flutter/material.dart';

import 'converter_page.dart';
import 'editor_page.dart';
import 'extension_page.dart';
import 'viewer_page.dart';

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

/// A four-page tour of the flutter_quill_kit package family:
///
/// 1. **Editor** — full editor with the `standard()` preset, media embeds,
///    read-only switch, and a sample-document loader.
/// 2. **Viewer** — the same document in the stateless `QuillKitViewer`.
/// 3. **Delta & Markdown** — live conversion via flutter_quill_kit_markdown.
/// 4. **Extension** — a working third-party extension in ~90 lines.
class QuillKitDemoApp extends StatefulWidget {
  const QuillKitDemoApp({super.key});

  @override
  State<QuillKitDemoApp> createState() => _QuillKitDemoAppState();
}

class _QuillKitDemoAppState extends State<QuillKitDemoApp> {
  ThemeMode _themeMode = ThemeMode.light;

  void _toggleTheme() {
    setState(() {
      _themeMode = _themeMode == ThemeMode.light
          ? ThemeMode.dark
          : ThemeMode.light;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'flutter_quill_kit demo',
      // QuillKit derives its default text styles and colors from the
      // Material theme, so a theme switch restyles the editor too.
      theme: ThemeData(colorSchemeSeed: const Color(0xFF2962FF)),
      darkTheme: ThemeData(
        colorSchemeSeed: const Color(0xFF2962FF),
        brightness: Brightness.dark,
      ),
      themeMode: _themeMode,
      home: HomeShell(themeMode: _themeMode, onToggleTheme: _toggleTheme),
    );
  }
}

/// Scaffold with a bottom navigation bar hosting the four demo pages.
///
/// The pages live in an [IndexedStack], so each page's controller (and its
/// undo history) survives switching tabs.
class HomeShell extends StatefulWidget {
  const HomeShell({
    required this.themeMode,
    required this.onToggleTheme,
    super.key,
  });

  final ThemeMode themeMode;
  final VoidCallback onToggleTheme;

  @override
  State<HomeShell> createState() => _HomeShellState();
}

class _HomeShellState extends State<HomeShell> {
  static const List<String> _titles = [
    'Editor',
    'Viewer (stateless)',
    'Delta & Markdown',
    'Custom extension',
  ];

  int _index = 0;

  @override
  Widget build(BuildContext context) {
    final dark = widget.themeMode == ThemeMode.dark;
    return Scaffold(
      appBar: AppBar(
        title: Text(_titles[_index]),
        actions: [
          IconButton(
            tooltip: dark ? 'Switch to light theme' : 'Switch to dark theme',
            icon: Icon(dark ? Icons.light_mode : Icons.dark_mode),
            onPressed: widget.onToggleTheme,
          ),
        ],
      ),
      body: IndexedStack(
        index: _index,
        children: [
          const EditorPage(),
          ViewerPage(),
          const ConverterPage(),
          const ExtensionPage(),
        ],
      ),
      bottomNavigationBar: NavigationBar(
        selectedIndex: _index,
        onDestinationSelected: (index) => setState(() => _index = index),
        destinations: const [
          NavigationDestination(
            icon: Icon(Icons.edit_outlined),
            label: 'Editor',
          ),
          NavigationDestination(
            icon: Icon(Icons.visibility_outlined),
            label: 'Viewer',
          ),
          NavigationDestination(icon: Icon(Icons.swap_horiz), label: 'Convert'),
          NavigationDestination(
            icon: Icon(Icons.extension_outlined),
            label: 'Extension',
          ),
        ],
      ),
    );
  }
}