flutter_quill_kit_media 0.1.0

Image and video embeds for flutter_quill_kit: renderers, resize and alignment options, and toolbar insert buttons.

example/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_quill_kit/flutter_quill_kit.dart';
import 'package:flutter_quill_kit_media/flutter_quill_kit_media.dart';

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

/// A minimal editor with image/video support: `MediaExtension` contributes
/// the insert buttons to the toolbar, and the two renderers are handed to
/// the editor so it can draw the embeds.
class MediaExampleApp extends StatefulWidget {
  /// Creates the example app.
  const MediaExampleApp({super.key});

  @override
  State<MediaExampleApp> createState() => _MediaExampleAppState();
}

class _MediaExampleAppState extends State<MediaExampleApp> {
  late final QuillKitController _controller = QuillKitController(
    document: Document.fromJson(const [
      {'insert': 'Tap the image button in the toolbar.\n'},
      {
        'insert': {
          'image': 'https://picsum.photos/seed/flutter_quill_kit/600/320',
        },
      },
      {'insert': '\n'},
    ]),
    extensions: [...QuillKitExtensions.standard(), MediaExtension()],
  );

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('flutter_quill_kit_media')),
        body: Column(
          children: [
            QuillKitToolbar(controller: _controller),
            const Divider(height: 1),
            Expanded(
              child: QuillKitEditor(
                controller: _controller,
                embedRenderers: const [
                  ImageEmbedRenderer(),
                  VideoEmbedRenderer(),
                ],
                appearance: const EditorAppearance(padding: EdgeInsets.all(16)),
              ),
            ),
          ],
        ),
      ),
    );
  }
}