Pleine largeur : double.infinity

Fait partie de la section Des mises en page adaptées du Journey Flutter de Coddy. Leçon 14 sur 30.

Un bouton est aussi large que son libellé. Sur une page de connexion, vous souhaitez souvent qu’il s’étende sur toute la largeur de la page, comme les champs situés au-dessus.

Placez-le dans un SizedBox dont la largeur est double.infinity :

SizedBox(
  width: double.infinity,
  child: ElevatedButton(
    onPressed: () {},
    child: const Text('Continue'),
  ),
)

double.infinity est un nombre Dart plus grand que tous les autres. Aucune boîte ne peut être aussi large, alors Flutter lui donne la largeur maximale autorisée par son parent : ici, la page à l’intérieur de ses marges intérieures. Sur un téléphone plus large, le bouton s’élargit avec elle.

Utilisez-le dans une seule direction à la fois. Une hauteur de double.infinity dans une Column demande une hauteur infinie, et Flutter s’arrête en affichant une erreur.

Défi

Facile

Rends le bouton Sign in aussi large que le champ d’adresse e-mail situé au-dessus, tout en conservant sa hauteur normale.

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: Scaffold(
        appBar: AppBar(title: const Text('Welcome back')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              const TextField(
                decoration: InputDecoration(labelText: 'Email'),
              ),
              const SizedBox(height: 24),
              ElevatedButton(
                onPressed: () {},
                child: const Text('Sign in'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}