How to highlight only numbers and special characters inside Text in Flutter?

Question

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)),
                                    ],
                                  ),
                                ),

Have you tried using Regex for this case? – Tomas Dec 25 '20 at 19:15 — Tomas, Dec 25 '20 at 19:15

Ketan Ramteke · Accepted Answer · 2020-12-25T20:10:33.370

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

could you please show how to edit this to highlight the two letters Rs along with numbers and special characters? — Arnav, Dec 26 '20 at 08:42
Please post the question, will look into it. It won't be that difficult, a bit of regex magic will do the trick. — Ketan Ramteke, Dec 26 '20 at 08:48
Hi, I opened a question can you please give it a look, thanks! https://stackoverflow.com/questions/65454893/how-to-highlight-text-of-specific-letters-in-flutter — Arnav, Dec 26 '20 at 09:03

score 2 · Answer 2 · edited Jun 07 '22 at 15:03

Convert the string into a list using the .split() method.

Assign

              list.map((item) => TextSpan( text: item, 
               style: TextStyle(
                       fontWeight: isNumeric(item)? 
                              FontWeight.w800 : FontWeight.w800 ,
                        fontSize: 24))).toList()

to children property.

You can also refer to this answer https://stackoverflow.com/a/55358328/10285344

This solution will only highlight numbers, you can create a custom function that returns true if the list item that is, a character is either a number or a special character(by using Regex).

How to highlight only numbers and special characters inside Text in Flutter?

2 Answers2

Linked