Skip to content
  • About Us
  • Contact Us
  • Disclaimer
  • Privacy Policy
flutter app development

Let Me Flutter

Flutter apps development site

  • Home
  • Flutter App Development
    • Flutter Solutions
      • Tech
      • Setup
        • How to make your first app with flutter?
      • How To Get Flutter Android App Using Flutter Build Apk
    • Dart Fundamentals
      • Flutter Loops
        • How To Easily Use For Loop In Flutter Widgets
        • How To Easily Use ForEach Loop In Flutter
        • How To Easily Use While Loop In Flutter
        • How To Easily Use Flutter For In Loop
        • How To Easily Use Flutter For Loop Index
      • Flutter Lists
        • How To Easily Use List In Flutter Dart
        • [Top 4 Ways] How To Properly Combine Lists In Dart
        • How To Reverse List In Flutter – Easy Flutter Code Example
        • How To Convert List To Set In Flutter – Easy Flutter Code Examples
        • How To Shuffle List In Flutter – Easy Flutter Code Examples
      • Flutter If Else Condition
        • How To Use If Else In Flutter – Easy Flutter Guide
      • Flutter Switch Case
        • How To Easily Use Flutter Switch Statement
      • Flutter Functions
        • How To Easily Use Flutter Function
      • Flutter Maps
        • How To Easily Create And Use Flutter Map List
        • How To Easily Create And Use Flutter Map – Easy Flutter Guide
      • Flutter Variables
        • How To Easily Convert Dart Double to Int (4 Easy Ways)
        • How To Easily Convert Dart Int To String
        • How To Easily Convert Double To String Flutter
        • How To Easily Convert Flutter String To Double
        • How To Easily Convert Flutter String To Int – Easy Flutter Guide
        • How To Perform Flutter String Concatenation [Top 4 Ways]
    • Flutter Web Templates
      • Flutter Web Template – Flutter Web Drawer Widget Example
    • Mobile Templates
      • Instagram UI Template
        • Instagram News Feed UI In Flutter-Beautiful Flutter Design-Flutter Instagram Template Part 1
      • Flutter Forms
        • Signup Flutter Form UI Design-Beautiful Flutter UI Template
        • Flutter Glassmorphism Login UI Template With Source Code
        • Signup Flutter Form UI Design 2022-Beautiful Flutter UI Template
        • Beautiful Flutter Login Template – Flutter templates 2022
        • Gradient Flutter Login UI Form Template With Source Code – Flutter Templates 2022
        • Beautiful Flutter Login UI Form Template
        • Beautiful Flutter Login Page UI Design – Example Code
        • How To Design Beautiful Flutter Login Screen UI
        • How To Design Beautiful Flutter Login Form Template – Easy Flutter Code
        • How To Create Beautiful Flutter Login Form Design UI Template
    • Widgets
      • Menus
        • Flutter Popup Menu Button Detailed Customization With Example-2022 Flutter Guide
      • Sliders
        • Flutter Carousel Slider
          • How To Easily Set Flutter Carousel Slider Full Width
          • How To Easily Use Flutter Carousel Slider OnPageChanged
          • How To Easily Customize Flutter Carousel Slider AutoPlay
        • Flutter Carousel Slider Beautiful Customization With Example
        • Flutter Range Slider Beautiful Customization With Example | Syncfusion
      • Stack
        • Flutter App Stack Widget Detailed Explanation With Example
      • Buttons
        • Flutter Icon Button Example – Detailed Customization – Step By Step
        • Flutter Raised Button Example – Detailed Raised Button Decoration
        • Flutter Elevated Button
          • How To Easily Change Flutter Elevated Button Color
          • How To Change Flutter Elevated Button Border Radius
          • How To Easily Customize Flutter Elevated Button Width
          • How To Easily Customize Flutter Elevated Button Height – Top 2 Methods
          • How To Easily Use Flutter Elevated Button OnPressed
        • Flutter Floating Action Button
          • How To Easily Customize Flutter FloatingActionButton Widget
      • Icons
        • How To Use Icons In Flutter? Font Awesome Icons In Flutter
        • How To Easily Change Flutter Icon Size – Flutter Example Code
      • Flutter Card Widget
        • All You Need To Know About Flutter Card Widget – Explained With Example
        • How To Easily Customize Flutter Card Border Radius
        • How To Easily Customize Flutter Card Border Radius
        • How To Change Flutter Card Color – Easy Flutter Guide
        • How To Change Flutter Card Elevation – Easy Flutter Guide
        • How To Change Flutter Card Shadow Color – Easy Flutter Guide
        • How To Easily Customize Flutter Card Height – Top 2 Methods
      • Flutter Drawer Widget
        • Beautiful Flutter Drawer Widget Customization-Explained With Example
        • How To Change Flutter Drawer Icon Color – Easy Flutter Guide
        • How To Change Flutter Drawer Width – Easy Flutter Code Example
        • How To Easily Change Flutter Drawer Background Color
        • How To Change Flutter Drawer Header Height – Easy Flutter Code Example
      • Appbars
        • How To Design Beautiful AppBar in Flutter
        • Let’s Customize AppBar In Flutter
        • Flutter SliverAppBar Customization [Easy Guide]
        • Flutter Appbar Actions Customization [Detailed Guide]
        • How To Change Flutter Appbar Color In Flutter App-2022 Guide
        • How To Customize Flutter Appbar Leading- 2022 Guide
        • How To Make Flutter Appbar Title Center-2022 Guide
        • How To Implement Flutter Appbar Transparent
        • How To Change Flutter Appbar Height
        • How To Remove Flutter Appbar Elevation
        • How To Change Flutter Appbar Shadow Color
        • How To Easily Change Flutter Appbar Background Color
        • How To Easily Customize Flutter Appbar Back Button
        • How To Easily Set Flutter Appbar Center Text
        • How to Easily Change Flutter Appbar Default Height
        • How To Easily Change Flutter Appbar Icon Color Theme
      • Flutter Textfield
        • Change Flutter Textfield Cursor Color Explained With Example-Best Flutter Guide
        • Flutter Textformfield Default Value Explained With Example
        • Flutter Textfield Onchanged Explained With Example-Best Flutter Guide
        • Flutter Textfield Remove Underline Explained With Example
        • How To Change Flutter Textfield Underline Color
        • How To Implement Flutter Textfield Disable?
        • How To Change Flutter Textfield Height?
        • How To Customize Flutter Textfield Label?
        • How To Customize Flutter Textfield Hint Text?
        • How To Change Flutter Textfield Hint Text Color?
        • How To Customize Flutter Textfield Initial Value?
      • Flutter Textformfield
        • How To Change Flutter Textformfield Background Color
        • How To Set Flutter Textformfield Default Value?
        • How To Change Flutter Textformfield Color?
        • How To Customize Flutter Textformfield KeyboardType?
        • How To Change Flutter Textformfield Border Color?
        • How To Implement Flutter Textformfield Remove Underline?
        • How To Change Flutter Textformfield Underline Color?
        • How To Change Flutter Textformfield Hint Text Size?
        • How To Change Flutter Textformfield Font Size?
        • How To Change Flutter Textformfield Hint Text Color?
        • How To Implement Flutter Textformfield Hint Text Center?
        • How To Change Flutter Textformfield Error Text
        • How To Change Flutter Textformfield Error Style
        • How To Change Flutter Textformfield Text Color
        • How To Change Flutter Textformfield Outline Border Color
        • How To Change Flutter Textformfield Outline Border Width
        • How To Change Flutter Textformfield Label Text
      • Flutter Dropdown
        • How To Change Flutter Dropdown Icon
        • How To Implement Flutter Dropdown Remove Underline
        • How To Change Flutter Dropdown Icon Color
        • How To Change Flutter Dropdown Background Color
        • How To Change Flutter Dropdown Border Radius
        • How To Change Flutter Dropdown Icon Size
        • How To Implement Flutter Dropdown OnChange
      • Flutter ListViews
        • How To Implement Flutter ListView Horizontal
        • How To Implement Flutter ListView Builder Horizontal
      • Flutter Popup Menu
        • How To Use Flutter Popup Menu Item Ontap
        • How To Change Flutter Popup Menu Shape
        • How To Change Flutter Popup Menu Width
        • How To Change Popup Menu Icon Flutter
        • How To Change Flutter Popup Menu Item Height
        • How To Change Flutter Popup Menu Icon Size
      • Flutter SingleChildScrollView
        • How To Use Flutter SingleChildScrollView
      • Flutter Raised Button
        • How To Change Flutter RaisedButton Width
        • How To Change Flutter RaisedButton Color
        • How To Change Flutter RaisedButton Shape
        • How To Use Flutter RaisedButton OnPressed
        • How To Implement Flutter RaisedButton Disable
        • How To Change Flutter RaisedButton Disabled Color
        • How To Change Flutter RaisedButton Size
        • How To Easily Use Flutter RaisedButton Icon
        • How To Use Flutter Raisedbutton Icon OnPressed
        • How To Change Flutter Raised Button Elevation
      • Flutter Icon Button
        • How To Change Flutter Icon Button Background Color
        • How To Change Flutter Icon Button Size
        • How To Use Flutter Icon Button OnPressed
      • Flutter Flat Button
        • How To Easily Change Flutter FlatButton Color
      • Flutter Text Widget
        • How To Easily Set Flutter Text Align Center
        • How To Easily Change Flutter Text Font Size
        • How To Easily Change Flutter Text Size
        • How To Make Flutter Text Bold-Example Code
        • How To Change Flutter Text Color-Example Code
        • How To Set Flutter Text Italic-Easy Flutter Code Example
        • How To Change Flutter Text Line Height-Easy Flutter Code Example
        • How To Easily Set Flutter Text Underline
        • How To Easily Add Flutter Text Shadow
        • How To Easily Set Flutter Text Word Spacing
        • How To Easily Set Flutter Text Letter Spacing
        • How To Easily Set Space Between Flutter Text And Underline
        • How To Easily Align Flutter Text Justify
        • How To Easily Change Flutter Text Underline Color
      • Flutter Images
        • Learn How To Use Flutter Image Asset-Easy Flutter Guide
      • Flutter Column Widget
        • How To Easily Set Flutter Column Align Left
        • How To Easily Implement Flutter Column Scrollable
        • How To Easily Customize Flutter Column Spacing
      • Flutter Snackbar
        • How To Easily Use Flutter Snackbar Widget
      • Flutter Wrap Widget
        • How To Easily Use Flutter Wrap Widget – Flutter Example Code
      • Flutter Container Border Customization[Detailed Guide]
      • Flutter SizedBox Widget
        • How To Easily Customize Flutter SizedBox Widget
      • Flutter InkWell Widget
        • How To Easily Use Flutter InkWell OnTap
      • Textfield In Flutter App Detailed Explanation With Example
      • Flutter Textfield Align Center With Example
      • Flutter Image Picker
        • How To Properly Use Flutter Image Picker – Easy Flutter Example
      • Flutter Container Widget
        • How To Easily Change Flutter Container Size
        • How To Easily Set Flutter Container Full Width
        • How To Easily Customize Flutter Box Shadow Offset
        • How To Easily Customize Flutter Container Shadow
        • How To Easily Change Flutter Container Border Radius
        • How To Easily Change Flutter Container Padding
        • How To Easily Change Flutter Container Color
        • How To Easily Add Flutter Container Background Image
        • How To Easily Change Flutter Container Shadow Color
        • How To Easily Change Flutter Container Height
        • How To Easily Customize Flutter Container Margin
        • How To Easily Implement Flutter Container Gradient
        • How To Easily Set Flutter Box Shadow Only Top
        • How To Easily Implement Flutter Container Shape Circle
        • How To Easily Change Flutter Container Alignment
      • Beautiful Bottom Navigation Bar In Flutter App-Android And Flutter IOS-Dart Flutter
      • Let’s Customize Texts In Flutter
      • How To Change Flutter Textfield Color [Easy Examples]
      • Flutter Textfield Border Radius Explained With Example-Best Flutter Guide
      • Flutter Glassmorphism
        • How To Easily Customize Flutter Glassmorphism Container
        • How To Easily Change Flutter Glassmorphism Container Size
      • Flutter Icon Button Example – Detailed Customization – Step By Step
      • Flutter SetState
        • How To Easily Use Flutter SetState
      • Flutter Positioned Widget
        • How To Easily Use Flutter Positioned Widget – Example Code
      • Flutter Padding
        • How To Use Flutter Padding – Easy Flutter Guide
      • Flutter Bottom Navigation Bar Customization
      • Neumorphic Effect In Flutter App Container Widget
      • How To Change Flutter Textfield Border Color
      • Container Customization In Flutter App
      • Flutter Textfield Only Numbers Explained With Example-Best Flutter Guide
      • Flutter Gesture Detector Widget
        • How To Easily Use Flutter GestureDetector OnTap
      • Flutter Textfield Maxlength Detailed Explanation With Example-Best Flutter Guide
      • How To Use Columns In Flutter Apps
      • Flutter Textfield Decoration Detailed Explanation With Example-Flutter Guide 2022
      • Beautiful Grid View Builder In Flutter App-Detailed Customization
      • ListView Builder In Flutter Apps
      • Flutter Table Widget
        • How To Easily Customize Flutter Table Widget
      • How To Use Rows In Flutter Apps
      • How To Change Flutter Textfield Font Size
    • React Native
      • React Native Jobs In 2023: All You Need To Know
      • Why Should I Learn React Native Framework In 2023
      • Right React Native Elements for Your Next App [Detailed Guide]
      • Benefits Of Creating A React Native App [Easy Guide]
    • Updates
      • What’s New in Flutter 2.10 release?
    • Animations
      • Animated Container
        • How To Use Animated Container In Flutter? Explained With Example
      • Animated Texts
        • Animated Text Kit In Flutter App-Dart Flutter Makes Animation Easy
      • Lottie Animations
        • How To Use Beautiful Lottie Animations In Flutter App
      • Hero Animations
        • Hero Animations In Flutter App With Example-Beautiful Flutter Animations In Dart Language
  • Python Programming
    • Python Tuples
      • How To Easily Create Python Tuple – Easy Python Guide
    • Python Dictionaries
      • How To Properly Define And Use Python Dictionary – Easy Python Code Example
      • How To Properly Use Python Dict To Create Dictionary – Easy Python Guide
      • How To Use Python Dictionary Get Method – Easy Python Code Example
      • How To Use Python Dictionary Pop Method – Easy Python Guide
      • How To Use Python Dictionary SetDefault Method – Easy Python Guide
      • How To Use Python Dictionary Clear Method – Easy Python Code Example
    • Python Del Keyword
      • How To Properly Use Python Del Keyword – Easy Python Code
    • Python If Else Statement
      • How To Easily Use Python If Else Statement
      • How To Use Python Elif Statement – Easy Python Guide
      • How To Easily Use Nested If In Python
    • Python Loops
      • Python For Loop
        • How To Easily Use Python For Loop – Python Code Examples
      • Python While Loop
        • How To Use Python While Loop – Easy Code Examples
    • Python Break and Continue
      • Python Break Statement
        • How To Easily Use Python Break Statement – Python Code Examples
      • Python Continue Statement
        • How To Easily Use Python Continue Statement
    • Python Pass Statement
      • How To Easily Use Python Pass Statement
    • Python Functions
      • How To Properly Use Python Function – Super Easy Python Guide
      • How To Properly Use Python Function Arguments – Easy Python Guide
      • How To Properly Use Python Lambda Function – Easy Python Guide
    • Python Variables
      • How To Define And Use Python Global Variable – Easy Python Guide
      • How To Properly Use Python Local Variable – Easy Python Guide
      • How To Properly Use Python NonLocal Variables – Easy Python Guide
    • Python Classes and Objects
      • How To Properly Define And Use Python Class – Easy Example Code
    • Python Lists
      • How To Easily Use Python List Pop Method
      • How To Properly Use Python List Remove Method – Easy Python Guide
      • How To Properly Use Python List Extend – Easy Python Guide
      • How To Properly Use Python List Insert – Easy Python Guide
      • How To Easily Use Python List Index Method – Python Example Code
      • How To Easily Use Python List Count Method – Python Example Code
      • How To Easily Use Python List Reverse Method
      • How To Easily Use Python List Sort Method
      • How To Properly Use Python List Copy Method – Easy Python Guide
      • How To Easily Use Python List Clear Method
      • How To Easily Create Python List – Easy Python Example Code
      • How To Properly Use Python List Append – Easy Python Code
      • How To Easily Convert Python List To String
      • How To Easily Get Python List Size – Top 2 Methods
  • Code Compiler
    • Free Online Code Compiler
  • Free SEO Tools
    • On Page SEO Checker
    • Bulk URL Checker
    • Keyword List Multiplier
    • Link Spinner
    • File Merger
    • Analytics Spam Filter Tool
    • Google Cache Finder
    • Structured Data Tool For Local Businesses
    • RSS Feed Commander
  • More
    • About Us
    • Disclaimer
    • Contact Us
    • Privacy Policy
  • Toggle search form
