Creare un editor HTML in Flutter con quill_html_editor

In questo articolo vediamo una delle varie librerie per Flutter per creare un editor HTML: quill_html_editor!

Iniziamo con l'installazione della llibreria:

flutter pub add quill_html_editor

Qui sotto un esempio di codice:

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late QuillEditorController controller;

  final _editorTextStyle = const TextStyle(
    fontSize: 18,
    color: Colors.black,
    fontWeight: FontWeight.normal,
  );

  final _hintTextStyle = const TextStyle(
    fontSize: 18,
    color: Colors.black38,
    fontWeight: FontWeight.normal,
  );

  @override
  void initState() {
    controller = QuillEditorController();
    super.initState();
  }

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

  void getHtmlText() async {
    String? htmlText = await controller.getText();
    debugPrint(htmlText);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Demo'),
      ),
      body: Column(
        children: [
          ToolBar(
            toolBarColor: Colors.grey.shade200,
            controller: controller,
            padding: const EdgeInsets.all(8),
            iconSize: 25,
            iconColor: Colors.black87,
            crossAxisAlignment: WrapCrossAlignment.start,
            direction: Axis.horizontal,
          ),
          Expanded(
            child: QuillHtmlEditor(
              controller: controller,
              isEnabled: true,
              ensureVisible: false,
              minHeight: 500,
              autoFocus: false,
              textStyle: _editorTextStyle,
              hintTextStyle: _hintTextStyle,
              hintTextAlign: TextAlign.start,
              padding: const EdgeInsets.only(
                left: 10,
                top: 10,
              ),
              hintTextPadding: const EdgeInsets.only(
                left: 20,
              ),
              backgroundColor: Colors.white70,
              inputAction: InputAction.newline,
              onTextChanged: (text) => debugPrint('TESTO: $text'),
            ),
          ),
        ],
      ),
      bottomNavigationBar: Container(
        width: double.maxFinite,
        color: Colors.grey.shade200,
        padding: const EdgeInsets.all(8),
        child: Wrap(
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: TextButton(
                onPressed: () {
                  getHtmlText();
                },
                child: const Text("Salva"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Enjoy!