Votre premier champ de texte

Fait partie de la section Rendre l’application interactive du Journey Flutter de Coddy. Leçon 22 sur 34.

Un TextField est une zone dans laquelle on peut saisir du texte. Touchez-la dans l’aperçu et saisissez du texte avec votre clavier.

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

decoration: définit l’apparence du champ. labelText nomme le champ : le libellé se trouve à l’intérieur de la zone vide et remonte vers la bordure lorsque vous commencez à saisir du texte, de sorte que le nom reste toujours visible. OutlineInputBorder() dessine un cadre tout autour ; sans lui, il n’y a qu’une ligne sous le texte.

Il existe aussi hintText, un exemple en gris comme you@example.com, mais il disparaît dès que vous saisissez du texte. Utilisez un libellé pour nommer un champ, et un indice uniquement en complément.

Un champ s’étend sur toute la largeur qui lui est attribuée. Ici, le Column se trouve dans un Padding, qui le maintient à l’écart des bords de l’écran.

Défi

Facile

Sous le titre, après un SizedBox de 16, ajoute un TextField étiqueté Email, avec une bordure tout autour.

Essayez vous-même

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