Twoje pierwsze pole tekstowe

Część sekcji Dodajemy interaktywność ścieżki Flutter w Coddy. Lekcja 22 z 34.

TextField to pole, w którym można pisać. Dotknij go w podglądzie i pisz za pomocą klawiatury.

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

decoration: określa wygląd pola. labelText nadaje nazwę polu: znajduje się wewnątrz pustego pola i przesuwa się do jego obramowania, gdy zaczniesz pisać, dzięki czemu nazwa jest zawsze widoczna. OutlineInputBorder() rysuje obramowanie z każdej strony; bez niego pod tekstem znajduje się tylko linia.

Dostępne jest też hintText — szary przykład, taki jak you@example.com, który znika, gdy tylko zaczniesz pisać. Używaj etykiety, aby nazwać pole, a podpowiedzi tylko jako dodatku.

Pole rozciąga się na przypisaną mu szerokość. Tutaj Column znajduje się wewnątrz Padding, które odsuwa ją od krawędzi ekranu.

Wyzwanie

Łatwy

Pod tytułem, po SizedBox o wysokości 16, dodaj pole TextField z etykietą Email i obramowaniem ze wszystkich stron.

Spróbuj swoich sił

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