How to Achieve this type shaded text Ui in flutter?

Question

How we can do this type if the number was 28 the before 2 digit 00 will be shaded if it was 5 before 3 digits will be shaded in flutter

Answer 1

You can split them into two Text widgets. For example like this:

import 'package:flutter/material.dart';

final data = ['0028', '1234', '0002', '0005', '1010', '0101', '0000'];

void main() {
  runApp(const MaterialApp(home: MyApp()));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ListView.builder(
          itemCount: data.length,
          itemBuilder: (context, index) {
            var splitIndex = data[index].indexOf(RegExp('[^0]'));
            if (splitIndex == -1) splitIndex = data[index].length;
            return Row(children: [
              Text(data[index].substring(0, splitIndex),
                  style: const TextStyle(color: Colors.red)),
              Text(data[index].substring(splitIndex, data[index].length)),
            ]);
          },
        ),
      ),
    );
  }
}

Output: