Spacerが間隔を広げる

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

トップバーでは、左側にロゴ、右側にリンクを配置することがよくあります。Spacerを使うと、行の残りのスペースをすべて占める空のウィジェットになり、その後にあるすべての要素を反対側へ押し出します。

Row(
  children: [
    const Text('Logo'),
    const Spacer(),
    const Text('Cart'),
  ],
)

Spacerは、隙間を作りたい位置に置きます。その前にあるウィジェットは左側に残り、その後にあるウィジェットは右側へ移動します。同じ側にある隣り合うウィジェット間のスペースは、指定したとおりに保たれます。

mainAxisAlignment: MainAxisAlignment.spaceBetweenを使うと、代わりにすべての子要素の間にスペースが広がります。広げたい隙間が1つだけの場合は、Spacerを使いましょう。

チャレンジ

簡単

Coddyを左側に配置し、HelpとLog inを右端に寄せ、間隔は引き続き16ピクセルにします。

自分で試してみよう

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(
        body: Padding(
          padding: const EdgeInsets.fromLTRB(16, 48, 16, 16),
          child: Column(
            children: [
              Row(
                children: [
                  const Text(
                    'Coddy',
                    style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  ),
                  const Text('Help'),
                  const SizedBox(width: 16),
                  const Text('Log in'),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}