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.
HighlightText(
'Hello World',
highlightableWord: 'hello',
),
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,
),
),
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.
Now in your Dart code, you can use:
import 'package:highlightable/highlightable.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,
),
),
],
),
),
);
}
}
Author: theiskaa
Official Website: https://github.com/theiskaa/highlightable-text