Display Text Field in Flutter

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});

  State<MyApp> createState() => _MyAppState();

class _MyAppState extends State<MyApp> {
  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) {

Leave a Comment

Cancel reply

Your email address will not be published.