How to make custon editable textbox on a canvas in flutter in which background spreads with the text?

Question

I have not worked with canvas in flutter but I think that edit text box like the one in the image can be achieved by canvas. The background expands with the text length and if the text length in a line is 0 then there is no background.

If you have any code or suggestions to do so, then please help.

Answer 1

Here the code:

class TextFieldTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: SingleChildScrollView(
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 50),
          child: TextField(
            maxLines: 10,
            keyboardType: TextInputType.multiline,
            textAlign: TextAlign.center,
            style: TextStyle(
              wordSpacing: 5,
              height: 2,
              color: Colors.white,
              fontWeight: FontWeight.bold,
              fontSize: 26,
              background: Paint()
                ..color = Colors.blue
                ..style = PaintingStyle.stroke
                ..strokeWidth = 35
                ..strokeJoin = StrokeJoin.round,
            ),
          ),
        ),
      ),
    );
  }
}

The strokeWidth should be larger than the fontSize to fill all the text by the color you choose.

Try to play with it so that you end up with more accurate result.