【Flutter】Padding｜余白を外側に作る

2022年12月23日2023年1月13日

こんにちは、フラメルです。

今回はPaddingを使用して余白を作る方法を紹介します。

余白を外側に作る方法

ウィジェットの外側に余白を作るにはPaddingで任意のウィジェットをラップし、paddingの引数にEdgeInsetsを渡して余白を調整します。

Padding(
  padding: EdgeInsets.all(30),
  child: Container(
    width: 200,
    height: 200,
    color: Colors.red,
  ),
),

サンプルコード

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('Flutter'),
        ),
        body: Padding(
          padding: EdgeInsets.all(30),
          child: Container(
            width: 200,
            height: 200,
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}

以上です。