Full Width: double.infinity

Part of the Layout That Fits section of Coddy's Flutter journey. Lesson 14 of 30.

A button is as wide as its label. On a sign in page you often want it to stretch across the page, as wide as the fields above it.

Wrap it in a SizedBox whose width is double.infinity:

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

double.infinity is a Dart number bigger than any other. No box can be that wide, so Flutter makes it as wide as its parent allows: here the page inside its padding. On a wider phone the button grows with it.

Use it for one direction at a time. A height of double.infinity inside a Column asks for endless height, and Flutter stops with an error.

Challenge

Easy

Make the Sign in button as wide as the email field above it, keeping its normal height.

Try it yourself

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