6

I am trying to add an editable textbox to the canvas in Flutter, that will bring up the keyboard once selected.

I am using a custom painter to print text to a canvas (shown in the code below). Is it possible to make this text editable, or add a text input element over the canvas at a particular offset?

import 'package:flutter/material.dart' as Material;

class CanvasPainter extends Material.ChangeNotifier implements Material.CustomPainter {
..

void paint(Canvas canvas, Size size) {

      Material.TextSpan textSpan = new Material.TextSpan(style: new material.TextStyle(color: new Maaterial.Color.fromRGBO(r, g, b, 1.0), fontSize: font.fontSize.toDouble(), fontFamily: 'Roboto'),text: "Hello there");
      Material.TextPainter tp = new Material.TextPainter( text: textSpan, textAlign: TextAlign.left, textDirection: TextDirection.ltr, textScaleFactor: ratio);
      tp.layout();
      tp.paint(canvas, new Offset(50.0,50.0));
}

}
Fabio Cortez
  • 693
  • 6
  • 8
samdangerous
  • 73
  • 1
  • 5

1 Answers1

0

Not the best solution, but I could solve similar issue with OverlayEntry.

Steps:

  1. create an OverlayEntry, put a (hidden) TextField into it with a FocusNode and TextEditController.
  2. after added the overlay entry, request focus on the focusNode, so the keyboard will open.
  3. Add an onChanged to the TextField, and notify the painter somehow (e.g. valueNotifier) on text change.
  4. In the TextPainer use the TextEditController.text value
Dániel Rózsa
  • 429
  • 4
  • 5