Your First Text Field

Part of the Making It Interactive section of Coddy's Flutter journey. Lesson 22 of 34.

A TextField is a box people can type into. Tap it in the preview and type with your keyboard.

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

decoration: sets how the field looks. labelText names the field: it sits inside the empty box and moves up to the border when you start typing, so the name is always there. OutlineInputBorder() draws a box all around; without it there is only a line under the text.

There is also hintText, a grey example like you@example.com, but it disappears as soon as you type. Use a label to name a field, and a hint only as an extra.

A field stretches across the width it is given. Here the Column is inside a Padding, which keeps it off the screen's edges.

Challenge

Easy

Under the title, after a SizedBox of 16, add a TextField labelled Email, with a border all around.

Try it yourself

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sign Up')),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('Create your account', style: TextStyle(fontSize: 24)),
          ],
        ),
      ),
    );
  }
}