如何实现这种类型的阴影文本Ui在Flutter?

lkaoscv7  于 2023-03-24  发布在  Flutter
关注(0)|答案(3)|浏览(104)

我们如何做这种类型,如果数字是28之前的2位数字00将被阴影,如果它是5之前的3位数字将被阴影在 Flutter

cs7cruho

cs7cruho1#

您可以将它们拆分为两个Text小部件。例如:

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

输出:

myzjeezk

myzjeezk2#

这个小部件应该可以做到这一点,改变TextStyle以满足您的需要,如果您只处理数字,您可能希望将文本更新为int!

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),
        ),
      ],
    );
  }
}
rkkpypqq

rkkpypqq3#

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,
    );
  }
}

相关问题