flutter textfield decoration

Flutter Textfield Decoration Detailed Explanation With Example-Flutter Guide 2022

Posted on May 29, 2022June 1, 2022 By ZeeshanAli No Comments on Flutter Textfield Decoration Detailed Explanation With Example-Flutter Guide 2022

In this article, I will be discussing Flutter textfield decoration in detail. What Flutter textfield decoration is? What is the purpose of using Flutter textfield decoration in a Flutter textfield and how to use it to customize Flutter textfield in Flutter app. I’ll be using a step by step approach to implement Flutter textfield decoration and demonstrate it using a proper example of Flutter textfield. Let’s not waste anymore of your precious time and start understanding and implementing Flutter textfield decoration.

Outline

  1. What is Flutter Textfield Decoration?
  2. Flutter Textfield Decoration Implementation
  3. Flutter Textfield Underline
  4. Flutter Textfield Content Padding
  5. Flutter Textfield Enabled
  6. Flutter textfield Enabled Border
  7. Flutter textfield Focused Border
  8. Flutter Textfield Error Text
  9. Flutter Textfield Error Style
  10. Flutter Textfield Error Border
  11. Flutter Textfield Filled and Fill Color
  12. Flutter Textfield Helper Text
  13. Flutter Textfield Hint Text
  14. Flutter Textfield Label Text
  15. Flutter Textfield Prefix Icon
  16. Flutter Textfield Suffix Icon
  17. Beautiful Flutter Textfield Source Code
  18. Conclusion

