linagora / rich-text-composer

Unified rich text composer in Flutter

Add features to the Android / iOS keyboard in a simple way.

Features

Allow custom top toolbar keybroad

Example of the custom top toolbar keybroad:

Getting started

You should ensure that you add the dependency in your flutter project.

dependencies:
  rich_text_composer:
    git:
      url: https://github.com/linagora/rich-text-composer.git
      ref: master

You should then run flutter packages upgrade or update your packages in IntelliJ.

Usage

Make sure KeyboardRichText Widget at top level widget tree of Screen (or only after Scaffold Widget)

Use Default ToolBar:

class _MyHomePageState extends State<MyHomePage> {
  final RichTextAppendController richTextAppendController = RichTextAppendController();

  @override
  void initState() {
    richTextAppendController.showRichTextView();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Demo Home Page'),
      ),
      body: KeyboardRichText(
        richTextAppendController: richTextAppendController,
        backgroundKeyboardToolBarColor: Colors.grey,
        keyBroadToolbar: RichTextKeyboardToolBar(
            insertImage: () {}, insertAttachment: () {}, appendRickText: () {}),
        child: const Center(
          child: TextField(),
        ),
      ),
    );
  }
}

Use Custom ToolBar:

class _MyHomePageState extends State<MyHomePage> {
  final RichTextAppendController richTextAppendController = RichTextAppendController();

  @override
  void initState() {
    richTextAppendController.showRichTextView();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Demo Home Page'),
      ),
      body: KeyboardRichText(
        richTextAppendController: richTextAppendController,
        backgroundKeyboardToolBarColor: Colors.grey,
        keyBroadToolbar: Text('ToolBar'),
        child: const Center(
          child: TextField(),
        ),
      ),
    );
  }
}