Ваше первое текстовое поле

Часть раздела Добавляем интерактивность путешествия по Flutter на Coddy. Урок 22 из 34.

TextField — это поле, в которое можно вводить текст. Нажми на него в предварительном просмотре и вводи текст с клавиатуры.

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

decoration: задаёт внешний вид поля. labelText задаёт название поля: оно находится внутри пустого поля и перемещается к границе, когда ты начинаешь вводить текст, поэтому название всегда видно. OutlineInputBorder() рисует рамку со всех сторон; без неё под текстом будет только линия.

Есть также hintText — серый пример, например you@example.com, но он исчезает, как только ты начинаешь вводить текст. Используй метку, чтобы назвать поле, а подсказку — только в дополнение.

Поле растягивается на всю ширину, которая ему задана. Здесь Column находится внутри Padding, который не даёт ему примыкать к краям экрана.

Задание

Легко

Под заголовком, после SizedBox высотой 16, добавь TextField с меткой Email и рамкой со всех сторон.

Попробуйте сами

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