What is Flutter Textfield Decoration?

The Textfield widget in Flutter is a very versatile control that can be used for a variety of purposes. One way to enhance its appearance and functionality is by using the Flutter textfield decoration class to add decorations to it. There are several different types of decorations available, each with its own set of properties that can be customized. I will be implementing the decoration to the Flutter textfield by using the constructors of Flutter textfield decoration. Let’s now leave the boring part and start implementing using code.

Flutter Textfield Decoration Implementation

Let’s start implementing Flutter textfield decoration. For that you have to use the decoration constructor of the Flutter textfield. See the below code:

TextField(
         decoration: InputDecoration()
         )
flutter textfield underline
As you can see in the above code that I have passed Flutter input decoration class to the decoration constructor of Flutter textfield. In the above image, this is the default style of the Flutter textfield. By using this input decoration class constructors, we can decorate Flutter textfield. Let’s understand Flutter textfield decoration by implementing constructors of input decoration class.

Flutter Textfield Underline

If you want to perform Flutter textfield underline remove. The line that you see under the Flutter textfield then you can do it using the border constructor of the input decoration class.

border: InputBorder.none
Using this line for , you can implement Flutter textfield underline remove .

Flutter Textfield Content Padding

In Flutter textfield decoration, Flutter textfield content padding is the padding of the input text or hint text that is shown in the Flutter textfield. To implement it, you have to use the content padding constructor of the Flutter input decoration class.

contentPadding: EdgeInsets.only(left: 20)
flutter textfield content padding
As you can see in the image above that by using Flutter textfield content padding, we now have some padding from the left as specified in the above code.

Flutter Textfield Enabled

In Flutter textfield decoration, using the enabled constructor, you can choose whether to enable of disable the Flutter textfield, means whether to take input from user or not. By default, it is true, you can make it false and it will not respond to taps means it won’t be focused when the user taps on it and of course then user cannot input anything in it as well.

enabled: false
If you don’t want to take input from user then use the above code.

Flutter textfield Enabled Border

In Flutter textfield decoration, Flutter textfield enabled border specifies the border when the Flutter textfield is not focused, means when the user hasn’t tapped on it yet or in some other Flutter textfield. It disappears when the user taps on it or it is focused.

 enabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(
                          color: Colors.blue,
                                  ),
                        borderRadius: BorderRadius.circular(20))
flutter textfield enabled border
As you can see in the above code, I have used the enabled border constructor of the input decoration class. I have passed outline input border class to the enabled border constructor and by using its border side and border radius constructor some decorations are implemented to the Flutter textfield enabled border which you can see in the above image.

Flutter textfield Focused Border

In Flutter textfield decoration, Flutter textfield focused border represents the border when the Flutter textfield is focused, means when the user has tapped on it or is focused. It disappears when focus is removed for that specific Flutter textfield.

 focusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(
                          color: Colors.blue,
                                  ),
                        borderRadius: BorderRadius.circular(20))
