Flutter의 Padding EdgeInsets (all, only, symmetric차이점)

이번에는 Padding에 대해서 조금 알아보자

Padding을 사용했을 경우, padding을 얼마나 줄 것인가에 대해서다

padding을 줄때 예를 들면 아래처럼 사용한다

padding: EdgeInsets.all(10)

 

1. 예제 코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

 

practice_page.dart

import 'package:flutter/material.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        leading: Icon(Icons.car_crash),
        title: Text("Appbar"),
        actions: [
          Icon(Icons.search),
        ],
      ),
      body: Padding(
        padding: EdgeInsets.all(0),
        child: Center(
          child: Container(
            decoration: BoxDecoration(color: Colors.red),
          ),
        ),
      ),
    );
  }
}

위의 코드를 사용해 보자, 잘보면 padding: EdgeInsets.all(0) 이 있는데 이건 0이기 때문에 전혀 Padding을 주지 않은 코드이다

이 코드를 실행 시켜서 보면

padding이 전혀 없는 빨간색을 볼 수가 있다

 

2. EdgeInsets.all

all 부분에 숫자를 넣어 보도록 해보자

이렇게 위아래양옆에 여백이 생기는 것을 볼 수 있다

 

3. EdgeInsets.only

이번에 only로 바꿔 본다

only로 바꿔보았더니, 파라미터(top, bottom, left, right)로 들어갈만한 게 있다

top: 20

top이 제일 만만하니 top을 넣어보았더니

top부분에 여백이 생긴것을 볼 수가 있다.

나머지는 안해봐도 오른쪽 왼쪽 맨 밑에 여백을 줄 수 있는 방법을 알겠다

 

4. EdgeInsets.symmetric

symmetric로 바꿔보았더니, 다른 파라미터를 넣을 수 있다. 

 

한번 차이점을 보도록 하겠다

4-1. vertical

 

top과 bottom에 여백이 생긴다

 

4-2. horizontal

left와 right에 여백이 생긴다

 

5. 정리

all: top, bottom, left, right에 여백이 생김

    파라메터: 숫자형

only: top, bottom, left, right를 하나이상 여백을 줄 수 있음

    파라메터: top, bottom, left, right

symmetric: (top, bottom), (left, right) 묶음으로 여백을 줄 수 있음

    파라메터: vertical, horizontal