레이아웃 위젯

•

Container

•

Row

•

Column

•

Expanded

•

Stack

•

Center

•

Align

•

SizedBox

•

Padding

•

ListView

•

GridView

•

Card

Container

1 개의 자식 위젯을 담을 수 있는 박스 형태의 위젯

문법

Container(
  width:      가로 크기
  height:     세로 크기 
  color:      배경색
  margin:     외부 여백
  padding:    내부 여백
  child:      자식 위젯
  decoration: 박스 스타일
)
Dart
복사

속성	설명	클래스
width	컨테이너의 가로 크기를 설정합니다.	double
height	컨테이너의 세로 크기를 설정합니다.	double
color	컨테이너의 배경색을 지정합니다.	Color
margin	컨테이너의 외부 여백을 설정합니다.	EdgeInsets
padding	컨테이너의 내부 여백을 설정합니다.	EdgeInsets
child	컨테이너 내에 배치될 자식 위젯을 지정합니다.	Widget
decoration	컨테이너의 스타일을 지정합니다.	BoxDecoration

예시

Container(
  width: 200.0,    // 가로 크기 (옵션)
  height: 100.0,   // 세로 크기 (옵션)
  color: Colors.blue,  // 배경색
  margin: EdgeInsets.all(16.0),  // 외부 여백
  padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),  // 내부 여백
  child: Text('Hello, Container!'),  // 자식 위젯
)
Dart
복사

Color

플러터에서 색상을 표현하는 클래스

•

정적 생성자를 사용하여 색상 생성

•

미리 정의된 색상 사용

정적 생성자를 사용하여 색상 생성

Color myColor = Color.fromRGBO(255, 0, 0, 1.0);  // 빨간색
Dart
복사

미리 정의된 색상 사용

Color myColor = Colors.blue;  // 파란색
Dart
복사

EdgeInsets

플러터에서 여백을 나타내는 클래스

주로, Container의 margin이나 padding 속성에 사용됩니다.

종류

생성자 및 메소드	설명
EdgeInsets.all(double)	모든 방향에 동일한 여백을 지정합니다.
EdgeInsets.fromLTRB(left, top, right, bottom)	좌, 상, 우, 하에 각각 다른 여백을 지정합니다.
EdgeInsets.symmetric({vertical, horizontal})	상하, 좌우 각각 다른 여백을 지정합니다.
EdgeInsets.only({left, top, right, bottom})	각 방향별로 다른 여백을 지정합니다.

예시

모든 방향에 동일한 여백 지정:

EdgeInsets.all(16.0)  // 모든 방향에 16.0의 여백
Dart
복사

상하좌우 각각 다른 여백 지정:

EdgeInsets.fromLTRB(10.0, 20.0, 30.0, 40.0)  // 좌, 상, 우, 하에 각각 다른 여백
Dart
복사

상하, 좌우 각각 다른 여백 지정:

EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0)  // 상하, 좌우 각각 다른 여백
Dart
복사

각 방향별로 다른 여백 지정:

EdgeInsets.only(top: 10.0, bottom: 20.0, left: 30.0, right: 40.0)  // 각 방향
Dart
복사

maring, padding 적용하기

Container(
  margin: EdgeInsets.all(16.0),  // 모든 방향에 16.0의 여백
  padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),  // 상하, 좌우 각각 다른 여백
  child: Text('Hello, EdgeInsets!'),
)
Dart
복사

BoxDecoration

상자 모양의 장식을 지정하는 클래스

Container의 decoration 속성에 주로 사용됩니다.

속성	설명
color	상자의 배경색을 지정합니다.
border	상자의 테두리(경계선)을 지정합니다.
borderRadius	상자의 모서리를 둥글게 만듭니다.
boxShadow	상자에 그림자를 추가합니다.
gradient	상자의 배경에 그라디언트를 추가합니다.
image	상자의 배경에 이미지를 추가합니다.

1. 기본 사용:

