Display Text Field in Flutter

A text field is input box that allows a user to enter text.

A TextField class is used to create a text field. By default a text field is displayed with an underline. Style can be changed using InputDecoration class. The onChanged callback is called when the user modifies the text in the field.

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('Text field')),
        body: Center(
          child: TextField(
            decoration: const InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'Username',
            ),
            onChanged: (text) {
              print(text);
            },
          ),
        ));
  }
}