Create Text Input TextField Widget in Flutter Example Tutorial

In flutter we use TextField widget to get input in alphanumeric characters from application user. TextField allows app user to enter some data in application. TextField is most commonly used to build application input forms where developer needs to ask multiple type of information from user. So in this tutorial we would Create Text Input TextField Widget in Flutter Android iOS App With Example Tutorial.

Contents in this project Create Text Input TextField Widget in Flutter Android iOS App Example Tutorial:

1. Import material.dart package in your app’s main.dart file.

2. Call our main MyApp class using void main run app function.

3. Create our main widget class named as MyApp extends with State less widget.

4. Create Scaffold widget -> Center widget -> Column widget in Widget build area in class.

5. Create a Container widget then put the TextField widget inside it. We are doing this because TextField did not support width and height directly.

  • decoration : To show decoration around Text Field.
  • border : Create default rounded rectangle border around Text Field.
  • labelText : To show label text on selection of Text Field.
  • hintText : To show Hint text inside Text field.

Screenshot:

6. Complete source code for main.dart file:

Screenshots:

Create Text Input TextField Widget in Flutter Example Tutorial

Leave a Reply

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