BoxDecoration(
  color: Colors.blue,  // 배경색
  border: Border.all(color: Colors.red, width: 2.0),  // 경계선
  borderRadius: BorderRadius.circular(12.0),  // 모서리의 반경
)
Dart
복사

2. 그림자 추가:

BoxDecoration(
  color: Colors.blue,  // 배경색
  border: Border.all(color: Colors.red, width: 2.0),  // 경계선
  borderRadius: BorderRadius.circular(12.0),  // 모서리의 반경
  boxShadow: [
    BoxShadow(
      color: Colors.grey,
      offset: Offset(2.0, 2.0),  // 그림자의 위치
      blurRadius: 5.0,            // 그림자의 흐림 정도
    ),
  ],
)
Dart
복사

3. 그라디언트 추가:

BoxDecoration(
  gradient: LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    colors: [Colors.blue, Colors.red],  // 그라디언트 색상
  ),
)
Dart
복사

4. 이미지 배경 추가:

BoxDecoration(
  image: DecorationImage(
    image: AssetImage('assets/background.jpg'),
    fit: BoxFit.cover,
  ),
)
Dart
복사

Row

여러가지 요소를 행방향(가로)로 배치하는 위젯

mainAxisAlignment

주축 정렬 방식 Row 의 주축은 가로방향

mainAxisAlignment	효과
start	시작 지점을 기준으로 정렬
center	가운데를 기준으로 정렬
end	끝 지점을 기준으로 정렬
spaceBetween	시작과 끝에 정렬하고, 중간을 동일한 간격으로 분배
spaceAround	각 자식의 주위에 동일한 간격으로 분배
spaceEvenly	동일한 간격으로 모든 자식을 분배

crossAxisAlignment

교차축 정렬 방식 Row 의 교차축은 세로방향

crossAxisAlignment	효과
start	위쪽을 기준으로 정렬
center	중앙을 기준으로 정렬
end	아래쪽을 기준으로 정렬

문법

Row(
  mainAxisAlignment: MainAxisAlignment.start,  // 가로 정렬 (옵션)
  crossAxisAlignment: CrossAxisAlignment.center,  // 세로 정렬 (옵션)
  mainAxisSize: MainAxisSize.max,  // Row의 크기 지정 (옵션)
  children: <Widget>[
    // 자식 위젯들
  ],
)
Dart
복사

예시

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[
    Container(color: Colors.red, width: 50.0, height: 50.0),
    Container(color: Colors.blue, width: 50.0, height: 50.0),
    Container(color: Colors.green, width: 50.0, height: 50.0),
  ],
)
Dart
복사

Column

여러가지 요소를 열방향(세로)로 배치하는 위젯

mainAxisAlignment

주축 정렬 방식 Column 의 주축은 세로방향

mainAxisAlignment	효과
start	시작 지점을 기준으로 정렬
center	가운데를 기준으로 정렬
end	끝 지점을 기준으로 정렬
spaceBetween	시작과 끝에 정렬하고, 중간을 동일한 간격으로 분배
spaceAround	각 자식의 주위에 동일한 간격으로 분배
spaceEvenly	동일한 간격으로 모든 자식을 분배

crossAxisAlignment

교차축 정렬 방식 Column 의 교차축은 가로방향

crossAxisAlignment	효과
start	좌측을 기준으로 정렬
center	중앙을 기준으로 정렬
end	우측을 기준으로 정렬
stretch	자식들을 최대 크기로 늘리고 세로로 정렬

문법

Column(
  mainAxisAlignment: MainAxisAlignment.start,  // 세로 정렬 (옵션)
  crossAxisAlignment: CrossAxisAlignment.center,  // 가로 정렬 (옵션)
  mainAxisSize: MainAxisSize.max,  // Column의 크기 지정 (옵션)
  children: <Widget>[
    // 자식 위젯들
  ],
)
Dart
복사

예시

Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[
    Container(color: Colors.red, width: 50.0, height: 50.0),
    Container(color: Colors.blue, width: 50.0, height: 50.0),
    Container(color: Colors.green, width: 50.0, height: 50.0),
  ],
)
Dart
복사

Expanded

부모 위젯에 대하여, 가지고 있는 여유 공간을 모두 차지하는 위젯

Expanded 위젯은 자식 위젯이 가지고 있는 여유 공간을 모두 차지하도록 만드는 역할을 합니다. 주로 Row 또는 Column 내에서 자식 위젯에 적용되어 사용됩니다.

예시

Row(
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    Expanded(
      child: Container(color: Colors.blue),
    ),
    Container(width: 50, height: 50, color: Colors.green),
  ],
)
Dart
복사

위 예시에서 Expanded는 파란색 컨테이너가 나머지 가로 공간을 모두 차지하도록 합니다.

Stack

자식 위젯들을 겹쳐서 배치하는 위젯

Stack 위젯은 자식 위젯을 겹치게 배치할 때 사용됩니다. 각 자식 위젯은 위치 및 크기를 지정하여 쌓일 수 있습니다.

예시

Stack(
  children: [
    Positioned(
      top: 10,
      left: 10,
      child: Container(width: 50, height: 50, color: Colors.red),
    ),
    Positioned(
      top: 20,
      left: 20,
      child: Container(width: 50, height: 50, color: Colors.blue),
    ),
  ],
)
Dart
복사

위 예시에서 Stack은 빨간색과 파란색 컨테이너를 겹쳐서 표시합니다.

Center

자식 위젯을 화면의 가운데 정렬하는 위젯

Center 위젯은 자식 위젯을 화면의 가운데에 정렬합니다.

예시

Center(
  child: Container(width: 100, height: 100, color: Colors.green),
)
Dart
복사

위 예시에서 Center는 초록색 컨테이너를 화면 가운데에 정렬합니다.

Align

자식 위젯을 정해진 위치에 배치하는 위젯

Align 위젯은 자식 위젯을 정해진 위치에 배치할 때 사용됩니다. alignment 속성을 통해 위치를 조절할 수 있습니다.

속성값	설명
topLeft	좌측 상단
topCenter	상단 중앙
topRight	우측 상단
centerLeft	좌측 중앙
center	중앙
centerRight	우측 중앙
bottomLeft	좌측 하단
bottomCenter	하단 중앙
bottomRight	우측 하단

예시

Align(
  alignment: Alignment(0.5, 0.5),
  child: Container(width: 50, height: 50, color: Colors.orange),
)
Dart
복사

위 예시에서 Align은 오렌지색 컨테이너를 화면의 가로와 세로 중간에 위치하도록 합니다. Alignment 클래스의 값을 조절하여 다양한 위치로 설정할 수 있습니다.

SizedBox

고정된 크기의 공간을 생성하는 데 사용되는 위젯

주로 여백을 만들거나 정확한 크기의 상자를 만들어야 할 때 유용합니다. Container와 달리 데코레이션 없이 크기만 지정하는 간단한 위젯입니다.

문법

SizedBox(
  width: 100.0,  // 가로 크기 (옵션)
  height: 50.0,  // 세로 크기 (옵션)
  child: YourWidget(),  // 크기가 지정된 위젯 (옵션)
)
Dart
복사

예시

SizedBox(
  width: 200.0,
  height: 100.0,
  child: Container(
    color: Colors.blue,
    child: Center(
      child: Text('Hello, SizedBox!'),
    ),
  ),
)
Dart
복사

위의 예시 코드에서는 SizedBox로 크기가 200x100인 상자를 만들고, 그 안에 Container를 넣어 파란색으로 채우고 가운데에 텍스트를 배치한 예시가 있습니다. width와 height를 사용하여 크기를 지정할 수 있습니다.

Padding

자식 위젯 주위에 여백을 추가하는 위젯

문법

