Stack Overflow em Português Asked by Jonas Ferreira on November 27, 2021
Quero deixar meu TextField com uma altura especifica, mas quando o usuário digita um texto maior que o campo acontece isso que está ilustrado no gif abaixo.
Não adianta diminuir o tamanho da fonte.
Aumentar o tamanho do campo resolve o problemas mas fica visualmente feio.
Como posso resolver esse problema?
Esse é o código do campo TextField
Container(
height: 45,
padding: EdgeInsets.symmetric(horizontal: 10),
child: TextField(
controller: cNome,
keyboardType: TextInputType.name,
decoration: InputDecoration(
border: OutlineInputBorder(
borderSide: BorderSide(color: MyTheme.tintColor()),
borderRadius: BorderRadius.circular(60)
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: MyTheme.tintColor()),
borderRadius: BorderRadius.circular(60)
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: MyTheme.tintColor2()),
borderRadius: BorderRadius.circular(60)
),
labelText: 'Seu Nome',
),
),
)
Você pode adicionar o atributo maxLines, ele faz com que o texto não pule para linha de baixo quando exceder o limite do TextField.
Container(
height: 45,
padding: EdgeInsets.symmetric(horizontal: 10),
child: TextField(
controller: cNome,
maxLines: 1, // ISSO FAZ COM QUE SEU TEXTO NÃO PULE PARA LINHA
keyboardType: TextInputType.name,
decoration: InputDecoration(
border: OutlineInputBorder(
borderSide: BorderSide(color: MyTheme.tintColor()),
borderRadius: BorderRadius.circular(60)
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: MyTheme.tintColor()),
borderRadius: BorderRadius.circular(60)
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: MyTheme.tintColor2()),
borderRadius: BorderRadius.circular(60)
),
labelText: 'Seu Nome',
),
),
)
Answered by Matheus on November 27, 2021
Uma saída é você tentar trabalhar com o contentPadding
.
Vou deixar um exemplo abaixo, testa ai e vê se atende ao teu caso:
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
MyWidget(height: 20),
SizedBox(height: 20),
MyWidget(height: 40),
SizedBox(height: 20),
MyWidget(height: 60),
],
),
),
),
);
}
}
class MyWidget extends StatelessWidget {
MyWidget({this.height});
final double height;
@override
Widget build(BuildContext context) {
return Container(
height: height,
child: TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(12, 0, 12, 0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(60)
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(60)
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(60)
),
labelText: height.toString(),
),
),
);
}
}
Você pode rodar esse exemplo Dartpad (Basta copiar e colar).
Answered by Matheus Ribeiro on November 27, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP