Let’s talk about flutter textfield in flutter app, but first if you are new and want a complete setup and want to build your first app instantly, then click here, now let’s jump into text field widget in flutter app, what it really is, its role, and usage in flutter app. So let’s get right into flutter text field widget.
Introduction
Text field is used to input values from user in the flutter app, it can be an integer, string etc. Textfield in flutter app is used if the user want to input some data e.g. in the login screen where the user is required to input email or password or in the registration screen where a new user is added based on the data that is inputted using the textfields. Let’s now directly jump into textfield implementation.
Flutter Text Field
Flutter Text Field Implementation
Scaffold( body: Center( child: TextField(), ), )
Input Text Style
style: TextStyle(
color: Colors.blue.shade900,
fontSize: 20
)
Input Decoration
TextField( decoration: InputDecoration(), )
Flutter Textfield Hint Text
decoration: InputDecoration(
hintText: 'Enter something'
)
Using the hint text constructor of the input decoration class, we can give a hint message to the user about what to fill in that specific field or any text we want, whenever the user starts inputting value in that textfield then that hint text disappears and if the user remove all the inputted value then this hint text will again be visible.
Flutter Textfield Hint Style
hintStyle: TextStyle(color: Colors.grey, fontSize: 15)
We can use the hint style constructor of the input decoration class to style our hint text. As you can see above, we have specified the hint text color to grey and font size to 15. You can change other properties like font weight, style etc.
Flutter Textfield Fill Color and Filled
fillColor: Colors.blue.shade200, filled: true,
Note
Flutter Textfield Prefix Icon
prefixIcon: Icon(Icons.email)
Flutter Textfield Prefix Icon Constraints
prefixIconConstraints: BoxConstraints(maxHeight: 30, maxWidth: 30)
Flutter Textfield Suffix Icon and Constraints
suffixIcon: Icon(Icons.visibility_off), suffixIconConstraints: BoxConstraints(maxHeight: 30, maxWidth: 30)
Flutter Textfield Prefix
prefix: Icon( Icons.email, color: Colors.grey, size: 14, )
It is different from the prefix icon, the constructor prefix takes a widget and is only visible when the user taps on the text field or starts typing. When the text field is focused, we can see the prefix. As you can see in the image above, the small email icon after the prefix icon is the prefix.
Flutter Textfield Border
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(50),
borderSide: BorderSide(color: Colors.grey)
)
Flutter Textfield Auto Focus
autofocus: true
Source Code
Source code for this text field is given below:
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(
title: 'Flutter Text Field',
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 20),
child: TextField(
autofocus: true,
style: TextStyle(color: Colors.blue.shade900, fontSize: 20),
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(50),
borderSide: BorderSide(color: Colors.grey)),
prefixIcon: Icon(Icons.email),
suffixIcon: Icon(Icons.visibility_off),
hintText: 'Enter your email',
hintStyle: TextStyle(color: Colors.grey, fontSize: 15)),
),
),
),
),
);
}
}Note:
That’s all for this article, hope you enjoyed it and have learnt a lot from it. Implement it in your code and share your experience with us. We would love to see how you have used it in your flutter app. We would be looking forward for your response. Hope to see you in our next articles in which we will dig deep into other amazing widgets. Thanks.
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:
How To Change Flutter Textfield Underline Color
Flutter Textfield Remove Underline Explained With Example
Amazing Asus Rog Strix Scar 15 Gaming Laptop 2022
Amazing Flutter Dart Book-Full Stack Application Development For Cloud(1st Edition)
Amazing Dart Programming Language Book For Beginners(1st Edition)
Best Python Programming Guide-Beginners Guide To Learn Python In 7 Days
Best Programming Python Book For Developers(2nd Edition)
Best Python Book Guide For Developers(3rd Edition)
Best Python Programming Exercises Book From Beginner To Advanced(5th Edition)
Best Python Crash Course Book(2nd Edition)-Project Based Introduction To Programming
Best JavaScript and JQuery Book For Frontend Web Developers
Best React Native Book-Start Developing Hybrid Apps
Flutter Textfield Onchanged Explained With Example-Best Flutter Guide
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
Beautiful Flutter Login UI Form Template With Free Source Code
Flutter Basics For Beginners In 2022
Flutter Developer Salary 2022: How Much Can You Earn?
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