Padding(
  padding: EdgeInsets.all(16.0),  // 여백의 크기를 지정 (옵션)
  child: YourWidget(),  // 여백이 추가될 위젯 (필수)
)
Dart
복사

예시

Padding(
  padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 10.0),
  child: Container(
    color: Colors.green,
    child: Center(
      child: Text('Hello, Padding!'),
    ),
  ),
)
Dart
복사

위의 예시 코드에서는 Padding으로 수직으로 20.0, 수평으로 10.0의 여백을 추가한 후, 그 안에 Container를 넣어 초록색으로 채우고 가운데에 텍스트를 배치한 예시가 있습니다. padding 속성을 사용하여 여백의 크기를 지정할 수 있습니다.

ListView

스크롤 가능한 세로 목록을 만들기 위해 사용되는 위젯

ListTile

리스트 아이템을 나타내기 위해 사용되는 위젯

속성	설명	타입
leading	아이템의 시작 부분에 위치하는 위젯	Widget
title	아이템의 제목을 나타내는 텍스트 위젯	Widget
subtitle	아이템의 부제목을 나타내는 텍스트 위젯	Widget
trailing	아이템의 끝 부분에 위치하는 위젯	Widget
onTap	아이템이 탭되었을 때 실행되는 콜백 함수	void Function()
selected	아이템이 선택되었는지 여부를 나타내는 불리언 값	bool
contentPadding	아이템의 내용 주위의 여백을 지정하는 속성	EdgeInsets
enabled	아이템이 활성화되었는지 여부를 나타내는 불리언 값	bool

문법

ListView(
  children: <Widget>[
    // 리스트 아이템들...
  ],
)
Dart
복사

속성

속성	설명	타입
children	ListView에 포함될 위젯들의 목록	List<Widget>
padding	목록 주위에 추가되는 여백	EdgeInsets
shrinkWrap	리스트가 자신의 컨텐츠 크기에 맞게 축소되는지 여부	bool

예시

ListView(
  children: <Widget>[
    ListTile(
      leading: Icon(Icons.map),
      title: Text('Map'),
    ),
    ListTile(
      leading: Icon(Icons.photo),
      title: Text('Album'),
    ),
    // 추가적인 리스트 아이템들...
  ],
)
Dart
복사

GridView

그리드 형태의 아이템들을 나타내기 위한 스크롤 가능한 위젯

문법

GridView(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    crossAxisSpacing: 8.0,
    mainAxisSpacing: 8.0,
  ),
  children: <Widget>[
    // 그리드 아이템들...
  ],
)
Dart
복사

속성

속성	설명	타입
gridDelegate	그리드의 레이아웃 및 간격을 정의하는 델리게이트	SliverGridDelegate
children	GridView에 포함될 위젯들의 목록	List<Widget>
padding	그리드 주위에 추가되는 여백	EdgeInsets
shrinkWrap	그리드가 자신의 컨텐츠 크기에 맞게 축소되는지 여부	bool

예시

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    crossAxisSpacing: 8.0,
    mainAxisSpacing: 8.0,
  ),
  itemCount: 10,
  itemBuilder: (BuildContext context, int index) {
    return Card(
      child: Center(
        child: Text('Item $index'),
      ),
    );
  },
)
Dart
복사

Card

Material Design 스타일의 표면을 가지고 있는 컨테이너

문법

Card(
  child: // 카드 내용,
)
Dart
복사

속성

속성	설명	타입
child	카드 내부에 표시되는 위젯	Widget
color	카드의 배경색	Color
elevation	그림자 높이	double
shape	카드의 모양 지정	ShapeBorder

예시

Card(
  elevation: 4.0,
  child: ListTile(
    leading: Icon(Icons.album),
    title: Text('Title'),
    subtitle: Text('Subtitle'),
  ),
)
Dart
복사

https://youtu.be/9YPzSprSM40?list=PL4C2AmBC9jOY74XiuJzxe-XkvWDb91QZv