在 TextField Flutter 中为文本设置圆角颜色背景

Question

I would like my text background in Textfield looks like this :

But with this code :

     style: TextStyle(
              background: Paint()..color = Colors.blue
                ..style = PaintingStyle.fill,
              color: Colors.white,
            ),

I have this result :

There is no padding , no rounded corners and a transparent line between both...

How can I do this ?

EDIT :

Another way with TextStyle was provided by @Csaba Mihaly but this is a workaround I want to avoid. I'm looking for a custom paint solution

EDIT :

According answers provided PaintStyle.stroke can be used but it's not 100% matching the expected result (first screen) :

No matter the text size is, in order to fill the empty space the stroke width must be bigger as I can see. It will render a large padding and corner radius. In my case :

Answer 1

So I found this article https://medium.com/@pinkesh.earth/flutter-quick-tip-how-to-set-text-background-color-with-curve-d40a2f96a415 It describes how to use textstyle to look like what you want, but it doesn't exactly work like that, I don't know why. It draws the next line's background above the previous.

I managed to work around it (bug?) by stacking two textfields(one has transparent text, the other transparent background).

The result:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final myControllerName = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(
            inputDecorationTheme: const InputDecorationTheme(
          fillColor: Colors.transparent,
          filled: true,
          focusedBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Colors.transparent)),
          enabledBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.transparent),
          ),
          border: UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.transparent),
          ),
        )),
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            body: Center(
                child: Stack(
          children: [
            IntrinsicWidth(
              child: TextField(
                controller: myControllerName,
                style: TextStyle(
                    color: Colors.transparent,
                    fontWeight: FontWeight.w600,
                    fontSize: 20,
                    background: Paint()
                      ..strokeWidth = 25
                      ..color = Colors.blue
                      ..style = PaintingStyle.stroke
                      ..strokeJoin = StrokeJoin.round),
                keyboardType: TextInputType.multiline,
                maxLines: null,
                textAlign: TextAlign.center,
              ),
            ),
            IntrinsicWidth(
              child: TextField(
                controller: myControllerName,
                style: const TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.w600,
                    fontSize: 20,
                    backgroundColor: Colors.transparent),
                keyboardType: TextInputType.multiline,
                maxLines: null,
                textAlign: TextAlign.center,
              ),
            )
          ],
        ))));
  }
}

Answer 2

Expandin on the @Csisanyi answer, you need to adjust the textfield padding, textstyle and borderradius number for your preferences. Tried it in dartpad, looks similar to what you want.

For the dynamic textfield width shrink you might want to try: https://pub.dev/packages/auto_size_text_field

TextField(
        style: const TextStyle(color: Colors.white),
        keyboardType: TextInputType.multiline,
        maxLines: null,
        decoration: InputDecoration(
          fillColor: Colors.blue,
          contentPadding:
              const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
          filled: true,
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(10),
          ),
        ),
      ),

Answer 3

Just give the desired strokeWidth value and it will work fine. Output Image

style: TextStyle(
        background: Paint()
          ..strokeWidth = 17
          ..color = Colors.blue
          ..strokeJoin = StrokeJoin.round
          ..strokeCap = StrokeCap.round
          ..style = PaintingStyle.stroke,

        color: Colors.black,
      )

Answer 4

Do like this:

style: TextStyle(
              background: Paint()..color = Colors.blue
                ..strokeJoin = StrokeJoin.round
                ..strokeCap = StrokeCap.round
                ..style = PaintingStyle.stroke
                ..strokeWidth = 30.0,
              color: Colors.white,
            ),

Answer 5

You code snippet will work if you add ..strokeWidth = 20 to the style, eg:

Text(
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ',
    textAlign: TextAlign.center,
    style: TextStyle(
     background: Paint()
       ..color = Colors.blue
       ..strokeWidth = 20
       ..strokeJoin = StrokeJoin.round
       ..strokeCap = StrokeCap.round
       ..style = PaintingStyle.stroke,
     color: Colors.white,
    ))

Stroke width defines the 'fatness' of the area around the text. Though to be accurate, the inside corners (look near word 'industry') are not rounded, I doubt text background can fix that.

Also please not that if you're targeting Web you might need to use Skia renderer instead of HTML renderer( https://stackoverflow.com/a/69975665/440696 ) in order to avoid the following artefact:

Answer 6

I created a package called rounded_background_text to achive this

https://pub.dev/packages/rounded_background_text

Usage:

import 'package:rounded_background_text/rounded_background_text.dart';

RoundedBackgroundText(
  'A cool text to be highlighted',
  style: const TextStyle(fontWeight: FontWeight.bold),
  backgroundColor: Colors.white,
),

TextFields are also supported

Answer 7

Try something like this

TextField(
  keyboardType: TextInputType.multiline
  decoration: InputDecoration(
      border: OutlineInputBorder(
        borderRadius: BorderRadius.all(<value>),
      ),

You can find other examples here https://stacksecrets.com/flutter/flutter-textfield-decoration-in-depth#How_To_Decorate_Border_Of_TextField