Question 75578 in Flutter Question posted in
The official Flutter documentation can be found here.

How to Achieve this type shaded text Ui in flutter?

Like This Image Example

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

Tags:

3

Answers


  1. 0 
    I hope the below code will help you :



class ShadedNumberInput extends StatefulWidget {
  @override
  _ShadedNumberInputState createState() => _ShadedNumberInputState();
}

class _ShadedNumberInputState extends State<ShadedNumberInput> {
  final _controller = TextEditingController();
  String _lastValue = '';

  void _onChanged(String value) {
    // Determine how many digits to shade based on the input value
    int numDigitsToShade = 0;
    if (value.isNotEmpty && _lastValue != value) {
      if (int.parse(value) == 28) {
        numDigitsToShade = 2;
      } else if (int.parse(value) == 5) {
        numDigitsToShade = 3;
      }
      _lastValue = value;
    }

    // Update the text controller with the shaded value
    String shadedValue = value.padLeft(value.length + numDigitsToShade, '0');
    _controller.value = TextEditingValue(
      text: shadedValue,
      selection: TextSelection.collapsed(offset: shadedValue.length),
    );
  }

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: _controller,
      keyboardType: TextInputType.number,
      onChanged: _onChanged,
    );
  }
}
    Login or Signup to reply.
  2. 0

    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:

    enter image description here

    Login or Signup to reply.
  3. 0

    This widget should do the trick, alter the TextStyle to suit your needs and you might want to update text to be an int if you’re only going to deal with numbers!

    import 'package:flutter/material.dart';

class PadString extends StatelessWidget {
  final String text;
  final int charCount;
  final String padChar;

  const PadString({
    Key? key,
    required this.text,
    this.charCount = 4,
    this.padChar = "0",
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var padCount = charCount - text.length;

    return Row(
      children: [
        for (int i = 0; i < padCount; i++)
          Text(
            padChar,
            style: const TextStyle(color: Colors.grey),
          ),
        Text(
          text,
          style: const TextStyle(color: Colors.orange),
        ),
      ],
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search