How to create custom toolbar for rich text editor in flutter?

Question

I want to create custom toolbar of rich text editor. I tried with html_editor_enhanced and quill_html_editor and flutter_quill but I am not get success. Can anyone suggest me the right way to achieve this. I want result like image below.

Answer 1

Which error do you get when you try to use Quill?

You just need a QuillController to manage the content of your editor. You can set the initial text and formatting options using the document property.Then you need Create a QuillToolbar widget. You can customize the available formatting options by passing a list of QuillToolbarAction objects to the actions property. and lastly, add a QuillEditor widget to your widget tree, passing in the QuillController instance and any other properties.

Here is an example

class MyEditor extends StatefulWidget {
  @override
  _MyEditorState createState() => _MyEditorState();
}

class _MyEditorState extends State<MyEditor> {
  final QuillController _controller = QuillController(
    document: Document(),
    selection: const TextSelection.collapsed(offset: 0),
  );

  final List<QuillToolbarAction> _customActions = <QuillToolbarAction>[
    const QuillToolbarAction(
      icon: Icons.format_bold,
      attribute: 'bold',
    ),
    const QuillToolbarAction(
      icon: Icons.format_italic,
      attribute: 'italic',
    ),
    const QuillToolbarAction(
      icon: Icons.format_underline,
      attribute: 'underline',
    ),
    const QuillToolbarAction(
      icon: Icons.format_color_text,
      attribute: 'color',
      value: HexColor('333333'),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        QuillToolbar(
          controller: _controller,
          showHistory: true,
          actions: _customActions,
        ),
        Expanded(
          child: Container(
            padding: EdgeInsets.all(8),
            child: QuillEditor(
              controller: _controller,
              scrollController: ScrollController(),
              scrollable: true,
              autoFocus: false,
            ),
          ),
        ),
      ],
    );
  }
}