flutter textfield focused border
As you can see in the above code, I have used focused border constructor of the input decoration class. I have passed outline input border class to the focused border constructor and by using its border side and border radius constructor some decorations are implemented to the Flutter textfield enabled border which you can see in the above image.

Flutter Textfield Error Text

In Flutter textfield decoration, Flutter textfield error text is show under and on the left side of the Flutter textfield. It is used when some wrong input is given to that specific Flutter textfield. It is implemented using the error text constructor of the Flutter textfield.

errorText: 'This is an error text',
flutter textfield error text

If the error text is non null then the string passing to the error text constructor will be shown and it will also make the color of Flutter textfield border to red by default.

Flutter Textfield Error Style

In Flutter textfield decoration, Flutter textfield error style is used to style or decorate the error text. It is implemented using the error style constructor of Flutter input decoration class.

errorStyle: TextStyle(color: Colors.green)
flutter textfield error style

I have passed error style the Flutter textstyle class and have given it a color of green just for demonstration. In the above image, you can see that the color of Flutter textfield error text is now green. But what about the color of the Flutter textfield border, how to customize that as well. Don’t worry, it is covered in the next section.

Flutter Textfield Error Border

In Flutter textfield decoration, Flutter textfield error border is used to customize the properties of the error border. It is implemented using the error border constructor of the Flutter input decoration class.

 errorBorder: OutlineInputBorder(
                   borderSide: BorderSide(
                            color: Colors.red,
                                         ),
                   borderRadius: BorderRadius.circular(20)
                                )
