Highlightable: A Text Widget That Helps Highlight any Letter/Word

Overview & Usage

First, actualText property and highlightableWord property are required. You can customize actualText by providing defaultStyle. Also you can customize highlighted text style by highlightStyle property. highlightableWord poperty should be "Text splited array". E.g - "hi".split("") it will return an array like: ["h", "i"]. Otherwise, it could be a string, the widget automatically will convert it to array.

Very basic usage

HighlightText(
  'Hello World',
  highlightableWord: 'hello',
),

s1

Custom usage

HighlightText(
   'Hello Flutter',
   highlightableWord: 'hello',
   defaultStyle: TextStyle(
      fontSize: 25,
      color: Colors.black,
   ),
   highlightStyle: TextStyle(
      fontSize: 25,
      letterSpacing: 2.5,
      color: Colors.white,
      backgroundColor: Colors.blue,
   ),
),

stwo

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add highlightable

This will add a line like this to your package's pubspec.yaml (and run an implicit dart pub get):


dependencies:
  highlightable: ^1.0.0

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:highlightable/highlightable.dart';

example/main.dart

import 'package:flutter/material.dart';
import 'package:highlightable/highlightable.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(home: Home());
}

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Highlightable Examples")),
      body: Center(
        child: Column(
          children: [
            // Very basic usage:
            HighlightText(
              'Hello World',
              highlightableWord: 'hello',
            ),

            const SizedBox(height: 50),

            // Custom Usage
            HighlightText(
              'Hello Flutter',
              highlightableWord: 'hello',
              defaultStyle: TextStyle(fontSize: 25, color: Colors.black),
              highlightStyle: TextStyle(
                fontSize: 25,
                letterSpacing: 2.5,
                color: Colors.white,
                backgroundColor: Colors.blue,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Download Details:

Author: theiskaa

Official Website: https://github.com/theiskaa/highlightable-text 


 

9.10 GEEK