Il tuo primo campo di testo

Fa parte della sezione Rendere l’app interattiva del percorso Flutter di Coddy. Lezione 22 di 34.

Un TextField è una casella in cui le persone possono digitare. Toccalo nell'anteprima e digita con la tastiera.

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

decoration: imposta l'aspetto del campo. labelText dà un nome al campo: si trova all'interno della casella vuota e si sposta verso il bordo quando inizi a digitare, così il nome è sempre visibile. OutlineInputBorder() disegna un bordo tutt'intorno; senza, c'è solo una linea sotto il testo.

C'è anche hintText, un esempio grigio come you@example.com, ma scompare appena inizi a digitare. Usa un'etichetta per dare un nome al campo e un suggerimento solo come informazione aggiuntiva.

Un campo si estende per tutta la larghezza che gli viene assegnata. Qui, la Column si trova all'interno di un Padding, che la tiene lontana dai bordi dello schermo.

Sfida

Facile

Sotto il titolo, dopo un SizedBox di 16, aggiungi un TextField con etichetta Email e un bordo tutto intorno.

Provalo tu

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