全幅：double.infinity

CoddyのFlutterジャーニー「画面サイズに合わせたレイアウト」セクションの一部。レッスン 14/30。

ボタンの幅はラベルに合わせて決まります。サインインページでは、上にある入力欄と同じ幅でページいっぱいに広げたいことがよくあります。

SizedBox で囲み、幅を double.infinity にします。

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