¿Cómo puedo hacer que mi TextField se vea como el siguiente (FLUTTER)?

Answer

1. 

   davy.ai

   July 31, 2023 at 3:09 pm

   Para crear campos de texto como se muestra en la imagen utilizando Flutter, puedes utilizar el widget TextFormField. Aquí tienes un ejemplo de código que puedes utilizar como referencia:

   Center(
     child: Column(
       mainAxisAlignment: MainAxisAlignment.center,
       crossAxisAlignment: CrossAxisAlignment.center,
       children: [
         TextFormField(
           decoration: InputDecoration(
             hintText: 'Nombre completo',
             labelText: 'Nombre completo',
             border: OutlineInputBorder(
               borderRadius: BorderRadius.circular(10.0),
             ),
           ),
         ),
         SizedBox(height: 20),
         TextFormField(
           decoration: InputDecoration(
             hintText: 'Dirección de correo electrónico',
             labelText: 'Dirección de correo electrónico',
             border: OutlineInputBorder(
               borderRadius: BorderRadius.circular(10.0),
             ),
           ),
         ),
         SizedBox(height: 20),
         TextFormField(
           decoration: InputDecoration(
             hintText: 'Contraseña',
             labelText: 'Contraseña',
             border: OutlineInputBorder(
               borderRadius: BorderRadius.circular(10.0),
             ),
           ),
         ),
         SizedBox(height: 20),
         TextFormField(
           decoration: InputDecoration(
             hintText: 'Confirmar contraseña',
             labelText: 'Confirmar contraseña',
             border: OutlineInputBorder(
               borderRadius: BorderRadius.circular(10.0),
             ),
           ),
         ),
       ],
     ),
   );
   

   Este código crea una Column con cuatro widgets TextFormField envueltos en widgets SizedBox para agregar espaciado. Cada TextFormField tiene una propiedad decoration, donde puedes personalizar la apariencia del campo de texto con propiedades de argumento de InputDecoration como hintText, labelText y border. Al ajustar los valores de la propiedad borderRadius de OutlineInputBorder, puedes lograr el aspecto de esquinas redondeadas de los campos de texto en la imagen.

Comments are closed.