Largura total: double.infinity

Parte da seção Layouts que se adaptam do Journey de Flutter da Coddy. Lição 14 de 30.

Um botão tem a largura do seu rótulo. Em uma página de login, muitas vezes você quer que ele se estenda por toda a página, com a mesma largura dos campos acima dele.

Envolva-o em um SizedBox cuja largura seja double.infinity:

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

double.infinity é um número Dart maior que qualquer outro. Nenhuma caixa pode ter essa largura, então o Flutter a deixa tão larga quanto o elemento pai permitir: neste caso, a página dentro do seu espaçamento interno. Em um celular mais largo, o botão também fica mais largo.

Use-o em uma direção de cada vez. Uma altura de double.infinity dentro de uma Column solicita uma altura infinita, e o Flutter para com um erro.

Desafio

Fácil

Deixe o botão Sign in tão largo quanto o campo de e-mail acima dele, mantendo sua altura normal.

Experimente você mesmo

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