Flutterの基本レイアウトウィジェットの使い方！Column・Row・Stackを初心者向けに解説
生徒
「Flutterで画面を縦や横に並べたいときって、どうすればいいんですか？」
先生
「Flutterでは、ColumnやRowというウィジェットを使えば、縦や横に簡単に要素を並べられますよ。」
生徒
「あと、複数のウィジェットを重ねて表示したいこともあるんですけど、それはできますか？」
先生
「その場合はStackというウィジェットが便利です。今回はFlutterの基本レイアウトウィジェットの使い方を見ていきましょう！」
1. Flutterのレイアウトウィジェットとは？
Flutter（フラッター）では、ユーザーインターフェース（UI）を構築するためにレイアウトウィジェットを使用します。画面に文字やボタンを並べたり、重ねたりするために必要不可欠な機能です。Flutterのレイアウトウィジェットには様々な種類がありますが、特にColumn、Row、Stackの3つは初心者が最初に覚えるべき基本中の基本です。
2. Columnウィジェットの使い方（縦に並べる）
Columnウィジェットは、子ウィジェットを縦方向に並べたいときに使います。Flutterで画面に要素を縦並びで表示したいときには、ほぼ必ず使うウィジェットです。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Columnウィジェット')),
body: Column(
children: [
Text('上のテキスト'),
ElevatedButton(onPressed: () {}, child: Text('ボタン')),
Text('下のテキスト'),
],
),
),
);
}
}
この例では、3つのウィジェットが縦に並んでいます。childrenの中に複数のウィジェットをリスト形式で記述するだけで縦並びレイアウトが完成します。
3. Rowウィジェットの使い方（横に並べる）
Rowウィジェットは、子ウィジェットを横方向に並べたいときに使います。Columnと使い方はほぼ同じですが、方向が異なります。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Rowウィジェット')),
body: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Icon(Icons.star),
Icon(Icons.favorite),
Icon(Icons.home),
],
),
),
);
}
}
mainAxisAlignmentプロパティで横方向の配置を調整することも可能です。ここではアイコンを均等に配置しています。
Flutterを「実務レベル」で使えるようになりたい人や、 iPhone / Android両対応アプリ開発の流れをまとめて学びたい人には、 定番の実践書がこちらです。
Flutter実践開発をAmazonで見る※ Amazon広告リンク
4. Stackウィジェットの使い方（重ねて表示）
Stackウィジェットは、複数のウィジェットを重ねて表示したいときに使用します。たとえば、背景画像の上にテキストを載せるようなレイアウトに向いています。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Stackウィジェット')),
body: Stack(
children: [
Container(
width: double.infinity,
height: 200,
color: Colors.blue,
),
Positioned(
top: 50,
left: 20,
child: Text('重ねたテキスト', style: TextStyle(color: Colors.white, fontSize: 24)),
),
],
),
),
);
}
}
Positionedウィジェットを使えば、重ねた要素を細かく配置できます。Stackの順序は、上に書いたものほど下に表示されます。
5. Column・Row・Stackの違いを図解的に理解しよう
それぞれのウィジェットは以下のように使い分けます：
- Column：縦方向に整列したいとき
- Row：横方向に並べたいとき
- Stack：ウィジェットを重ねたいとき
たとえば、ログイン画面のように「タイトル」「入力欄」「ボタン」を縦に並べたいならColumn、SNSの投稿一覧でアイコンやテキストを横並びにしたいならRow、背景画像の上にテキストを置きたいならStackを使うと効果的です。
6. Flutter初心者が気をつけるべきレイアウトの落とし穴
Flutterでは、レイアウトウィジェットの入れ子構造が深くなりすぎると可読性が低下しやすくなります。また、ColumnやRowでウィジェットが画面外にはみ出るとエラーになることがあります。
そのようなときは、SingleChildScrollViewでスクロール可能にしたり、ExpandedやFlexibleを使ってサイズを調整することが大切です。
7. よく使われる組み合わせレイアウト
Flutterの開発では、Column＋Row、Stack＋Positionedのように複数のウィジェットを組み合わせてレイアウトを組み立てます。以下はColumnとRowの組み合わせ例です：
Column(
children: [
Text('上部のテキスト'),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Icon(Icons.thumb_up),
Icon(Icons.thumb_down),
],
),
Text('下部のテキスト'),
],
)
このように、入れ子にして自由自在にレイアウトできるのがFlutterの魅力です。柔軟な画面構成ができるため、慣れてくるととても強力な表現が可能になります。
この記事を読んだ人からの質問
