CODEWITHSUNDEEP
flutterdart
Kel
Kel

Reputation: 463

How to create extension method to color, bold, remove content on String

I have a JSON like this:

[
  {
    "country": "UNITED STATED",
    "gini": 39,
    "note": "a country mostly located in central North America, between CANADA and MEXICO, It consists of 50 states. At 3.8 million square miles (9.8 million km2)"
  },
  {
    "country": "GERMANY",
    "gini": 33.1,
    "note": "Covering an area of 357,022 square kilometres (137,847 sq mi), it borders DENMARK to the north, POLAND to the east. "
  }
]

I want to create the following 2 extension method:

  1. For "Gini" data: remove ".0" (Ex: "39.0" => "39")

  2. For "Note" data:

    • bold and color exact text "CANADA"; "MEXICO"; "DENMARK"; "POLAND"
    • color all number
    • color "." and "," if it is between numbers

enter image description here

So pls help me, this is the main file

import 'package:ask/services/us_services.dart';
import 'package:flutter/material.dart';
import 'model/us_model.dart';

class Demo2 extends StatefulWidget {
  Demo2() : super();

  @override
  _ContinentPageState createState() => _ContinentPageState();
}

class _ContinentPageState extends State<Demo2> {
  List<Zone> _zone = [];

  void initState() {
    super.initState();
    ContinentServices2.getContinent().then((zones) {
      setState(() {
        _zone = zones;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('')),
        body: Column(crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[
          for (Zone zone in _zone)
            Padding(
                padding: const EdgeInsets.all(8.0),
                child: Table(columnWidths: {
                  0: FlexColumnWidth(0.2)
                },
                  children: [
                    TableRow(children: [TableCell(child: Text('Country ')), TableCell(child: Text(zone.country))]),
                    TableRow(children: [TableCell(child: Text('Gini')), TableCell(child: Text('${zone.gini}'))]),
                    TableRow(children: [TableCell(child: Text('Note')), TableCell(child: Text(zone.note))]),
                  ],
                ))
        ]));
  }
}

extension BoldColored on String {
  String get boldColored {}
}

extension Numbers on String {
  String get numbers {}
}

Upvotes: 0

Views: 1003

Answers (2)

Birju Vachhani
Birju Vachhani

Reputation: 6353

1.

Here's an extension which you can use. It will only trim zeros after the decimal point.

extension DoubleExtension on double {
  String get asReadableString =>
      this % toInt() == 0 ? toInt().toString() : toString();
}

Usage:

final value = 20.0;
print(value.asReadableString); // prints 20
final value2 = 20.5;
print(value2.asReadableString); // prints 20.5

2.

Here's a utility class that you can use to format the text.

class RichTextFormatter {
  final Map<RegExp, TextStyle> patternMap;
  final TextStyle normalStyle;

  RichTextFormatter({
    @required this.patternMap,
    @required this.normalStyle,
  });

  TextSpan buildFormattedTextSpan(String text) {
    final children = <TextSpan>[];
    RegExp allRegex;
    allRegex = RegExp(patternMap.keys.map((e) => e.pattern).join('|'));
    text.splitMapJoin(
      allRegex,
      onMatch: (match) {
        final key = patternMap.entries
            .singleWhere(
                (element) => element.key.allMatches(match[0]).isNotEmpty)
            .key;
        children.add(TextSpan(text: match[0], style: patternMap[key]));
      },
      onNonMatch: (span) {
        children.add(TextSpan(text: span, style: normalStyle));
      },
    );
    return TextSpan(style: normalStyle, children: children);
  }
}

USAGE:

final formatter = RichTextFormatter(
  normalStyle: TextStyle(color: Colors.black),
  patternMap: {
    RegExp(r'CANADA|MEXICO|DENMARK|POLAND'):
        TextStyle(color: Colors.red, fontWeight: FontWeight.bold),
    RegExp(r'\d+(.\d+)?'):
        TextStyle(color: Colors.orange),
  },
);
final textSpan = formatter.buildFormattedTextSpan(text);

UI:

Text.rich(textSpan)

Upvotes: 3

Darish
Darish

Reputation: 11481

OK, Here you go.

1. How to convert floating number to integer?

double d = 20.5;
int i = d.toInt(); // i = 20

2. How to colour and format some words in a text content?

You can use RichText class for this purpose.

    RichText(
  text: TextSpan(
    text: 'Hello ',
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' world!'),
    ],
  ),
)

Hope this help to solve your problem. Have a nice day :)

Upvotes: 0

Related Questions