I'm trying to highlight any numbers & special characters like '%' from a String that comes dynamically from JSON. This is my current implementation but I can't understand how to change it dynamically.
RichText(
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
maxLines: 4,
text: TextSpan(
children: <TextSpan>[
TextSpan(
text: 'Hey I\'m',
style: TextStyle(
color: kDarkBlue, fontSize: 21)),
TextSpan(
text: '1234 ',
style: TextStyle(
fontWeight: FontWeight.w800,
fontSize: 24)),
TextSpan(
text: 'and',
style: TextStyle(fontSize: 21)),
TextSpan(
text: '%',
style: TextStyle(
fontWeight: FontWeight.w800,
fontSize: 24)),
],
),
),
Final Output:
You can try this:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String str = "Hey I'm 1234 and %";
int findLen(String word) {
return word.replaceAll(new RegExp(r'[a-zA-Z]'), "").length;
}
var styleOne = TextStyle(color: Colors.black87, fontSize: 21);
var styleTwo = TextStyle(
color: Colors.black87, fontWeight: FontWeight.w800, fontSize: 24);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: RichText(
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
maxLines: 4,
text: TextSpan(
children: str
.split(" ")
.map((word) => TextSpan(
text: word + " ",
style: findLen(word) != word.length ? styleOne : styleTwo))
.toList(),
),
),
);
}
}
Working Demo: Codepen