Larghezza completa: double.infinity

Fa parte della sezione Layout adattabili del percorso Flutter di Coddy. Lezione 14 di 30.

Un pulsante è largo quanto la sua etichetta. In una pagina di accesso spesso vuoi che si estenda per tutta la larghezza della pagina, come i campi sopra di esso.

Avvolgilo in un SizedBox la cui larghezza è double.infinity:

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

double.infinity è un numero Dart più grande di qualsiasi altro. Nessun riquadro può essere così largo, quindi Flutter lo rende largo quanto consente il suo genitore: in questo caso, la pagina all'interno del suo padding. Su un telefono più largo, anche il pulsante si allarga.

Usalo per una sola direzione alla volta. Un'altezza di double.infinity all'interno di una Column richiede un'altezza infinita e Flutter si interrompe con un errore.

Sfida

Facile

Fai in modo che il pulsante Sign in sia largo quanto il campo email sopra di esso, mantenendo la sua altezza normale.

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