Trabalhar com formulários é uma parte crucial do desenvolvimento de aplicativos. No Flutter, existem várias maneiras de estilizar campos de formulário para melhorar a experiência do usuário e tornar seu aplicativo mais atraente. Neste capítulo, veremos como estilizar campos de formulário usando Flutter e Dart em um curso completo.
Começaremos com o básico: a criação de um campo de formulário. No Flutter, você pode criar um campo de formulário usando o widget TextFormField. Este widget permite que você crie um campo de formulário com várias opções de personalização. Por exemplo, você pode definir o texto inicial, a dica de texto, o tipo de teclado, a validação e muito mais.
Para estilizar um campo de formulário, você pode usar a propriedade 'decoration'. Esta propriedade aceita um objeto InputDecoration que permite estilizar o campo de formulário de várias maneiras. Por exemplo, você pode definir a cor de fundo, a cor da borda, a forma da borda, a cor do texto, a fonte do texto, o ícone, a dica de texto e muito mais.
TextFormField(
decoration: InputDecoration(
fillColor: Colors.blue,
filled: true,
border: OutlineInputBorder(),
labelText: 'Nome',
hintText: 'Digite seu nome',
),
)
Na amostra de código acima, o campo de formulário tem uma cor de fundo azul, uma borda externa, uma etiqueta de texto 'Nome' e uma dica de texto 'Digite seu nome'.
Além disso, você pode estilizar o texto dentro do campo de formulário usando a propriedade 'style'. Esta propriedade aceita um objeto TextStyle que permite estilizar o texto de várias maneiras. Por exemplo, você pode definir a cor do texto, a fonte do texto, o tamanho do texto, o peso do texto, a altura da linha, a decoração do texto e muito mais.
TextFormField(
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
decoration: InputDecoration(
fillColor: Colors.blue,
filled: true,
border: OutlineInputBorder(),
labelText: 'Nome',
hintText: 'Digite seu nome',
),
)
Na amostra de código acima, o texto dentro do campo de formulário tem uma cor branca, um tamanho de 20 pontos e um peso em negrito.
Adicionalmente, você pode estilizar a dica de texto usando a propriedade 'hintStyle'. Esta propriedade aceita um objeto TextStyle que permite estilizar a dica de texto de várias maneiras. Por exemplo, você pode definir a cor da dica de texto, a fonte da dica de texto, o tamanho da dica de texto, o peso da dica de texto, a altura da linha da dica de texto, a decoração da dica de texto e muito mais.
TextFormField(
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
decoration: InputDecoration(
fillColor: Colors.blue,
filled: true,
border: OutlineInputBorder(),
labelText: 'Nome',
hintText: 'Digite seu nome',
hintStyle: TextStyle(
color: Colors.white,
fontSize: 16,
fontStyle: FontStyle.italic,
),
),
)
Na amostra de código acima, a dica de texto dentro do campo de formulário tem uma cor branca, um tamanho de 16 pontos e uma fonte em itálico.
Finalmente, você pode estilizar a etiqueta de texto usando a propriedade 'labelStyle'. Esta propriedade aceita um objeto TextStyle que permite estilizar a etiqueta de texto de várias maneiras. Por exemplo, você pode definir a cor da etiqueta de texto, a fonte da etiqueta de texto, o tamanho da etiqueta de texto, o peso da etiqueta de texto, a altura da linha da etiqueta de texto, a decoração da etiqueta de texto e muito mais.
TextFormField(
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
decoration: InputDecoration(
fillColor: Colors.blue,
filled: true,
border: OutlineInputBorder(),
labelText: 'Nome',
labelStyle: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
),
hintText: 'Digite seu nome',
hintStyle: TextStyle(
color: Colors.white,
fontSize: 16,
fontStyle: FontStyle.italic,
),
),
)
Na amostra de código acima, a etiqueta de texto dentro do campo de formulário tem uma cor branca, um tamanho de 18 pontos e um peso em negrito.
Em resumo, estilizar campos de formulário no Flutter é uma tarefa fácil e flexível. Você pode estilizar quase todos os aspectos de um campo de formulário usando as propriedades 'decoration', 'style', 'hintStyle' e 'labelStyle'. Com essas propriedades, você pode criar campos de formulário atraentes e personalizados para melhorar a experiência do usuário e tornar seu aplicativo mais atraente.
