Dein erstes Textfeld

Teil des Abschnitts Apps interaktiv gestalten der Flutter-Journey von Coddy. Lektion 22 von 34.

Ein TextField ist ein Feld, in das man tippen kann. Tippe in der Vorschau darauf und schreibe mit deiner Tastatur.

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

decoration: legt fest, wie das Feld aussieht. labelText benennt das Feld: Der Text steht im leeren Feld und rückt an den Rand, sobald du mit dem Tippen beginnst, sodass die Bezeichnung immer sichtbar ist. OutlineInputBorder() zeichnet einen Rahmen rundherum; ohne ihn gibt es nur eine Linie unter dem Text.

Es gibt auch hintText, einen grauen Beispieltext wie you@example.com, der jedoch verschwindet, sobald du tippst. Verwende ein Label, um ein Feld zu benennen, und einen Hinweis nur als Ergänzung.

Ein Feld erstreckt sich über die ihm zugewiesene Breite. Hier befindet sich die Column innerhalb eines Padding, das sie von den Bildschirmrändern fernhält.

Aufgabe

Einfach

Füge unter dem Titel nach einer SizedBox von 16 ein mit Email beschriftetes TextField mit einem Rahmen auf allen Seiten hinzu.

Probier es selbst

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