CODEWITHSUNDEEP
flutterdart
interstar
interstar

Reputation: 27216

Flutter using EditableText

I'm trying to figure out how to use the TextEditor in Flutter.

I have "Card Editor" (basically I want to be able to work on the equivalent of a paragraph of text)

new EditableText(
                    autofocus: true,
                    maxLines: null,
                    backgroundCursorColor: Colors.amber,
                    cursorColor: Colors.green,
                    style: TextStyle(),
                    focusNode:  FocusNode(),
                    controller: controller,
                    onSubmitted: (val) {
                      _addCard(val);
                      Navigator.pop(context);
                    },
                  )

I adapted this from an example of a TextField.

But I have a couple of questions.

Firstly, it doesn't seem to show anything when I type. The cursor moves, but no text is visible. Is that the default when there's no explicit style?

Secondly, how do I trigger the submit? With a TextField, the CR / Enter button does this. Obviously I see why you don't necessarily want that with EditableText But what should I do instead?

Third, I need to be able to put default text into this widget. I tried adding a "value" attribute to the EditableText, but that doesn't seem to be right. What's the way to do this?

Upvotes: 4

Views: 20496

Answers (3)

user3519266
user3519266

Reputation: 31

There is a class EditableText for this. Use the following code:

EditableText(
              maxLines: 60,
              onTapOutside: (tapOutside) {
                focusNode.unfocus();
                print('Tapped outside: $tapOutside');
              },
              style: kStoryContentTextStyle,
              controller: editingController!,
              cursorColor: Colors.white,
              backgroundCursorColor: Colors.black,
              focusNode: focusNode,
            ),

The focus node can dismiss the editing using unfocus() . The controller will contain the edited text under editingController.text . The EditableText can be embeded in another widget. The cursor color is the color of the cursor when editing.

Upvotes: 0

Yousef Alkhateeb
Yousef Alkhateeb

Reputation: 23

Just add this line:

style: TextStyle(
  decorationThickness: 0.001,
),

Upvotes: -1

Mohamed Elrashid
Mohamed Elrashid

Reputation: 8619

  • from TextField class - material library - Dart API :

    EditableText, which is the raw text editing control at the heart of a TextField. The EditableText widget is rarely used directly unless you are implementing an entirely different design language, such as Cupertino.

  • here an example of TextField , from my app flutter listview CRUD app using nonsecure rest api

    class _TaskEditPageWidgetState extends State<TaskEditPageWidget> {
TextEditingController _noteController;

@override
void initState() {
    super.initState();
    _noteController = TextEditingController.fromValue(
    TextEditingValue(
        text: widget.taskOpj.note,
    ),
    );
}

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

@override
Widget build(BuildContext context) {
    return Scaffold(
    appBar: _appBar(),
    body: _body(),
    );
}

Widget _appBar() {
    return AppBar(
    title: new Text("Edit Task"),
    actions: <Widget>[
        new IconButton(
        icon: new Icon(Icons.save),
        onPressed: _save,
        ),
    ],
    );
}

Widget _body() {
    return SingleChildScrollView(
    child: Column(
        children: <Widget>[
        Text("Note:"),
        TextField(
            decoration: InputDecoration(border: InputBorder.none),
            autofocus: true,
            keyboardType: TextInputType.multiline,
            maxLines: null,
            controller: _noteController),
        ],
    ),
    );
}

Future _save() async {
    widget.taskOpj.note = _noteController.text;
    await Tasks.updateTask(widget.taskOpj);
    widget.notifyParent();
    Navigator.pop(context);
}
}

Upvotes: 6

Related Questions