圆角背景文本

用圆角高亮文本

特点

  • ✅ 高亮文本
  • ✅ 高亮文本框
  • ✅ 高亮文本片段

入门

导入包

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

Simple Text

多行文本也支持

RoundedBackgroundText(
  'A cool text to be highlighted\nWith two lines or more',
  style: const TextStyle(fontWeight: FontWeight.bold),
  backgroundColor: Colors.amber,
),

Two Lines Text

高亮文本框

您必须使用 TextEditingController

final controller = TextEditingController();

RoundedBackgroundTextField(
  controller: controller, // required
  backgroundColor: Colors.blue,
  style: const TextStyle(fontWeight: FontWeight.bold),
  textAlign: TextAlign.center,
),

文本会在用户输入时高亮显示

TextField Preview

高亮文本片段

RichText(
  text: TextSpan(
    text: 'Start your text and ',
    children: [
      RoundedBackgroundTextSpan(
        text: 'highlight something',
        backgroundColor: Colors.blue,
      ),
      const TextSpan(text: ' when necessary'),
    ],
  ),
),

TextSpan Highlight Preview

您可能想知道

您可以通过设置 innerRadius 和 outerRadius 来更改圆角的半径

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

允许的最大值为 20.0。最小值为 0.0

贡献

如果您发现问题，请随时 提交 issue 或 进行 pull request。

欢迎所有贡献！

GitHub 链接

https://github.com/bdlukaa/rounded_background_text