Flutter using EditableText

Question

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?

Answer 1

• 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);
  }
  }
  

Answer 2

Just add this line:

style: TextStyle(
  decorationThickness: 0.001,
),