Flutter レイアウトの仕組み（基本・レスポンシブ）

Flutterは、Googleが開発したオープンソースのUIフレームワークです。
このフレームワークを使えば、モバイル、ウェブ、デスクトップアプリケーションを一つのコードベースで構築できます。

その中でも、Flutterのレイアウトシステムは特に重要です。
柔軟で強力なUI設計を可能にするためです。

この記事では、以下の内容を解説します。

Flutterレイアウトの基本概念
実用的なコード例
ベストプラクティス
最新のトレンド

Flutter レイアウトの基本概念

Flutterのレイアウトシステムは、ウィジェットを基本単位として構成されています。
ボタン、テキスト、画像など、すべてがウィジェットとして表現されます。

レイアウトは、以下の3つの主要な概念に基づいています。

親子関係

ウィジェットはツリー構造で配置されます
親ウィジェットが子ウィジェットを包含します
親ウィジェットは子ウィジェットの配置やサイズを決定します

制約とサイズ

親ウィジェットは子ウィジェットに制約を与えます
子ウィジェットはその制約内で自身のサイズを決定します

このプロセスは2つのステップで行われます。

親から子への制約の伝播
子から親へのサイズの報告

レイアウトビルダー

LayoutBuilderウィジェットを使用します
親ウィジェットのサイズに応じて動的にレイアウトを構築できます
これにより、レスポンシブデザインが可能になります

実用的なコード例

基本的なレイアウト

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(
  home: Scaffold(
    appBar: AppBar(title: const Text('Flutter Layout Example')),
    body: Center(
      child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        const Text('Hello, Flutter!'),
        const SizedBox(height: 20),
        Container(
        color: Colors.blue,
        width: 100,
        height: 100,
        child: const Center(child: Text('Box')),
        ),
      ],
      ),
    ),
    ),
  );
  }
}

レスポンシブレイアウトの例

import 'package:flutter/material.dart';
void main() {
  runApp(const ResponsiveLayout());
}
class ResponsiveLayout extends StatelessWidget {
  const ResponsiveLayout({super.key});
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth > 600) {
          return const WideLayout();
        } else {
          return const NarrowLayout();
        }
      },
    );
  }
}
class WideLayout extends StatelessWidget {
  const WideLayout({super.key});
  @override
  Widget build(BuildContext context) {
    return Row(
      textDirection: TextDirection.ltr,
      children: [
        Expanded(
          flex: 2,
          child: Container(color: Colors.blue),
        ),
        Expanded(
          flex: 3,
          child: Container(color: Colors.green),
        ),
      ],
    );
  }
}
class NarrowLayout extends StatelessWidget {
  const NarrowLayout({super.key});
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          height: 200,
          color: Colors.blue,
        ),
        Container(
          height: 300,
          color: Colors.green,
        ),
      ],
    );
  }
}