Volle Breite: double.infinity

Teil des Abschnitts Layouts für jede Bildschirmgröße der Flutter-Journey von Coddy. Lektion 14 von 30.

Eine Schaltfläche ist so breit wie ihre Beschriftung. Auf einer Anmeldeseite soll sie oft über die gesamte Seite reichen, genauso breit wie die Felder darüber.

Umschließe sie mit einer SizedBox, deren Breite double.infinity beträgt:

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

double.infinity ist eine Dart-Zahl, die größer als jede andere ist. Keine Box kann so breit sein. Deshalb macht Flutter sie so breit, wie es ihr übergeordnetes Element zulässt: hier die Seite innerhalb ihrer Abstände. Auf einem breiteren Smartphone wächst auch die Schaltfläche.

Verwende es jeweils nur für eine Richtung. Eine Höhe von double.infinity innerhalb einer Column fordert eine unendliche Höhe an, und Flutter bricht mit einem Fehler ab.

Aufgabe

Einfach

Mach die Schaltfläche Sign in genauso breit wie das E-Mail-Feld über ihr und behalte ihre normale Höhe bei.

Probier es selbst

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