CODEWITHSUNDEEP
flutterstate
Necrofantaisie
Necrofantaisie

Reputation: 384

how do i create character counter from contents of a TextField widget

Hello I'm new to flutter, I'm trying make a character counter below a textField widget. Here's my current code

TextField(
  maxLines: 3,
  controller: _cancellationReasonCtrl,
  decoration: InputDecoration(
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(
        color:primaryColor
      )
    ),
    labelText: "type minimum 30 characters"
  ),
)

and here's how i displayed the number

Text((30 - _cancellationReasonCtrl.text.length).toString()+" character left")

but it doesn't update the number when i change the content of text field

Upvotes: 0

Views: 2543

Answers (2)

user9683896
user9683896

Reputation:

Use inputFormatters property

example:

TextFormField(
      inputFormatters: [
        LengthLimitingTextInputFormatter(10),
      ]
    )

namespace

import 'package:flutter/services.dart';

or just used minLength: 10, property

Upvotes: -2

Madhup Singh Yadav
Madhup Singh Yadav

Reputation: 8124

Flutter will update the UI only when you will change the variable and call setState.

So you should do something like:

setState( () {
   Text((30 - _cancellationReasonCtrl.text.length).toString()+" character left")
}):

Read more about states at : https://api.flutter.dev/flutter/widgets/State/State.html

Upvotes: 0

Related Questions