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.
|
1 |
import 'package:flutter/material.dart'; |
2. Call our main MyApp class using void main run app function.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main widget class named as MyApp extends with State less widget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Create Scaffold widget -> Center widget -> Column widget in Widget build area in class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children:[ ] ) ) ) ); } } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
Container( width: 300, child: TextField( decoration: InputDecoration( border: OutlineInputBorder(), labelText: 'Enter Name Here', hintText: 'Enter Name Here', ), autofocus: false, ) ) |
Screenshot:
6. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children:[ Container( width: 300, child: TextField( decoration: InputDecoration( border: OutlineInputBorder(), labelText: 'Enter Name Here', hintText: 'Enter Name Here', ), autofocus: false, ) ) ] ) ) ) ); } } |
Screenshots:
