fl_html_editor 0.0.3

A rich text HTML editor for Flutter with basic formatting capabilities including bold, italic, underline, text alignment, links, and color selection.

example/lib/main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'HTML Editor Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: EditorDemo(),
    );
  }
}

class EditorDemo extends StatefulWidget {
  @override
  _EditorDemoState createState() => _EditorDemoState();
}

class _EditorDemoState extends State<EditorDemo> {
  final HtmlEditorController controller = HtmlEditorController();
  String htmlContent = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('HTML Editor Demo'),
        actions: [
          IconButton(
            icon: Icon(Icons.code),
            onPressed: () async {
              final content = await controller.getHtml();
              showDialog(
                context: context,
                builder:
                    (context) => AlertDialog(
                      title: Text('HTML Content'),
                      content: SingleChildScrollView(child: Text(content)),
                      actions: [
                        TextButton(
                          onPressed: () => Navigator.pop(context),
                          child: Text('Close'),
                        ),
                      ],
                    ),
              );
            },
          ),
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Expanded(
              child: HtmlEditor(
                controller: controller,
                height: 400,
                settings: EditorSettings(
                  placeholder: 'Start typing your content here...',
                  initialContent:
                      '<p>Welcome to the <strong>HTML Editor</strong>!</p><p>Try out the features:</p><ul><li>Bold, italic, and underline text</li><li>Text alignment</li><li>Create links</li><li>Change text colors</li><li>Add lists</li></ul>',
                ),
                toolbarSettings: ToolbarSettings(
                  showBold: true,
                  showItalic: true,
                  showUnderline: true,
                  showAlignment: true,
                  showLink: true,
                  showTextColor: true,
                  showFontSize: true,
                  showLists: true,
                  showUndo: true,
                ),
                onChanged: (content) {
                  setState(() {
                    htmlContent = content;
                  });
                },
              ),
            ),
            SizedBox(height: 20),
            Wrap(
              spacing: 8,
              runSpacing: 8,
              children: [
                ElevatedButton.icon(
                  onPressed: () => controller.setBold(),
                  icon: Icon(Icons.format_bold, size: 16),
                  label: Text('Bold'),
                  style: ElevatedButton.styleFrom(
                    padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                  ),
                ),
                ElevatedButton.icon(
                  onPressed: () => controller.setItalic(),
                  icon: Icon(Icons.format_italic, size: 16),
                  label: Text('Italic'),
                  style: ElevatedButton.styleFrom(
                    padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                  ),
                ),
                ElevatedButton.icon(
                  onPressed:
                      () => controller.insertLink(
                        'https://flutter.dev',
                        'Flutter',
                      ),
                  icon: Icon(Icons.link, size: 16),
                  label: Text('Add Link'),
                  style: ElevatedButton.styleFrom(
                    padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                  ),
                ),
                ElevatedButton.icon(
                  onPressed: () => controller.changeTextColor(Colors.blue),
                  icon: Icon(Icons.format_color_text, size: 16),
                  label: Text('Blue Text'),
                  style: ElevatedButton.styleFrom(
                    padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                  ),
                ),
                ElevatedButton.icon(
                  onPressed: () => controller.setFontSize('4'),
                  icon: Icon(Icons.format_size, size: 16),
                  label: Text('Large Text'),
                  style: ElevatedButton.styleFrom(
                    padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                  ),
                ),
                ElevatedButton.icon(
                  onPressed: () => controller.clear(),
                  icon: Icon(Icons.clear, size: 16),
                  label: Text('Clear'),
                  style: ElevatedButton.styleFrom(
                    padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                    backgroundColor: Colors.red,
                    foregroundColor: Colors.white,
                  ),
                ),
              ],
            ),
            SizedBox(height: 20),
            Card(
              elevation: 2,
              child: Padding(
                padding: EdgeInsets.all(16),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      children: [
                        Icon(Icons.info_outline, size: 16, color: Colors.blue),
                        SizedBox(width: 8),
                        Text(
                          'Editor Info',
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Colors.blue,
                          ),
                        ),
                      ],
                    ),
                    SizedBox(height: 8),
                    Text('Content length: ${htmlContent.length} characters'),
                    Text(
                      'Words: ${htmlContent.replaceAll(RegExp(r'<[^>]*>'), '').split(' ').where((word) => word.isNotEmpty).length}',
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}