列を中央に配置する

CoddyのFlutterジャーニー「はじめてのアプリ」セクションの一部。レッスン 22/32。

Columnは与えられた空間いっぱいの高さになり、子要素を上端から配置します。mainAxisAlignment:は、その高さに沿った配置場所、つまり列の主軸上の配置を指定します。

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [...],
)

MainAxisAlignment.startは上端、centerは中央、endは下端です。spaceEvenlyは、等しい間隔を空けて配置します。Rowにも同じ設定があり、幅に沿って配置します。

画面上でこの列の幅は、最も幅の広い子要素と同じ幅にしかならないため、左側にとどまります。次のレッスンでは、この方向について学びます。

チャレンジ

簡単

3つの数字は画面の上部にあります。列のmainAxisAlignment:を使って、画面の半分の位置まで移動させましょう。

自分で試してみよう

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: Column(
          children: [
            Text('One', style: TextStyle(fontSize: 32)),
            Text('Two', style: TextStyle(fontSize: 32)),
            Text('Three', style: TextStyle(fontSize: 32)),
          ],
        ),
      ),
    );
  }
}