플루터(Flutter) 패딩(Padding)

Padding?

padding은 화면 안의 요소와 테두리 사이의 여백을 의미합니다. 

예를 들어 박스 안에 글씨가 있을 때, 글씨와 테투리 사이를 띄워주는게 padding입니다. 

 

EdgeInsets

padding이나 margin을 얼마나 띄울지 정하는 속성입니다. 

속성값에 따라서, 얼마나 띄울지 정의하게 됩니다. 

아래 코드에서는 EdgeInsets.all 속성값을 사용하였습니다. 

상하좌우 모두 30px padding 값을 적용한다는 의미입니다. 

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Center(
        child:Container(
          color: Colors.black,
          child: Padding(
            padding: const EdgeInsets.all(30.0),
            child: Container(
              color: Colors.green,
              width: 50,
                height: 50,
            ),
          ),
        )
      )
    );
  }
}

EdgeInsets.symmetric

위아래, 좌우 여백을 따로 설정하는 속성입니다. 

horizontal이 좌우가 되고 vertical이 위아래가 됩니다. 

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body:Center(
            child:Container(
              color: Colors.black,
              child: Padding(
                padding: const EdgeInsets.symmetric(
                  horizontal: 50,
                  vertical: 100
                ),
                child: Container(
                  color: Colors.green,
                  width: 50,
                  height: 50,
                ),
              ),
            )
        )
    );
  }
}

 

EdgeInsets.only

원하는 방향만 골라서 여백을 줄 수 있습니다. 

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body:Center(
            child:Container(
              color: Colors.black,
              child: Padding(
                padding: const EdgeInsets.only(
                  top:50,
                  left:50,
                  right: 100,
                  bottom: 100
                ),
                child: Container(
                  color: Colors.green,
                  width: 50,
                  height: 50,
                ),
              ),
            )
        )
    );
  }
}

 

EdgeInsets.fromLTRB

Left, Top, Right, Bottom 순서로 모든 방향의 여백을 각각 숫자로 지정하는 방식입니다. 

EdgeInsets.only와 동일한 것 같지만 fromLTRB의 경우 모든 값이 필수로 지정되어야 하는게 다릅니다. 

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body:Center(
            child:Container(
              color: Colors.black,
              child: Padding(
                padding: const EdgeInsets.fromLTRB(
                  100,100,60,60
                ),
                child: Container(
                  color: Colors.green,
                  width: 50,
                  height: 50,
                ),
              ),
            )
        )
    );
  }
}