J'ai un TextField qui peut contenir une entrée multiligne, simulant à peu près un TextArea puisque flutter n'en a pas.
Le problème que je rencontre est que le texte de l'indice n'est pas centré verticalement, même s'il le prefixIcon est.
Container(
padding: EdgeInsets.only(right: displayWidth(context) * 0.05),
alignment: Alignment.centerLeft,
height: displayHeight(context) * 0.28,
width: displayWidth(context) * 0.75,
decoration: roundedShadowDecoration(context: context, color: secondaryRed(), size: 0.015),
child: TextField(
maxLines: 7,
cursorColor: Colors.white,
style: GoogleFonts.notoSans(
color: Colors.white, fontSize: displayWidth(context) * 0.04),
decoration: InputDecoration(
border: InputBorder.none,
prefixIcon: Icon(
Icons.font_download,
color: Colors.white,
size: displayWidth(context) * 0.065,
),
hintText: "A TextField Hint",
hintStyle: GoogleFonts.notoSans(
color: Colors.white54, fontSize: displayWidth(context) * 0.035),
),
),
),
Existe-t-il actuellement un moyen de centrer verticalement le texte de l'indice dans un TextField multiligne?
3 Réponses :
Vous pouvez rendre le hintText multiligne comme ..
hintText: "\n\n\nA TextField Hint\n\n\n",
Cela ne semble pas être une solution appropriée car le curseur commence toujours par le haut et non à l'endroit où le hintText est placé manuellement.
Accepter. Ce n'est peut-être pas la meilleure solution ni la solution complète. Ce n'est clairement pas un moyen idéal. Un hacky. Il devrait y avoir un moyen intrinsèque d'y parvenir avec une propriété du TextField lui-même. Mais s'il n'y en a pas pour le moment, cela centre au moins le hintText et c'est aussi ce que la question demandait.
cela fonctionne pour moi; voté
Si vous souhaitez centrer le texte de l'indice au milieu d'un TextField multiligne, le seul moyen est d'y ajouter un remplissage.
TextField(
textAlign: TextAlign.left,
decoration: InputDecoration(
hintText: "Enter Something",
contentPadding: EdgeInsets.all(150.0), // You can use EdgeInsets.only() to add padding from top and/or bottom. But it will affect your TextField
),
),
AVIS Application le remplissage de cette manière rendra votre TextField multiligne inutile. Pourquoi? Parce que le texte d'entrée commencera au milieu du TextField. Ainsi, la zone de saisie de texte sera également réduite. Et aussi créer une mauvaise expérience utilisateur (UX) pour l'utilisateur (du moins c'est mon avis).
Je ne recommande vraiment pas de centrer votre texte d'indication.
Outre l'ajout de remplissage de contenu pour placer manuellement le texte de l'indice comme @hisam l'a suggéré, vous pouvez agrandir le TextField au fur et à mesure que vous tapez, comme ceci:
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.grey,
padding: const EdgeInsets.all(8.0),
width: 200,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(Icons.font_download),
const SizedBox(width: 8.0),
Expanded(
child: TextField(
minLines: 1,
maxLines: 7,
cursorColor: Colors.white,
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(0),
isDense: true,
border: InputBorder.none,
hintText: "A TextField Hint",
),
),
),
],
),
);
}
}
Bien que cela ne réponde pas spécifiquement à la question, je vais la marquer comme la réponse car cela semble être la meilleure façon de procéder. Merci pour votre aide.
Vous pouvez utiliser la propriété
textAlignVerticalduTextField@SCcode@TimilehinJegede J'ai essayé cela, en définissant 'textAlignVertical: TextAlignVertical.center', mais cela ne fonctionne pas. Il n'y a pas de différence.
Bonjour @SCcode, vous pouvez utiliser la propriété textAlign: TextAlign.center