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

Change color of text after reaching certain number limit? – Flutter

I need to make a textfield that only accepts up to 100 (as string) maximum, if they type 101 or more it should turn red, can you do this in flutter with or without an outside package?

I have no idea where to even start, is the first time i do something this kind.

Tags:

2

Answers


  1. 0

    You can use this custom widget, remember I set the limit to 5 for test:

    class CustomInput extends StatefulWidget {
  const CustomInput({Key? key}) : super(key: key);

  @override
  State<CustomInput> createState() => _CustomInputState();
}

class _CustomInputState extends State<CustomInput> {
  Color textColor = Colors.black;
  int limit = 5;
  @override
  Widget build(BuildContext context) {
    return TextField(
      decoration: InputDecoration(hintText: 'some text'),
      onChanged: (value) {
        if (value.length > limit && textColor == Colors.black) {
          setState(() {
            textColor = Colors.red;
          });
        } else if (value.length <= limit && textColor == Colors.red) {
          setState(() {
            textColor = Colors.black;
          });
        }
      },
      style: TextStyle(
        color: textColor,
      ),
    );
  }
}

    and use it like this:

    Scaffold(
  key: _key,
  backgroundColor: Colors.white,
  appBar: AppBar(),
  body: Column(
    children: [
      SizedBox(
        height: 10,
      ),
      CustomInput(),
    ],
  ),
)

    enter image description here

    Login or Signup to reply.
  2. 0

    To change the text color on the TextField if it exceeds 100 characters, you can do the following:

    Every TextField has a style property that accepts a TextStyle(). Simply set the color to red if the controller exceeds 100 characters.

    Here’s a complete runnable example:

    import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: CustomTextField(),
      ),
    );
  }
}

class CustomTextField extends StatefulWidget {
  const CustomTextField({Key? key}) : super(key: key);

  @override
  State<CustomTextField> createState() => _CustomTextFieldState();
}

class _CustomTextFieldState extends State<CustomTextField> {
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {

    return TextField(
      maxLength: 100,
      decoration: const InputDecoration(
        border: OutlineInputBorder(),
        labelText: 'Enter your text',
      ),
      onChanged: (text) {
        setState(() {
          // update the text color
          _controller.text = text;
        });
      },
      style: TextStyle(
        color: (_controller.text.length > 100) ? Colors.red : Colors.black,
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search