列の中に行を配置する

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

RowはColumnの子の1つにできます。これにより、画面に複数の要素が並ぶ行を作れます。

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Text('Pancakes'),
    Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text('20 min'),
        SizedBox(width: 12),
        Text('Easy'),
      ],
    ),
  ],
)

mainAxisSize: MainAxisSize.minを指定すると、行や列は与えられた空間をすべて使うのではなく、子要素に合わせた大きさになります。ここでは、両方を画面の中央に収めます。

チャレンジ

簡単

これを小さなプロフィール見出しにしてみましょう。

Ada Lovelaceを1行目に配置します
その下にLondonと1815をRow内で横並びに配置します

自分で試してみよう

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: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('Ada Lovelace', style: TextStyle(fontSize: 28)),
              Text('London'),
              Text('1815'),
            ],
          ),
        ),
      ),
    );
  }
}