Flutter TextField

Flutter TextField Example

You can use TextField widget to get text input from user through UI.

In this tutorial, you will learn how to use TextField.

Sample Code Snippet

Following is a sample code snippet to show TextField in your Flutter application.

TextField(
  decoration: InputDecoration(
	border: OutlineInputBorder(),
	labelText: 'Name',
  ),
)

We will go through different scenarios involving TextField in the following Flutter tutorials.

Example

In this example Flutter application, we display a TextField in UI.

You may create a basic Flutter project and replace main.dart with the following code.

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _State createState() => _State();
}

class _State extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Tutorial - googleflutter.com'),
      ),
      body: Padding(
        padding: EdgeInsets.all(10),
        child: Column(
          children: <Widget>[
            TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Name',
              ),
            )
          ],
        )
      )
    );
  }
}

When you run the application, you would get UI as shown below.

When you click on the TextField, labelText goes to the top left corner of the border and a keyboard appears at the bottom.

Summary

In this Flutter Tutorial, we learned how to use a TextField in your Flutter Application.