Lebar Penuh: double.infinity

Termasuk bagian Layout yang Menyesuaikan dalam perjalanan Flutter di Coddy. Pelajaran 14 dari 30.

Tombol memiliki lebar yang sama dengan labelnya. Di halaman masuk, biasanya kamu ingin tombol membentang selebar halaman, sama lebarnya dengan kolom isian di atasnya.

Bungkus tombol dengan SizedBox yang lebarnya double.infinity:

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

double.infinity adalah angka Dart yang lebih besar daripada angka lainnya. Tidak ada kotak yang bisa selebar itu, jadi Flutter membuatnya selebar yang diizinkan parent-nya: dalam hal ini, halaman di dalam padding-nya. Tombol akan ikut melebar di ponsel yang lebih lebar.

Gunakan ini untuk satu arah saja setiap kali. Tinggi double.infinity di dalam Column meminta tinggi tanpa batas, dan Flutter akan berhenti dengan error.

Tantangan

Mudah

Buat tombol Sign in selebar kolom email di atasnya, dengan tetap mempertahankan tinggi normalnya.

Coba sendiri

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