2

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.

trying to create

Sarthak Singhal
  • 1,175
  • 12
  • 16

1 Answers1

3

enter image description here

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.

Mohammed Alfateh
  • 3,186
  • 1
  • 10
  • 24
  • Any idea how to change corner roundness? – Sarthak Singhal Oct 20 '20 at 09:16
  • You welcome anytime. The corners are rounded because of strokeJoin = StrokeJoin.round property there is also StrokeJoin.miter and StrokeJoin.bevel. Do you mean the round size? – Mohammed Alfateh Oct 20 '20 at 09:41
  • Yes, thats what i meant. Sorry that the previous comment was a little misleading. How to change the roundess size or corner radius of the paint – Sarthak Singhal Oct 20 '20 at 15:55
  • Sorry I don't know a way to change the roundess size but playing with the strokeWidth and the font size may do it, I am not sure (I didn't try it before) but I think you can archive a full customize background by making custom paint class and pass it to the background. – Mohammed Alfateh Oct 20 '20 at 23:37