rounded_background_text 0.1.3

Text and TextField highlighted with rounded corners

rounded_background_text

Highlight text with rounded corners

Content

• Features
• Getting started
• Usage
  • Highlight a simple text
  • Highlight a text field
  • Highlight a text span
• You may like to know
  • Change the corner radius
  • Known issues with the text field,
• Contribution

Features

• ✅ Highlight Text
• ✅ Highlight Text Field [beta]
• ✅ Highlight Text Span

[Showcase]

Getting started

Import the package:

import 'package:rounded_background_text/rounded_background_text.dart';

Usage

Highlight a simple text:

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

[Simple Text]

Multiline text is also supported

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

[Two Lines Text]

Highlight a text field:

You must use a TextEditingController

final controller = TextEditingController();

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

The text will be highlighted as the user types

[TextField Preview]

The font size of the text will be reduced if there isn't enough space to fit the text. The text field can't be scrollable

Highlight a text span:

Highlight a small part of a text

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

[TextSpan Highlight Preview]

You may like to know:

Change the corner radius

You can change the radius of the corners by setting innerRadius and outerRadius:

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

The max allowed value is 20.0. The min is 0.0

Known issues with the text field

• It can't be scrollable. Instead, as a workaround, the text is scaled down to fit the available space

Contribution

Feel free to file an issue if you find a problem or make pull requests.

All contributions are welcome!