【Flutter】Row の使い方

2024年8月17日2024年8月27日

※本記事で使用している環境

＜パソコン＞
機種：MacBook Air（13inch）
OS：macOS Sonoma（ver.14.5）
チップ：Apple M3
シェル：zsh

＜ソフトウェア＞
・Flutter（ver.3.22.3）
・Xcode（ver.15.4）
・CocoaPods（ver.1.15.2）
・Android Studio（ver.2024.1）
・Visual Studio Code（ver.1.92.0）

前回は、Column Widget についての解説を行いました。

はじめに

公式ドキュメントの解説は、以下のページにあります。

https://api.flutter.dev/flutter/widgets/Row-class.html

記事を執筆するにあたって、以下の書籍を参考にしました。

おすすめ書籍

リンク

ウィジェットを横に並べる手順

前回使ったファイルで解説を行っていきます。

以下のコードになるように書いていきます。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Container(
                color: Colors.amber,
                width: 100,
                height: 100,
                child: Text("Container 1"),
              ),
              SizedBox(
                width: 20,
              ),
              Container(
                color: Colors.teal,
                width: 100,
                height: 100,
                child: Text("Container 2"),
              ),
              Container(
                color: Colors.blue,
                width: 100,
                height: 100,
                child: Text("Container 3"),
              ),
            ],
          ),
        ),
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

STEP

Column を Row に変更する