전체 너비: double.infinity

Coddy Flutter 여정의 화면 크기에 맞는 레이아웃 섹션에 포함된 레슨. 30개 중 14번째.

버튼의 너비는 레이블의 너비와 같습니다. 로그인 페이지에서는 버튼이 페이지 전체에 걸쳐 위쪽의 입력 필드만큼 넓게 펼쳐지도록 하고 싶을 때가 많습니다.

버튼을 너비가 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'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}