【Flutter】Padding|余白を調整する

おすすめプログラミングスクール

▶︎ 侍エンジニア
Flutterが学習できるプログラミングスクール。エキスパートコースは転職・就職サポート付き
「エキスパートコース」の詳細は無料カウセリングで相談

▶︎ DMM WEBCAMP
自社開発・受託開発企業への転職実績多数。受講開始20日以内なら無条件で全額返金。


▶︎
ポテパンキャンプ
Webエンジニア輩出No.1。開発できる開発企業への転職成功をサポート。全額返金保証あり。


▶︎
テックブースト
フリーランス特化型プログラミングスクール。スクール在籍中に案件受注から納品を体験できる。

Paddingで指定したWidgetの余白を調整する方法を紹介します。

本記事の最後に「サンプルコード」を載せています。

スポンサーリンク

目次

Paddingの使い方

Card(
  child: Padding(
    padding: EdgeInsets.all(30),
    child: HelloText(),
  ),
),

paddingではEdgeInsetsGeometryのサブクラスEdgeInsetsで余白を調整し、childで外部余白を調整するWidgetを指定します。

今回はHelloTextの外側にEdgeInsets.all(30)で余白を調整しています。

Paddingあり

Paddingなし

余白の調整|EdgeInsets

EdgeInsets.all

Card(
  child: Padding(
    padding: EdgeInsets.all(30),
    child: HelloText(),
  ),
),

EdgeInsets.allでは、上下左右全ての方向に同じだけ余白を作ります。

EdgeInsets.fromLTRB

Card(
  child: Padding(
    padding: EdgeInsets.fromLTRB(20, 50, 80, 100),
    child: HelloText(),
  ),
),

EdgeInsets.fromLTRBでは、上下左右の余白を別々に指定できます。(左、上、右、下側の順に値を渡す。)

EdgeInsets.only

Card(
  child: Padding(
    padding: EdgeInsets.only(left: 50, top: 100),
    child: HelloText(),
  ),
),

EdgeInsets.onlyでは、名前付き引数で指定したサイドに余白を作ります。

EdgeInsets.symmetric

child: Card(
  child: Padding(
    padding: EdgeInsets.symmetric(vertical: 50, horizontal: 100),
    child: HelloText(),
  ),
),

EdgeInsets.symmetricでは、名前付き引数で指定した軸(x軸、y軸)の両側に余白を作ります。

サンプルコード

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('FlutterZero'),
        ),
        body: Card(
          child: Padding(
            padding: EdgeInsets.all(30),
            child: HelloText(),
          ),
        ),
      ),
    );
  }
}

class HelloText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      'Hello World',
      style: TextStyle(
        fontSize: 30,
      ),
    );
  }
}

参考サイト

スポンサーリンク

  • URLをコピーしました!
目次