Customizing TextField from design shots on Dribble

This article is to try customizing the TextField from design shots on Dribble by what have learned from this article “Customizing Flutter TextField”

The customizing text field will focus on using the hint, label, border, and icon properties in InputDecoration. The color, an icon will be different.

Search for mobile login in Dribble and found these shots:

1. A Dribble shot Login and Sign up Screens by Ashwith | Link

Image from Login and Sign up Screens by Ashwith

This TextField needs to custom underline border color and add an icon (use iconnot prefixIcon because it displays before editable area). And add a suffix icon for the password field.

child: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children:  const [            
    TextField(                
      decoration: InputDecoration(                       
        hintText: 'Email ID',
        hintStyle: TextStyle(
          color: Color(0xff7A869A),
          fontWeight: FontWeight.w300,
        ),
        icon: Icon(Icons.alternate_email, color: Color(0xff7A869A)),  
        enabledBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: Color(0xffDFE1E5)),                                 
        ),
      ),              
    ),     
    SizedBox(height: 16),
    TextField(                
      decoration: InputDecoration(                       
        hintText: 'Password',
        hintStyle: TextStyle(
          color: Color(0xff7A869A),
          fontWeight: FontWeight.w300,
        ),                
        icon: Icon(Icons.lock_outline, color: Color(0xff7A869A)), 
        suffixIcon: Icon(Icons.wifi_tethering_off),
        enabledBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: Color(0xffDFE1E5)),                                 
        ),                
      ),              
    ),             
  ],
),

2. A Dribble shot Mobile Responsive: Blue.Ceo by Erkan Tecim | Link

Image from Mobile Responsive: Blue.Ceo by Erkan Tecim

This TextField needs to custom outline border and color also add prefix icon

child: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [        
    const Text('Username'),
    const SizedBox(height: 8),
    TextField(                
      decoration: InputDecoration(      
        contentPadding: const EdgeInsets.symmetric(vertical: 20),               
        hintText: 'Username',
        hintStyle: const TextStyle(
          color: Color(0xff8F9BB7),
          fontWeight: FontWeight.w300,
        ),
        prefixIcon: const Padding(
          padding: EdgeInsets.only(left: 16, right: 12),
          child: Icon(Icons.hvac, color: Color(0xff8F9BB7)),  
        ),
        border: OutlineInputBorder(
          borderSide: const BorderSide(color: Color(0xffE8ECF4)),  
          borderRadius: BorderRadius.circular(6),
        ),                 
        enabledBorder: OutlineInputBorder(
          borderSide: const BorderSide(color: Color(0xffE8ECF4)), 
          borderRadius: BorderRadius.circular(6),
        ),        
      ),              
    ),     
    const SizedBox(height: 20),
    const Text('Email'),
    const SizedBox(height: 8),            
    TextField(                              
      decoration: InputDecoration(
        contentPadding: const EdgeInsets.symmetric(vertical: 20),                
        hintText: 'mail@business.com',
        hintStyle: const TextStyle(
          color: Color(0xff8F9BB7),
          fontWeight: FontWeight.w300,
        ),                            
        prefixIcon: const Padding(
          padding: EdgeInsets.only(left: 16, right: 12),
          child: Icon(Icons.email, color: Color(0xff8F9BB7)),                  
        ),                              
        border: OutlineInputBorder(
          borderSide: const BorderSide(color: Color(0xffE8ECF4)),  
          borderRadius: BorderRadius.circular(6),
        ), 
        enabledBorder: OutlineInputBorder(
          borderSide: const BorderSide(color: Color(0xffE8ECF4)),   
          borderRadius: BorderRadius.circular(6),
        ),           
      ),              
    ),             
  ],
),

3. Dribbel shot Password Saver App by Sulton handaya | Link

Image from Password Saver App by Sulton handaya

This TextField needs to customize the background color and the border color of the outline border. For background color changing on focus, It can't be set by the property, follow this sample

child: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [        
    const Text(
      'Situs Website', 
      style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12),
    ),
    const SizedBox(height: 12),
    TextField(         
      contentPadding: const EdgeInsets.symmetric(vertical: 20),
      cursorColor: const Color(0xff03A69A),
      decoration: InputDecoration(                     
        hintText: 'https://www.spotify.com',
        hintStyle: const TextStyle(   
          color: Color(0xff707277),
          fontWeight: FontWeight.w300,
        ),
        prefixIcon: const Padding(
          padding: EdgeInsets.only(left: 16, right: 16),
          child: Icon(Icons.language, color: Color(0xff707277)),  
        ),
        filled: true,
        fillColor: const Color(0xffF8F7FB),
        border: OutlineInputBorder(
          borderSide: BorderSide.none,  
          borderRadius: BorderRadius.circular(8),
        ),                 
        focusedBorder: OutlineInputBorder(
          borderSide: const BorderSide(
            color: Color(0xff03A69A), 
            width: 2
          ),   
          borderRadius: BorderRadius.circular(8),
        ),                                      
      ),              
    ),     
    const SizedBox(height: 32),
    const Text(
      'Email / Phone Number', 
      style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12),
    ),
    const SizedBox(height: 12),            
    TextField(
      contentPadding: const EdgeInsets.symmetric(vertical: 20),
      cursorColor: const Color(0xff03A69A),
      decoration: InputDecoration(                
        hintText: 'mail@business.com',
        hintStyle: const TextStyle(
          color: Color(0xff707277),
          fontWeight: FontWeight.w300,
        ),                            
        prefixIcon: const Padding(
          padding: EdgeInsets.only(left: 16, right: 16),
          child: Icon(
            Icons.phone_android, 
            color: Color(0xff707277)
          ),                  
        ),  
        filled: true,
        fillColor: const Color(0xffF8F7FB),                
        border: OutlineInputBorder(
          borderSide: BorderSide.none,  
          borderRadius: BorderRadius.circular(8),
        ), 
        focusedBorder: OutlineInputBorder(
          borderSide: const BorderSide(
            color: Color(0xff03A69A), 
            width: 2
          ),   
          borderRadius: BorderRadius.circular(8),
        ),
      ),              
    ),             
  ],
),