Decorate TextField in Flutter 3 , InputTextField Decoration in Flutter 3

Decorate TextField in Flutter 3 , InputTextField Decoration in Flutter 3

14-Sep-2024
| |
Image Carousel

Hello developers in this tutorial we will discuss about how to make textFormField decorate in flutter

Table of Contents

S.no Contents-topics
1 What is Textfield or textformfield
2 Decorate with Icons
3 Decorate with Hint text
4 Decorate with Borders

1:What is TextField or TextFormField

Working of Flutter forms or on any screen where user enters his input is used as TextField or TextFormField , in both widgets we are getting input from the user.
So in thses widgets we have an option of decoration as 
Widget? icon,
Color? iconColor,
Widget? label,
String? labelText,
TextStyle? labelStyle,
TextStyle? floatingLabelStyle,
String? helperText,
TextStyle? helperStyle,
int? helperMaxLines,
String? hintText,
TextStyle? hintStyle,
TextDirection? hintTextDirection,
int? hintMaxLines,
String? errorText,
TextStyle? errorStyle,
int? errorMaxLines,
FloatingLabelBehavior? floatingLabelBehavior,
FloatingLabelAlignment? floatingLabelAlignment,
bool isCollapsed = false,
bool? isDense,
EdgeInsetsGeometry? contentPadding,
Widget? prefixIcon,
BoxConstraints? prefixIconConstraints,

in this tutorial we will see some basics TextFields decoration

2:Decorate with icons

Working with icons we options to set icons as prefixIcon and suffixicon
Copy for prefixicon and suffixicon
Copy

TextFormField(
        decoration: const InputDecoration(
          prefixIcon: Icon(Icons.lock),
          suffixIcon: Icon(Icons.remove_red_eye),
         ),
      )

 

3:Decorate with Hint text

Also read: BOX DECORATION IN FLUTTER 3 , DECORATE CONTAINER IN FLUTTER 3

hint text decoration code: Copy

 TextFormField(
        decoration: const InputDecoration(
          prefixIcon: Icon(Icons.lock),
          suffixIcon: Icon(Icons.remove_red_eye),
          hintText: 'Enter Password',
          hintStyle: TextStyle(color: Colors.purple),
        ),
      )

4:Decorate with Border

InputBorder.none
inputBorder code: Copy

TextFormField(
        decoration: const InputDecoration(
          prefixIcon: Icon(Icons.lock),
          suffixIcon: Icon(Icons.remove_red_eye),
          hintText: 'Enter Password',
          hintStyle: TextStyle(color: Colors.purple),
          border: InputBorder.none,
        ),
      )

Also read: WHAT IS FLUTTER & DART , WHY TO CHOOSE FLUTTER , FLUTTER FEATURES

UnderlineInputBorder()
UnderlineInputBorder code: Copy

TextFormField(
        decoration: const InputDecoration(
          prefixIcon: Icon(Icons.lock),
          suffixIcon: Icon(Icons.remove_red_eye),
          hintText: 'Enter Password',
          hintStyle: TextStyle(color: Colors.purple),
          border: UnderlineInputBorder()
        ),
      )

OutlineInputBorder()
OutlineInputBorder code: Copy

TextFormField(
          decoration: InputDecoration(
        prefixIcon: Icon(Icons.lock),
        suffixIcon: Icon(Icons.remove_red_eye),
        hintText: 'Enter Password',
        hintStyle: TextStyle(color: Colors.purple),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(30),
        ),
      ))

Specifying border type focussedBorder , enabledBorder, disabledBorder , errorBorder and focussedErrorBorder 
 code: Copy

TextFormField(
          decoration: InputDecoration(
        prefixIcon: Icon(Icons.lock),
        suffixIcon: Icon(Icons.remove_red_eye),
        hintText: 'Enter Password',
        hintStyle: const TextStyle(color: Colors.purple),
        enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(5),
          borderSide: const BorderSide(
            color: Colors.green,
            width: 1.0,
          ),
        ),
        focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(30),
          borderSide: const BorderSide(
            color: Colors.purple,
            width: 2.0,
          ),
        ),
      ))

 

Tags: decorate TextField in flutter 3 , InputTextField decoration in flutter 3 , how to add prefix and suffix icons in textformfield , decorate border in textfiled in flutter 3,flutter, mobile app development, dart, UI, widgets, framework, cross-platform, iOS, Android, web, desktop, Fuchsia, Material Design, Cupertino, animation, state management, reactive programming, asynchronous programming.,
0 Comments (Please let us know your query)
Leave Comment
Leave Comment
Articles from other Categories
Load More

Newsletter