Text and TextField highlighted with rounded corners

Overview

rounded_background_text

Highlight text with rounded corners

Features

  • Highlight Text
  • Highlight Text Field
  • 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 TextField:

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

Highlight a text span:

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:

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

Contribution

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

All contributions are welcome!

Comments
  • Disable auto-resize of text

    Disable auto-resize of text

    Is your feature request related to a problem? Please describe. I have an application that does not need the option to resize the font size when typing. I have an extra option for the user to do this.

    Describe the solution you'd like I would love to have a parameter, where I simply can disable this feature. Like autoResize: false. In the best case, it simply prohibits adding more in the text field, when the max limit is reached.

    Describe alternatives you've considered Alternatively, I could also imagine something like in the Text widget, where there is a parameter for overflow (overflow: TextOverflow.fade).

    Additional context This is a fundamental problem, that needs to be solved. The usage of this plugin is otherwise critical or not possible.

    opened by polarby 5
  • [bug] Flutter 3.0 padding text down

    [bug] Flutter 3.0 padding text down

    Hi friends,

    Thanks for your great package I got an issue after upgrading to flutter 3.0, the text floating down from the background :( can you please help me fix this issue? Thanks in advance!

    My widget: Positioned( left: 15, top: 10, child: Container( alignment: Alignment.center, //decoration: , width: 150, height: 40, color: Colors.transparent, child: RoundedBackgroundText( 'TEXT ' , style: const TextStyle( fontSize: 16, fontWeight: FontWeight.w900), backgroundColor: Colors.orangeAccent .withOpacity(0.9), textAlign: TextAlign.center, maxLines: 1, innerRadius: 1.0, outerRadius: 6.0, // textHeightBehavior: // const TextHeightBehavior( // applyHeightToFirstAscent: false, // applyHeightToLastDescent: false, // leadingDistribution: // TextLeadingDistribution // .even, // ), ),

    Screenshot 2022-05-13 145414

    opened by RoyalCoder88 3
  • Hint doesn't work

    Hint doesn't work

    Describe the bug The hint parameter is not built.

    To Reproduce Steps to reproduce the behavior:

    1. Create Widget RoundedBackgroundTextField
    2. add hint: "text"
    3. See error

    Expected behavior A lighter-colored placeholder hint that appears on the first line of the text field when the text entry is empty.

    bug 
    opened by polarby 1
  • Space doesn't get background

    Space doesn't get background

    Describe the bug When typing a space (" ") a background doesn't get added. When breaking the line twice and then typing again, you can create ONE single text element with TWO different backgrounds. This isn't very confusing for the user when he suddenly drags two elements while expecting to drag only one.

    To Reproduce Steps to reproduce the behavior:

    1. Create a RoundedBackgroundTextField (make sure to set keyboardType: TextInputType.multiline,)
    2. Type "First line\n\nThird line"
    3. See empty row

    Expected behavior Generally having the space character (" ") rendered.

    Screenshots WhatsApp Image 2022-07-24 at 10 23 57 PM

    opened by polarby 1
  • Hint alignment

    Hint alignment

    Fixes #7

    Pre-launch Checklist

    • [x] I have updated CHANGELOG.md with my changes
    • [x] I have addressed all analyzer warnings as best I could
    • [ ] I have added/updated relevant documentation
    opened by bdlukaa 0
  • Scaling

    Scaling

    List which issues are fixed by this PR. You must list at least one issue.

    Fixes #6

    The padding and factors are dyncamically calculated based on the line height

    | Previously | Now | | ----------- | ----- | | GitHub Desktop 31_07_2022 20_15_23 | Explorador de Arquivos 31_07_2022 20_15_04 |

    Pre-launch Checklist

    • [x] I have updated CHANGELOG.md with my changes
    • [x] I have addressed all analyzer warnings as best I could
    • [x] I have added/updated relevant documentation
    opened by bdlukaa 0
  • [wip] Scrollable text field

    [wip] Scrollable text field

    List which issues are fixed by this PR. You must list at least one issue.

    Fixes #4

    Pre-launch Checklist

    • [x] I have updated CHANGELOG.md with my changes
    • [x] I have addressed all analyzer warnings as best I could
    • [x] I have added/updated relevant documentation
    opened by bdlukaa 0
  • Scrollable text field

    Scrollable text field

    Is your feature request related to a problem? Please describe. Scaling the text down doesn't work properly!

    Describe the solution you'd like Scrollable text field

    Describe alternatives you've considered N/A

    Additional context N/A

    enhancement 
    opened by bdlukaa 0
  • Text is outside its background

    Text is outside its background

    Describe the bug When using Thai characters, sometimes the text appears partly outside its background. Tested both on Android and web

    Is there any workaround?

    To Reproduce Steps to reproduce the behavior:

    1. Add text RoundedBackgroundText('ที่', style: TextStyle(fontFamily: 'Sarabun', fontSize: 26), backgroundColor: Colors.amber)
    2. Add font (fonts folder is attached) pubspec..yaml: ` fonts:
      • family: Sarabun fonts:
        • asset: fonts/Sarabun-Regular.ttf`

    Expected behavior Text should appear inside its background

    Screenshots image

    Additional context Fonts folder: https://www.arnirichard.dk/fonts.zip

    Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel master, 3.1.0-0.0.pre.2268, on Microsoft Windows [Version 10.0.22000.856], locale en-GB) [√] Android toolchain - develop for Android devices (Android SDK version 33.0.0) [√] Chrome - develop for the web [√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.2.6) [√] Android Studio (version 2021.2) [√] Connected device (4 available) [√] HTTP Host Availability

    • No issues found!

    bug 
    opened by arnirichard 1
  • Placing the widget

    Placing the widget

    Describe the bug I am kind of puzzled how the new version was able to get released. I see no option to handle this widget as before. And I also seem to use a specific size as a parent, which is a kind of contra-production if the goal is to have a dynamic size text field?!

    To Reproduce Run the code below and try to center the widget. (Keeps being stuck at the top-left corner)

      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Center(
          child: RoundedBackgroundTextField(
            autofocus: true,
            keyboardType: TextInputType.multiline,
            enableInteractiveSelection: true,
            controller: controller,
          ),
        );
      }
    

    Expected behavior Being able to move and handle the widget like the normal Text() widget or any other normal widget.

    I am now using version 0.1.3 because every newer one is not functional at all. Please fix

    enhancement 
    opened by polarby 2
  • [bug] Sometimes the inner corner doesn't align with the next outer corner

    [bug] Sometimes the inner corner doesn't align with the next outer corner

    Describe the bug Sometimes the inner corner doesn't align with the next outer corner

    To Reproduce Use a textfield with two lines, one sighly smaller or bigger than the other

    Expected behavior A clear and concise description of what you expected to happen.

    Screenshots Showcase of the bug

    Additional context N/A

    bug 
    opened by bdlukaa 0
Releases(0.2.0)
  • 0.2.0(Jul 30, 2022)

    • fix: RoundedBackgroundTextField.hint is no longer hidden. (#3)
    • feat: Added RoundedBackgroundTextField.hintStyle, which is the text style applied to .hint
    • fix: Correctly apply padding to inner corners
    • fix: Correctly apply size to background painter
    • fix: Correctly inherit any DefaultTextStyle above
    • feat: Added RoundedBackgroundText.selectable, a backgrounded version of SelectableText
    Source code(tar.gz)
    Source code(zip)
  • 0.1.0(Jan 12, 2022)

    • RoundedBackgroundTextField now scales down to fit the text
    • RoundedBackgroundTextField now can't be scrollable
    • RoundedBackgroundTextField now uses EditableText instead of TextField in order to get the best positioning
    • Expose more text field properties
    • Update example app

    Full Changelog: https://github.com/bdlukaa/rounded_background_text/commits/0.1.0

    Source code(tar.gz)
    Source code(zip)
Owner
Bruno D'Luka
have fun, no one lasts forever
Bruno D'Luka
An easy way to add rounded corner floating app bar in Flutter project.

rounded_floating_app_bar Rounded floating app bar like new google applications has. This package provides an easy way to add rounded corner floating a

Bhavik Makwana 30 Nov 11, 2021
A modified version of the existing checkbox with the shape of a circle instead of a rounded rectangle!

A modified version of the existing checkbox with the shape of a circle instead of a rounded rectangle!

Mash Ibtesum 53 Oct 24, 2022
Masked text field - A flutter package for masked text field for formet your text and good UI

Masked Text Field Masked Text Field Features A package for masked text field for

Alok Dubey 7 Sep 4, 2022
Text analyzer that extracts tokens from text for use in full-text search queries and indexes.

Tokenize text, compute document readbility and compare terms in Natural Language Processing. THIS PACKAGE IS PRE-RELEASE, and SUBJECT TO DAILY BREAKIN

GM Consult Pty Ltd 5 Dec 12, 2022
A focusable and blurable TextField widget

Flutter Focus Widget 一个可以让FocusNode失去焦点的Widget A focusable and blurable widget of based on the FocusNode. 新增的参数: bool showFocusArea 使用一个半透明的红色方框显示焦点区域

yeoman 9 Jul 17, 2022
A Flutter widget to show an icon collection to pick. This widget extend TextField and has a similar behavior as TextFormField

icon_picker A Flutter widget to show an icon collection to pick. This widget extend TextField and has a similar behavior as TextFormField Usage In the

m3uzz Soluções em TI 11 Sep 27, 2022
A TextField flutter package with tagging functionality.

Flutter Tagging A flutter package with tagging or multi-select functionality. Useful for adding Tag or Label Selection Forms. List<Language> _selected

Sarbagya Dhaubanjar 149 Sep 6, 2022
Flutter-pinbox - UI for enter a PIN on flutter/dart, one digit per textField box.

flutter-pinbox This is a library for enter a PIN on flutter/dart. You can enter one digit per textField box. The detail The library locate at path lib

null 2 Feb 26, 2022
Allows tags to be entered inside textfield

textfield_tags This is a widget that allows your users to create tags by entering the tag's name inside of textfield and make the tags appear in the t

Eyoel Defare 75 Nov 2, 2022
An Instagram like text editor Flutter widget that helps you to change your text style.

TextEditor An instagram like text editor widget for flutter Show some ❤️ and star the repo to support the project Features Edit TextStyle object font

Mehdi Zarepour 68 Dec 16, 2022
Grad text package - A Flutter Widget to draw gradients into text

grad_text A Flutter Widget to draw gradients into text.(Null safe) Demo Install

Karthik Sunil K 3 Jan 31, 2022
Detectable text field - Flutter Text widgets with detection features

detectable_text_field Text widgets with detection features. You can detect hasht

null 0 Feb 2, 2022
A text field that displays text on different languages based on your selection.

translatable_text_field A text field that displays text on different languages based on your selection. Its basic idea is that you place this fields i

null 0 Mar 13, 2022
Flutter plugin for selecting images from the Android and iOS image library, taking new pictures with the camera, and edit them before using such as rotation, cropping, adding sticker/text/filters.

advance_image_picker Flutter plugin for selecting multiple images from the Android and iOS image library, taking new pictures with the camera, and edi

Weta Vietnam 91 Dec 19, 2022
A flutter app for image and text, rotate, resize and flip

image_demo A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if th

null 0 Jan 4, 2022
Be together, whenever. A simple way to text chat and plan things all in one place for flutter developers.

Flutterdevconnect Be together, whenever. A simple way to text chat and plan things all in one place for flutter developers. Android IOS Web PWA Androi

Sanskar Tiwari 69 Aug 27, 2022
A Flutter plugin than allow expand and collapse text dynamically

readmore A Flutter plugin than allow expand and collapse text. usage: add to your pubspec readmore: ^1.0.2 and import: import 'package:readmore/readm

Jonny Borges 173 Dec 28, 2022
A Fluter tabview that text color can change with animation and bg color change with animation

float_tab A Fluter tabview that text color can change with animation and bg color change with animation Getting Started This project is a starting poi

ventureli 1 Dec 8, 2021
Responsive Layouts and Text for Flutter

About flutter_responsive plugin This plugin provides a easy and productive way to work with responsive layouts for Flutter Applications in mobile, des

Rafael Setragni 11 Aug 15, 2021