flutteruser-interfacedartflutter-layoutflutter-design

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


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

enter image description here


Solution

  • Final Output:

    enter image description here

    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