Início / coding / Perguntas / 79451838
Accepted
Danny Ellis Jr.
Asked: 2025-02-19 23:03:16 +0800 CST

Flutter TextField O texto aparece fora das bordas. Borda inferior ou TextField alinha com o centro da linha

  • 772

Vê a borda cinza do campo de texto e onde o zero aparece?

Estou lutando com isso há meses. Tenho um TextField que aparece como o primeiro filho de uma Row no meu aplicativo Android. O texto do TextField aparece fora das bordas. Além disso, a borda inferior do TextField parece estar centralizada na minha linha, e não importa como eu altero os alinhamentos do eixo principal ou cruzado da linha.

Quero que o centro do TextField se alinhe com o centro da linha, e que o texto apareça no centro das bordas. O que estou fazendo errado?

 child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          SizedBox(
            width: 50,
            height: 40,
            child: TextField(
              controller: myController,
              keyboardType: TextInputType.number,
              maxLength: 2,
              textAlign: TextAlign.center,
              textAlignVertical: TextAlignVertical.bottom,
              style: TextStyles.mediumWhiteText,
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
              ),
              inputFormatters: <TextInputFormatter>[
                FilteringTextInputFormatter.digitsOnly
              ], // Only numbers can be enter
flutter

1 respostas

  1. Best Answer

    Se você ainda quiser usar o maxLengthatributo, você pode usar este código e modificá-lo conforme necessário. Outra maneira, você pode separar o contador para o novo widget.

    Para centralizar o texto abaixo do TextField, você precisa modificar o buildCounter.

    buildCounter: (
  context, {
  required currentLength,
  required isFocused,
  required maxLength,
}) {
  return SizedBox(
    width: double.infinity,
    child: Text(
      '$currentLength/$maxLength',
      textAlign: TextAlign.center,
      style: TextStyle(fontSize: 12.0),
    ),
  );
},

    Código completo

    import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Row(
            spacing: 16.0,
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              SizedBox(
                width: 50.0,
                child: TextField(
                  keyboardType: TextInputType.number,
                  maxLength: 2,
                  textAlign: TextAlign.center,
                  textAlignVertical: TextAlignVertical.center,
                  decoration: const InputDecoration(
                    isDense: true,
                    border: OutlineInputBorder(),
                  ),
                  inputFormatters: <TextInputFormatter>[
                    FilteringTextInputFormatter.digitsOnly
                  ],
                  style: TextStyle(fontSize: 16.0),
                  cursorHeight: 16.0,
                  buildCounter: (
                    context, {
                    required currentLength,
                    required isFocused,
                    required maxLength,
                  }) {
                    return SizedBox(
                      width: double.infinity,
                      child: Text(
                        '$currentLength/$maxLength',
                        textAlign: TextAlign.center,
                        style: TextStyle(fontSize: 12.0),
                      ),
                    );
                  },
                ),
              ),
              IconButton.filled(
                icon: Icon(Icons.remove, size: 16.0),
                onPressed: () {},
              ),
              IconButton.filled(
                icon: Icon(Icons.add, size: 16.0),
                onPressed: () {},
              ),
            ],
          ),
        ),
      ),
    );
  }
}

    Resultado

    • 1

relate perguntas