Flutter: Position Counter for TextFormField

Question

I'm currently trying to move the TextFormField counter to the top (above the actual input box), and I'm unsure on how to do so.

Currently:

So the counter should be moved up to the top right corner above the input box field. I tried to think about building a new counter but there must be an easier way to do this? I also tried experimenting with InputDecoration but nothing seems to really work.

TextFormField(
      maxLength: 1000,
      decoration: InputDecoration(
        labelText: label,
        labelStyle: TextStyle(fontSize: 30,
      ),
    )

Would appreciate some help, thanks in andvance!

Answer 1

A shortcut way is using buildCounter with transform. But this will contain some extra spaces, and I think it's kinda ok.

 TextFormField(
              maxLength: 1000,
              buildCounter: (context,
                  {required currentLength, required isFocused, maxLength}) {
                return Container(
                  transform: Matrix4.translationValues(0, -kToolbarHeight, 0),
                  child: Text("$currentLength/$maxLength"),
                );
              },
            ),

Another way TextEditingController and Column

  final TextEditingController controller = TextEditingController();
  final maxLength = 1000;

  @override
  void initState() {
    controller.addListener(() {
      setState(() {});
    });
    super.initState();
  }

 Column(
              children: [
                Align(
                  alignment: Alignment.centerRight,
                  child: Text("${controller.text.length}/$maxLength"),
                ),
                TextFormField(
                  key: ValueKey("textFiled in Column"),
                  controller: controller,
                  buildCounter: (context,
                          {required currentLength,
                          required isFocused,
                          maxLength}) =>
                      SizedBox(),
                ),
              ],
            ),

Result