Ancho completo: double.infinity

Parte de la sección Diseños que se adaptan del Journey de Flutter de Coddy. Lección 14 de 30.

Un botón tiene el mismo ancho que su etiqueta. En una página de inicio de sesión, a menudo quieres que se extienda a lo ancho de la página, igual que los campos que tiene encima.

Envuélvelo en un SizedBox cuyo ancho sea double.infinity:

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

double.infinity es un número de Dart mayor que cualquier otro. Ninguna caja puede tener ese ancho, así que Flutter la hace tan ancha como se lo permite su elemento padre: aquí, la página dentro de su relleno. En un teléfono más ancho, el botón también se ensancha.

Úsalo para una dirección a la vez. Una altura de double.infinity dentro de una Column solicita una altura infinita, y Flutter se detiene con un error.

Desafío

Fácil

Haz que el botón Sign in tenga el mismo ancho que el campo de correo electrónico de arriba, manteniendo su altura normal.

Pruébalo tú mismo

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