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.

CodePudding user response：

Can set a condition for the colour in style.

CodePudding user response：

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