Toàn bộ chiều rộng: double.infinity

Thuộc phần Bố cục phù hợp với mọi màn hình trong hành trình Flutter của Coddy. Bài học 14 trên 30.

Một nút có chiều rộng bằng nhãn của nó. Trên trang đăng nhập, bạn thường muốn nút kéo dài hết chiều ngang trang, bằng với chiều rộng của các trường phía trên.

Bọc nút trong một SizedBox có chiều rộng là double.infinity:

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

double.infinity là một số trong Dart lớn hơn mọi số khác. Không hộp nào có thể rộng đến mức đó, nên Flutter sẽ làm hộp rộng bằng giới hạn của phần tử cha: ở đây là trang bên trong phần đệm. Trên điện thoại rộng hơn, nút cũng rộng theo.

Mỗi lần chỉ dùng nó cho một hướng. Chiều cao double.infinity bên trong Column yêu cầu chiều cao vô hạn, khiến Flutter dừng lại và báo lỗi.

Thử thách

Dễ

Đặt chiều rộng của nút Sign in bằng chiều rộng của trường email phía trên, đồng thời giữ nguyên chiều cao thông thường.

Tự làm thử

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