【Flutter】余白(Padding、Margin、EdgeInsets、SizedBox、Spacer、Divider)設定を徹底解説！

2024年2月23日2024年4月2日

いちの

こんばんは〜
弊社ブログに辿り着いていただきありがとうございます！
株式会社メモリアインクのいちのです

この記事を読んでわかること

Flutterにおける余白設定の基本
各種ウィジェット（Padding、Margin、EdgeInsets、SizedBox、Spacer、Divider）の使い方

開発環境

Dart 3.0.0
Flutter 3.10.0

1. Padding

概要

Paddingは、ウィジェットの内側の余白を設定するために使用します。これにより、ウィジェット間の視覚的なスペースを調整することができます。

サンプルコード

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Padding(
          padding: EdgeInsets.all(20.0),
          child: Text('ここにテキストが入ります'),
        ),
      ),
    );
  }
}

サンプルコードの説明

3行目: Flutterのマテリアルデザインライブラリをインポートします。
7行目: MyAppクラスを定義し、アプリのルートウィジェットを指定します。
11行目: Scaffoldウィジェットを使用して、基本的なビジュアルレイアウト構造を提供します。
12-15行目: Paddingウィジェットを使い、全ての方向に20.0の余白を設けます。これにより、Textウィジェットが画面の端から離れ、見やすくなります。

表示確認

いちの

それでは、表示を確認してみましょ〜

2. Margin

概要

Marginは、ウィジェットの外側の余白を設定するために使用されます。ウィジェットとその周囲の要素との距離を確保することができます。

サンプルコード

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          margin: EdgeInsets.all(20.0),
          child: Text('ここにテキストが入ります'),
        ),
      ),
    );
  }
}

サンプルコードの説明

12-15行目: Containerウィジェットを使用し、marginプロパティを通じて外側に20.0の余白を設定します。これにより、Containerウィジェットが他のウィジェットや画面の端から適切な距離を保ちます。

表示確認

いちの

それでは、表示を確認してみましょ〜

3. EdgeInsets

概要

EdgeInsetsは、PaddingやMarginのような余白を指定する際に用いるクラスです。細かい余白の調整が可能になります。

サンプルコード

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
          child: Text('ここにテキストが入ります'),
        ),
      ),
    );
  }
}

サンプルコードの説明

12-15行目: EdgeInsets.symmetricを使用して、垂直方向に10.0、水平方向に20.0の余白を設定します。このように、EdgeInsetsを使うことでより詳細な余白の調整が可能です。

表示確認

いちの

それでは、表示を確認してみましょ〜

4. SizedBox

概要

SizedBoxは、特定のサイズを持つ空間を作成するために使用されます。ウィジェット間に空白を挿入したり、ウィジェットのサイズを固定する際に便利です。

サンプルコード

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SizedBox(
          width: 100.0,
          height: 100.0,
          child: Text('固定サイズのボックス内にテキスト'),
        ),
      ),
    );
  }
}

サンプルコードの説明

12-15行目: SizedBoxを使用して、幅と高さがそれぞれ100.0のボックスを作成します。このボックス内にテキストが配置されます。SizedBoxはウィジェットのサイズを明確に指定したい場合に有用です。

表示確認

いちの

それでは、表示を確認してみましょ〜

5. Spacer

概要

Spacerは、Flexウィジェット（RowやColumnなど）内で空白を作成するために使用されます。フレキシブルなスペースを追加して、ウィジェット間の距離を調整できます。

サンプルコード

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Row(
          children: [
            Text('左側'),
            Spacer(),  // この部分でスペースを作成
            Text('右側'),
          ],
        ),
      ),
    );
  }
}

サンプルコードの説明

12-17行目: Rowウィジェット内でSpacerを使用しています。このSpacerにより、’左側’と’右側’のテキストウィジェットの間にフレキシブルな空白が生まれます。Spacerはウィジェット間の距離を動的に調整したい場合に特に有効です。

表示確認

いちの

それでは、表示を確認してみましょ〜

6. Divider

概要

Dividerは、水平線を描画してコンテンツを区切るために使用されます。リストやレイアウト内での視覚的な分割に役立ちます。

サンプルコード

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            Text('上部のテキスト'),
            Divider(),
            Text('下部のテキスト'),
          ],
        ),
      ),
    );
  }
}

サンプルコードの説明

12-17行目: Columnウィジェット内でDividerを使用しています。このDividerにより、上部と下部のテキストウィジェットが視覚的に区切られます。Dividerは情報のブロックを区別したい場合に便利です。

表示確認

いちの

それでは、表示を確認してみましょ〜

7. まとめ

いかがでしたでしょうか？今回は、「余白」の設定方法にフォーカスを当てて解説していきました。「余白」の設定は、どのアプリでも実装されてるかと思いますので、とても重要なものです。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただきました。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ！

いちの

自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします。

画面に表示される文字列の配置・余白の設定の具体的な使用方法について、もっと知りたいという方は、以下個人的に自信作の記事をぜひ！