[Flutter] 위젯 사이 공간 주기 (Padding, SizedBox, Gap)

1. Padding 사용

1) 사용 방법

Padding은 위젯의 상위 컨테이너의 기본 축 방향에 맞게 수정을 해주어야 합니다.

Column(
	mainAxisAlignment: MainAxisAlignment.center,
	children: [
		Padding(
			padding: EdgeInsets.only(top: 16.0),
			child: ColoredRectangle(),
		),
		Padding(
			padding: EdgeInsets.only(top: 16.0),
			child: ColoredRectangle(),
		),
		Padding(
			padding: EdgeInsets.only(top: 16.0),
			child: ColoredRectangle(),
		),
	],
),

Row(
	mainAxisAlignment: MainAxisAlignment.center,
	children: [
		Padding(
			padding: EdgeInsets.only(right: 16.0),
			child: ColoredRectangle(),
		),
		Padding(
			padding: EdgeInsets.only(right: 16.0),
			child: ColoredRectangle(),
		),
		Padding(
			padding: EdgeInsets.only(right: 16.0),
			child: ColoredRectangle(),
		),
	],
),

2. SizedBox 사용

1) 사용 방법

SizedBox은 위젯의 상위 컨테이너의 기본 축 방향에 맞게 수정을 해주어야 합니다.

Column(
	mainAxisAlignment: MainAxisAlignment.center,
	children: [
		ColoredRectangle(),
        SizedBox(height: 16.0,),
		ColoredRectangle(),
        SizedBox(height: 16.0,),
		ColoredRectangle(),
	],
),

Row(
	mainAxisAlignment: MainAxisAlignment.center,
	children: [
		ColoredRectangle(),
        SizedBox(width: 16.0,),
		ColoredRectangle(),
        SizedBox(width: 16.0,),
		ColoredRectangle(),
	],
),

3. Gap 사용

1) 사용 패키지

Gap

2) 사용 방법

Gap은 위젯의 상위 컨테이너의 기본 축 방향으로 간격이 생깁니다.

Column(
	mainAxisAlignment: MainAxisAlignment.center,
	children: [
		ColoredRectangle(),
        Gap(16.0,),
		ColoredRectangle(),
        Gap(16.0,),
		ColoredRectangle(),
	],
),

Row(
	mainAxisAlignment: MainAxisAlignment.center,
	children: [
		ColoredRectangle(),
        Gap(16.0,),
		ColoredRectangle(),
        Gap(16.0,),
		ColoredRectangle(),
	],
),

Gap은 ListView와 같은 스크롤이 가능한 위젯안에서도 사용이 가능합니다.

ListView(
	children: [
		ColoredRectangle(),
        Gap(16.0,),
		ColoredRectangle(),
        Gap(16.0,),
		ColoredRectangle(),
	],
),

Gap은 MaxGap을 사용할 수 있습니다. MaxGap은 작은 공간에서 작업을 하여 오버플로우가 생기는 경우 지정된 크기에서 사용 가능한 공간만 사용하여 공간을 채웁니다.

SizedBox(
	width: 120,
	height: 440,
	child: Column(
		children: [
			ColoredRectangle(),
			MaxGap(16.0,),
			ColoredRectangle(),
			MaxGap(16.0,),
			ColoredRectangle(),
		],
	),
),