flutter textfield error border

I have passed outline input border class to the error border constructor and have given it a color by using the border side constructor of the outline input border class, also I have given it a border radius to make the edges of the Flutter textfield border rounded. In the above image, you can see that we have successfully implemented and customized Flutter textfield error border, you can change the color or other properties of the Flutter textfield error border depending on the requirements of your Flutter app.

Flutter Textfield Filled and Fill Color

In Flutter textfield decoration, Flutter textfield fill color is used to give color to the background of the Flutter textfield. It is implemented by using the fill color constructor.

fillColor: Colors.blue
But just using this line won’t change the Flutter textfield color. There’s one more step that you should follow to change the Flutter textfield color.
 filled: true
flutter textfield background color
By using the filled constructor, it takes a boolean value so either make it true or false, by default it is false, which means the background color of Flutter textfield won’t change but making it true and also using the fill color which some specific color that you want will change the Flutter textfield color. So don’t forget to make the filled constructor set to true whenever you want to change the Flutter textfield background color.

Flutter Textfield Helper Text

In Flutter textfield decoration, Flutter textfield helper text as the name suggests, it is used as a helper. It is implemented using the helper text constructor and decorated using the helper style constructor.

 helperText: 'This is helper text',
 helperStyle: TextStyle(color: Colors.blue)
flutter textfield helper text

In the image above, this is how Flutter textfield helper text looks like in a Flutter textfield.

Flutter Textfield Hint Text

In Flutter textfield decoration, Flutter textfield hint text as the name suggests, it is used as a hint. It is shown when the textfield is empty and disappears when the user starts typing something. It is implemented using the hint text constructor and decorated using the hint style constructor.

 hintText: 'This is hint text',
 hintStyle: TextStyle(color: Colors.grey.shade500)
flutter textfield hint text

In the image above, this is how Flutter textfield hint text looks like in a Flutter textfield.

Flutter Textfield Label Text

In Flutter textfield decoration, Flutter textfield label text is a bit similar to Flutter textfield hint text but unlike hint text, it doesn’t disappears when the user starts typing in that textfield but instead it moves to the top left of the text field when the user taps or start inputting. It is implemented using the label text and by using the label style, you can decorate that label text.

 labelText: 'Label text',
 labelStyle: TextStyle(color: Colors.grey.shade500)
flutter textfield label text
flutter textfield label text
In the images above, you can see in the first one in which the textfield is not focused and the label text is working like a hint text but when I tapped on it it animates to the top left position.

Flutter Textfield Prefix Icon

