Pełna szerokość: double.infinity

Część sekcji Układ dopasowany do ekranu ścieżki Flutter w Coddy. Lekcja 14 z 30.

Przycisk jest tak szeroki jak jego etykieta. Na stronie logowania często chcesz, żeby rozciągał się na całą szerokość strony, tak jak pola nad nim.

Umieść go w SizedBox, którego szerokość wynosi double.infinity:

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

double.infinity to liczba w Dart większa od każdej innej. Żaden box nie może być tak szeroki, więc Flutter nadaje mu szerokość, na jaką pozwala jego element nadrzędny: w tym przypadku szerokość strony wewnątrz jej wypełnienia. Na szerszym telefonie przycisk również się powiększy.

Używaj tego naraz tylko w jednym kierunku. Wysokość double.infinity wewnątrz Column oznacza żądanie nieskończonej wysokości, co powoduje błąd we Flutterze.

Wyzwanie

Łatwy

Spraw, aby przycisk Sign in był tak szeroki jak pole adresu e-mail nad nim, zachowując jego standardową wysokość.

Spróbuj swoich sił

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