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

Change the text color of a textfield if range exceeds certain number – Flutter

i want to dynamically change the color of my text depending if it exceeds a certain range of numbers (between 0 and 360). i will share my code that is currently working but not changing colors.

class _DurationContainers extends StatelessWidget {
  const _DurationContainers({
    Key? key,
    required this.controller, required this.hint, required this.digits,
  }) : super(key: key);

  final String hint;
  final TextEditingController controller;
  final int digits;


  @override
  Widget build(BuildContext context) {
    return Neumorphic(
      style: marketplaceButtonsNeuStyle.copyWith(
           boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(15))
        ),
      child: Container(
        width: ScreenUtils.percentWidth(context, 3.2),
        child: TextFormField(
          
          controller: controller,
          keyboardType: TextInputType.number,
          textInputAction: TextInputAction.next,
          onSaved: (precio) {},
          textAlign: TextAlign.center,
          cursorColor: Color.fromARGB(148, 66, 63, 63) ,
          style: Theme.of(context).textTheme.headline1!.copyWith(fontSize: 20),
          inputFormatters: [
          LengthLimitingTextInputFormatter(digits),
          FilteringTextInputFormatter.digitsOnly,
         
          ],
          decoration: InputDecoration(
            border: InputBorder.none,
            hintStyle: Theme.of(context).textTheme.headline1!.copyWith(fontSize: 21),
            contentPadding: EdgeInsets.symmetric(horizontal: ScreenUtils.percentHeight(context, .5)),
            hintText: hint
          ),
        ),
      ),
    );
  }
}

I have tried parsing the data from my textfield to an int and setting a limit but i think im not doing it correctly since its giving me errors.

This is what im currently trying to do.

Text is normal since is between the range of 0 and 360

Text should turn red once exceeding the max range of 360 turning red

Tags:

2

Answers


  1. 0

    enter image description here

    Can set a condition for the colour in style.

    enter image description here

    To avoid an error you can set the value of the variable and update it.

    Login or Signup to reply.
  2. 0

    You can use StatefulWidget and onChanged callback from TextFormField.

    class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final controller = TextEditingController();
  bool isValid = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: SizedBox(
            width: 100,
            child: TextFormField(
              onChanged: (value) {
                isValid = int.parse(value) < 360;
                setState(() {});
              },
              maxLength: 3,
              controller: controller,
              keyboardType:
                  const TextInputType.numberWithOptions(decimal: true),
              style: TextStyle(color: isValid ? null : Colors.red),
            )),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search