[Mobile] Flutter-Quill editor inside a scrollable form #291

niccord · 2021-07-13T09:08:18Z

niccord
Jul 13, 2021

My issue is about [Mobile]

I would like to put my QuillEditor inside my form and not on a dedicated page of my app.

I've tried with a Column inside a SingleChildScrollView and with a ListView widget, but the result is the same:

since there is no text, the editor is small and I would like it to be "expanded" (I know it can't be as such inside a scroll, but you get the point);
the overflow of the text does not make the page scroll accordingly, so the users can't see what they are typing.

Here's some code:

return Scaffold(
  appBar: AppBar(
    title: Text("Reply form"),
    actions: [
      IconButton(
        onPressed: () {},
        icon: Icon(Icons.send),
        tooltip: "Send",
      )
    ],
  ),
  body: SafeArea(
    child: Form(
      child: ListView(
        children: [
          Text("From: [email protected]"),
          SizedBox(height: 8),
          chipInputField(
            label: "To",
            onChanged: (List<Object?> o) {},
            initialValue: ["[email protected]"],
          ),
          chipInputField(
            label: "Cc",
            onChanged: (List<Object?> o) {},
            initialValue: ["[email protected]"],
          ),
          chipInputField(
            label: "Bcc",
            onChanged: (List<Object?> o) {},
            initialValue: ["[email protected]"],
          ),
          QuillEditor(
            controller: quillController,
            scrollable: true,
            scrollController: ScrollController(),
            focusNode: FocusNode(),
            padding: EdgeInsets.all(5),
            autoFocus: true,
            readOnly: false,
            expands: false,
            placeholder: "compose_email",
          ),
          QuillToolbar.basic(
            controller: quillController,
            showUnderLineButton: false,
            showStrikeThrough: false,
            showColorButton: false,
            showBackgroundColorButton: false,
            showListCheck: false,
            showIndent: false,
          ),
        ],
      ),
    ),
  ),
);