Flutter textfield prefix icon is the icon that is shown before the hint or input text, it is on the left side of the Flutter textfield. It is implemented using the prefix icon constructor of the input decoration class. In our case, we have passed it a person icon with grey color. Let’s implement it:

 prefixIcon: Icon(
                    Icons.person,
                    color: Colors.grey,
                  ),
flutter textfield prefix icon
As you can see in the image above, the icon you see in the left is called the Flutter textfield prefix icon.

Flutter Textfield Suffix Icon

Flutter textfield suffix icon is the icon that is shown after the hint or input text, it is on the right side of the Flutter textfield. It is implemented using the suffix icon constructor of the input decoration class. For demonstration, I have passed it an eye icon with grey color. Let’s implement it:

 suffixIcon: Icon(
                    Icons.visibility,
                    color: Colors.grey,
                  ),
flutter textfield suffix icon
As you can see in the image above, the icon you see in the right is called the Flutter textfield suffix icon.
Congrats for making it this far, I have tried to cover the main constructors of the Flutter textfield decoration, I encourage you to try the remaining ones and see what output you get from them. As a treat, I have prepared a beautiful Flutter textfield for you and I would love to see you use it in your Flutter apps. The source code is given in the next section.

Beautiful Flutter Textfield Source Code

custom flutter textfield

custom flutter textfield

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      body: Center(
          child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 40),
              child: TextField(
                style: TextStyle(color: Colors.white),
                decoration: InputDecoration(
                    prefixIcon: Icon(
                      Icons.person,
                      color: Colors.white,
                    ),
                    suffixIcon: Icon(
                      Icons.visibility,
                      color: Colors.white,
                    ),
                    filled: true,
                    fillColor: Colors.purple.withOpacity(.2),
                    enabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.purple, width: 2),
                        borderRadius: BorderRadius.circular(100)
                            .copyWith(bottomRight: Radius.circular(0))),
                    focusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.purple, width: 2),
                        borderRadius: BorderRadius.circular(100)
                            .copyWith(bottomRight: Radius.circular(0))),
                    labelText: 'Enter something...',
                    labelStyle: TextStyle(color: Colors.grey.shade500),
                    helperText: 'Enter username',
                    helperStyle: TextStyle(color: Colors.grey.shade500)),
              ))),
    ));
  }
}

Conclusion

In conclusion, we have now learned how to customize Flutter textfield decoration in Flutter app. I would love to have your feedback and encourage you to read my other articles on amazing Flutter widgets, beautiful Flutter templates, and amazing Flutter animations. That is it for this particular post. Thanks for reading.

Flutter app articles you might like to read: beautiful gradient login UI, Dart Vs JavaScript, flutter login UI form, flutter basics for beginners, explanation of widgets in flutter, flutter architecture, flutter vs native, flutter sliverappbar customization, mobile app marketing tips, flutter bottom navigation bar, flutter appbar actions, flutter appbar title center, why learn react native framework, react native jobs, react native elements, unique flutter development.

You might also like:

Flutter Textfield Maxlength Detailed Explanation With Example-Best Flutter Guide

Flutter Textfield Border Radius Explained With Example-Best Flutter Guide

Flutter Textfield Decoration Detailed Explanation With Example-Flutter Guide 2022

How To Change Flutter Textfield Border Color-2022 Guide

Flutter Textfield Align Center With Example-2022 Guide

How To Change Flutter Textfield Color-2022 Guide

Flutter App Development Cookbook: Over 100 Techniques And Solutions For Hybrid App Development

How to Choose the Right React Native Elements for Your Next App- 2022 Guide

Why Should I learn React Native Framework In 2022

Flutter App Development In 2022: Future of Mobile App Development?

Flutter App Development In 2022: Future of Mobile App Development?

How to make your first app with flutter?

Hero Animations In Flutter App With Example-Beautiful Flutter Animations In Dart Language

Flutter Vs Android Studio: Which Is Better For You In 2022?

Flutter App Framework: The Future of Mobile App Development 2022?

Top Benefits Of Using Flutter Mobile App Development In 2022

How To Customize Flutter Container Border? 2022 Guide

Top Secrets About Flutter Development Kit-2022 Guide

Beautiful Bottom Navigation Bar In Flutter App-Android And Flutter IOS-Dart Flutter

ListView Builder In Flutter Apps

How To Design Beautiful AppBar in Flutter

