Tam Genişlik: double.infinity

Coddy'nin Flutter Journey'sinin Her Ekrana Uyan Düzenler bölümünün bir parçası. Ders 14 / 30.

Bir düğmenin genişliği, etiketinin genişliği kadardır. Oturum açma sayfasında genellikle düğmenin sayfanın tamamına, üstündeki alanlar kadar genişlemesini istersin.

Düğmeyi, genişliği double.infinity olan bir SizedBox içine yerleştir:

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

double.infinity, Dart'ta diğer tüm sayılardan daha büyük bir sayıdır. Hiçbir kutu bu kadar geniş olamayacağı için Flutter, kutuyu üst öğesinin izin verdiği genişliğe kadar genişletir: burada bu, sayfanın dolgu alanı içidir. Daha geniş bir telefonda düğme de onunla birlikte genişler.

Bunu aynı anda yalnızca bir yön için kullan. Bir Column içinde double.infinity yüksekliği istemek, sonsuz yükseklik talep eder ve Flutter bir hatayla durur.

Görev

Kolay

Sign in düğmesini, normal yüksekliğini koruyarak üstündeki e-posta alanıyla aynı genişlikte yapın.

Kendin dene

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