How to set rounded corner of TextSpan in Flutter

user_6456568 0
Viewed 5678

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.

image

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?

dart flutter android ios
5 Answers

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

user_71308200

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),
      ),
    ],
  ),
),

enter image description here

user_91087730

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"),
              ],
            ),
          ),
user_142489040

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. enter image description here

Hope this can help anyone who needs it.

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

user_98746110

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"),
                  )),
            ),
user_76129910
Related