[Flutter] 3. Flutter의 "레이아웃 및 UI 구성"

Flutter 학습: 레이아웃 및 UI 구성

Flutter는 다양한 레이아웃 위젯을 제공하여 복잡한 사용자 인터페이스를 쉽게 구성할 수 있습니다. 이번 글에서는 레이아웃 위젯, 정렬 및 정렬 위젯, 리스트 및 스크롤 위젯에 대해 알아보겠습니다.

---

1. 레이아웃 위젯: Container, Row, Column, Stack

Container: Container 위젯은 여백, 패딩, 정렬, 크기, 배경색 등을 설정할 수 있는 다목적 위젯입니다.

 

예제:

[dart]

 

Container(
  width: 100,
  height: 100,
  color: Colors.blue,
  child: Center(
    child: Text(
      'Hello',
      style: TextStyle(color: Colors.white),
    ),
  ),
)

 

 

Row: Row 위젯은 자식 위젯들을 수평으로 정렬하는 위젯입니다.

 

예제:

[dart]

 

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    Container(width: 50, height: 50, color: Colors.green),
    Container(width: 50, height: 50, color: Colors.blue),
  ],
)

 

 

Column: Column 위젯은 자식 위젯들을 수직으로 정렬하는 위젯입니다.

 

예제:

[dart]

 

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text('First'),
    Text('Second'),
    Text('Third'),
  ],
)

 

 

Stack: Stack 위젯은 자식 위젯들을 서로 겹쳐서 배치하는 위젯입니다.

 

예제:

[dart]

 

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

---

2. 정렬 및 정렬 위젯: Align, Center, Padding, Margin

Align: Align 위젯은 자식 위젯을 부모 위젯 내에서 특정 위치에 정렬할 수 있는 위젯입니다.

 

예제:

[dart]

 

Align(
  alignment: Alignment.bottomRight,
  child: Container(
    width: 50,
    height: 50,
    color: Colors.green,
  ),
)

 

 

Center: Center 위젯은 자식 위젯을 부모 위젯 내에서 중앙에 정렬하는 위젯입니다.

 

예제:

[dart]

 

Center(
  child: Text('Centered Text'),
)

 

 

Padding: Padding 위젯은 자식 위젯 주위에 여백을 추가하는 위젯입니다.

 

예제:

[dart]

 

Padding(
  padding: EdgeInsets.all(16.0),
  child: Text('Padded Text'),
)

 

 

Margin: Margin은 Container 위젯의 margin 속성을 사용하여 설정할 수 있습니다.

 

예제:

[dart]

 

Container(
  margin: EdgeInsets.all(16.0),
  color: Colors.blue,
  child: Text('Margin Container'),
)

 

---

3. 리스트 및 스크롤: ListView, GridView, SingleChildScrollView

ListView: ListView 위젯은 스크롤 가능한 리스트를 만드는 데 사용됩니다.

 

예제:

[dart]

 

ListView(
  children: [
    ListTile(
      leading: Icon(Icons.map),
      title: Text('Map'),
    ),
    ListTile(
      leading: Icon(Icons.photo_album),
      title: Text('Album'),
    ),
    ListTile(
      leading: Icon(Icons.phone),
      title: Text('Phone'),
    ),
  ],
)

 

 

GridView: GridView 위젯은 스크롤 가능한 격자 레이아웃을 만드는 데 사용됩니다.

 

예제:

[dart]

 

GridView.count(
  crossAxisCount: 2,
  children: List.generate(6, (index) {
    return Center(
      child: Text(
        'Item $index',
        style: Theme.of(context).textTheme.headline5,
      ),
    );
  }),
)

 

 

SingleChildScrollView: SingleChildScrollView 위젯은 자식 위젯이 넘칠 경우 스크롤 가능한 단일 위젯을 만드는 데 사용됩니다.

 

예제:

[dart]

 

SingleChildScrollView(
  child: Column(
    children: List.generate(50, (index) {
      return Text('Item $index');
    }),
  ),
)

---

이 글에서는 Flutter의 레이아웃 및 UI 구성에 필요한 기본적인 위젯들에 대해 알아보았습니다. Container, Row, Column, Stack을 사용하여 레이아웃을 구성하고, Align, Center, Padding, Margin을 사용하여 정렬과 여백을 설정하며, ListView, GridView, SingleChildScrollView를 사용하여 스크롤 가능한 리스트와 격자를 만들 수 있습니다. 이러한 위젯들을 조합하여 다양한 UI를 구성할 수 있습니다. Happy Coding!