How To Use Rows In Flutter Apps

What’s New in Flutter 2.10 release?

How To Use Columns In Flutter Apps

How To Use Beautiful Lottie Animations In Flutter App

Flutter Range Slider Beautiful Customization With Example | Syncfusion

Flutter Carousel Slider Beautiful Customization With Example

Flutter Glassmorphism Login UI Template With Source Code

Hero Animations In Flutter App With Example-Beautiful Flutter Animations In Dart Language

Flutter App Stack Widget Detailed Explanation With Example

Textfield In Flutter App Detailed Explanation With Example

Share this post:

Share on Twitter Share on Facebook Share on Pinterest Share on LinkedIn Share on WhatsApp
Widgets Tags:flutter textfield background color, flutter textfield border, flutter textfield border circular, flutter textfield border color, flutter textfield border radius, flutter textfield content padding, flutter textfield decoration, flutter textfield decoration class, flutter textfield error, flutter textfield error style, flutter textfield error text, flutter textfield error text style, flutter textfield example, flutter textfield helper, flutter textfield helper color, flutter textfield helper style, flutter textfield helper text, flutter textfield helper text color, flutter textfield helper text style, flutter textfield hint, flutter textfield hint color, flutter textfield hint style, flutter textfield hint text, flutter textfield hint text color, flutter textfield hint text size, flutter textfield hint text style, flutter textfield label, flutter textfield label color, flutter textfield label style, flutter textfield label text, flutter textfield label text color, flutter textfield label text style, flutter textfield padding, flutter textfield prefix icon, flutter textfield prefix icon color, flutter textfield suffix icon, flutter textfield suffix icon color

Post navigation

Previous Post: How To Change Flutter Textfield Font Size
Next Post: Flutter Textfield Border Radius Explained With Example-Best Flutter Guide

Related Posts

flutter stack widget Flutter App Stack Widget Detailed Explanation With Example Flutter App Development
flutter row widget How To Use Rows In Flutter Apps Flutter App Development
flutter textfield color How To Change Flutter Textfield Color [Easy Examples] Widgets
flutter textfield font size customization How To Change Flutter Textfield Font Size Widgets
flutter textfield border color How To Change Flutter Textfield Border Color Widgets
flutter neumorphic effect containers Neumorphic Effect In Flutter App Container Widget Flutter App Development

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Latest Posts

  • Flutter Firebase Email Authentication [Login, Signup, Logout]
  • Flutter Firebase CRUD App [Create, Read, Update, Delete]
  • [Solved] Flutter Pinch Zoom Image In ListView Builder
  • Flutter Contacts List [Display Data And Make A Call]
  • Flutter Reorderable Grid View Easy Explanation [Detailed Example]
  • Python Nested Dictionary [Explained With 6 Easy Examples]
  • Python Dictionary Keys Method [Easy Python Code Programs]
  • How To Use Python Dictionary FromKeys Method [Easy Examples]
  • Python Dictionary Clear Method [Explained With Examples]
  • How To Use Python Set Update Method [Python Code Examples]
  • How To Use Python Set Union Method [Easy Python Programs]
  • Python Set Symmetric Difference Update Method [Easy Examples]
  • How To Use Python Set Symmetric Difference Method
  • How To Use Python Set Pop Method [Easy Code Guide]
  • How To Use Python Set Issubset Method [Easy Python Examples]
  • How To Use Python Set IsDisjoint Method [Detailed Examples]
  • How To Use Python Set Intersection Update Method
  • How To Use Python Set Intersection [Easy Python Tutorial]
  • How To Properly Use Python Set Discard Method
  • Python Set Difference Update Method [Easy Examples]
  • Python Set Difference Method Implementation [Easy Guide]

Menu

  • Let Me Flutter – Home
  • Flutter App Development
  • Python Programming
  • About Us
  • Contact Us
  • Disclaimer
  • Privacy Policy

Categories

LATEST POSTS

  • Flutter Firebase Email Authentication [Login, Signup, Logout]
  • Flutter Firebase CRUD App [Create, Read, Update, Delete]
  • [Solved] Flutter Pinch Zoom Image In ListView Builder
  • Flutter Contacts List [Display Data And Make A Call]
  • Flutter Reorderable Grid View Easy Explanation [Detailed Example]

Copyright © 2023 Let Me Flutter.

Powered by PressBook Media WordPress theme