全宽： double.infinity

本课属于 Coddy Flutter 学习旅程的“适配不同屏幕的布局”单元。第 14 课，共 30 课。

按钮的宽度与标签文字相同。在登录页面上，你通常希望按钮横跨整个页面，宽度与上方的输入框相同。

用一个宽度为 double.infinity 的 SizedBox 包住它：

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

double.infinity 是一个比其他任何数都大的 Dart 数字。没有盒子能达到这么宽，所以 Flutter 会让它尽可能填满父级允许的宽度：这里是页面内边距以内的宽度。在更宽的手机上，按钮也会随之变宽。

一次只用它设置一个方向。在 Column 中把高度设为 double.infinity，就表示需要无限高度，Flutter 会因此报错并停止运行。

挑战

简单

让 Sign in 按钮的宽度与上方的电子邮件输入框相同，同时保持其正常高度。

亲手试试

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