如何在 Flutter 中设置 TextSpan 的圆角

Question

I want to set rounded corner of Textspan in flutter, I think class Paint is needed, but I cannot figure out how to do that.

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: new AppBar(),
        body: new RichText(
          text: new TextSpan(
            text: null,
            style: TextStyle(fontSize: 20.0, color: Colors.black),
            children: <TextSpan>[
              new TextSpan(
                text: 'inactive ',),
              new TextSpan(
                  text: 'active',
                  style: new TextStyle(
                    color: Colors.white,
                    background: Paint()
                      ..color = Colors.redAccent,
                  )),
            ],
          ),
        ),
      ),
    );
  }
}

Is there a way to use Textspan to achieve that instead of using a Container wrapping Text ?

Answer 1

Without using Container or something else - I can see only one way to make corners rounded

TextSpan(
    text: 'active',
    style: TextStyle(
        fontSize: 20.0,
        color: Colors.white,
        background: Paint()
          ..strokeWidth = 24.0
          ..color = Colors.red
          ..style = PaintingStyle.stroke
          ..strokeJoin = StrokeJoin.round))

But in this case there are paddings around text, so I doubt this is proper way

Answer 2

You can use RichText with WidgetSpan , then combine it with line height

RichText(
  text: TextSpan(
    children: [
      WidgetSpan(
        child: Container(
          child: Text(
            addressItem.deliveryAddressType == "home" ? "Nhà" : "Văn phòng",
            style: TextStyle(
              fontFamily: AppFonts.SFUITextMedium,
              color: AppColors.wram_grey,
              fontSize: AppFonts.textSizeSmall,
            ),
          ),
          decoration: BoxDecoration(
              color: AppColors.header_grey, borderRadius: BorderRadius.all(Radius.circular(20))),
          padding: EdgeInsets.fromLTRB(6, 2, 6, 2),
          margin: EdgeInsets.only(right: 5),
        ),
      ),
      TextSpan(
        text: '${addressItem.street}, ${addressItem.ward}, ${addressItem.city}, ${addressItem.region}',
        style: TextStyle(
            fontFamily: AppFonts.SFUITextMedium,
            color: AppColors.wram_grey,
            fontSize: AppFonts.textSizeMedium,
            height: 1.5),
      ),
    ],
  ),
),

Answer 3

if the highlighted text is short enough (so you do not want to break line in it), you can just use WidgetSpan insted of TextSpan.

For example:

RichText(
            textAlign: TextAlign.center,
            text: TextSpan(
              children: [
                TextSpan(
                  text: "some text",
                ),
                WidgetSpan(
                  child: Container(
                    padding: EdgeInsets.symmetric(vertical: 1),
                    decoration: BoxDecoration(
                      color: Colors.red,
                      borderRadius: BorderRadius.circular(999),
                    ),
                    child: IntrinsicWidth(
                      child: Text(
                        "some text",
                      ),
                    ),
                  )
                ),
                TextSpan(text: "some text"),
              ],
            ),
          ),

Answer 4

If you want to set the rounded corner of the text field in Flutter You have to use Container only, If you want to avoid Container then there is another way, you have to avoid using ListView as a body in your app. If you want to add an only single item on screen then you can try without container but if there is more than one item then you have no choice without implementing ListView and add multiple containers for a different purpose.

new Container(
              height: 80.0,
              color: Colors.transparent,
              child: new Container(
                  decoration: new BoxDecoration(
                      color: Colors.green,
                      borderRadius: new BorderRadius.only(
                          topLeft: const Radius.circular(30.0),
                          topRight: const Radius.circular(30.0),
                          bottomLeft: const Radius.circular(30.0),
                          bottomRight: const Radius.circular(30.0))),
                  child: new Center(
                    child: new Text("Active text"),
                  )),
            ),

Answer 5

I have created a package which is able to customize the background of the text --> you can change the radius, padding and color for the text background.

It's a fork from the AutoSizeText widget so you could even autosize the text if you want to.

Here is an example image of the text with background, radius and padding.

Hope this can help anyone who needs it.

The link to the github repo is following: https://github.com/Letalus/auto_size_text_background