Flutter의 기본 위젯

Flutter는 다양한 위젯들을 제공하여 복잡한 UI도 쉽게 구현할 수 있도록 도와줍니다. 이번 글에서는 Flutter의 기본 위젯들을 소개하고, 각각의 위젯들이 어떻게 사용되는지 설명하겠습니다.

 

1. Text 위젯

 

Text 위젯은 화면에 텍스트를 표시할 때 사용됩니다. 다양한 스타일과 정렬 옵션을 제공합니다.

 

Text(
  'Hello, Flutter!',
  style: TextStyle(fontSize: 24, color: Colors.blue),
)

 

위 코드는 파란색의 24 포인트 크기 텍스트 “Hello, Flutter!“를 화면에 표시합니다.

 

2. Container 위젯

 

Container 위젯은 박스 모델(box model)을 사용하여 자식 위젯을 배치, 정렬 및 스타일링할 수 있는 위젯입니다. 배경색, 테두리, 패딩, 마진 등을 설정할 수 있습니다.

Container(
  width: 100,
  height: 100,
  color: Colors.red,
)

 

위 코드는 빨간색 배경을 가진 100x100 크기의 사각형을 화면에 표시합니다.

 

3. Row와 Column 위젯

 

Row와 Column 위젯은 자식 위젯들을 수평 또는 수직으로 배치할 때 사용됩니다.

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Text('Row 1'),
    Text('Row 2'),
    Text('Row 3'),
  ],
)

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Text('Column 1'),
    Text('Column 2'),
    Text('Column 3'),
  ],
)

 

위 코드는 각각 세 개의 텍스트 위젯을 수평과 수직으로 배치합니다.

 

4. Stack 위젯

 

Stack 위젯은 자식 위젯들을 서로 겹쳐서 배치할 때 사용됩니다. 자식 위젯들의 위치를 조정하기 위해 Positioned 위젯과 함께 사용됩니다.

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

 

위 코드는 파란색 사각형 위에 빨간색 사각형이 겹쳐서 배치된 모습을 보여줍니다.

 

 

반응형

 

 

 

5. ListView 위젯

 

ListView 위젯은 스크롤 가능한 목록을 만들 때 사용됩니다. 많은 양의 데이터나 동적 데이터를 표시할 때 유용합니다.

ListView(
  children: <Widget>[
    ListTile(
      leading: Icon(Icons.map),
      title: Text('Map'),
    ),
    ListTile(
      leading: Icon(Icons.photo),
      title: Text('Photos'),
    ),
    ListTile(
      leading: Icon(Icons.phone),
      title: Text('Phone'),
    ),
  ],
)

 

위 코드는 세 개의 항목이 있는 스크롤 가능한 목록을 생성합니다. 각 항목은 아이콘과 텍스트로 구성되어 있습니다.

 

6. Scaffold 위젯

 

Scaffold 위젯은 Flutter 애플리케이션의 기본 레이아웃 구조를 제공합니다. AppBar, Drawer, BottomNavigationBar 등과 함께 사용됩니다.

Scaffold(
  appBar: AppBar(
    title: Text('Flutter Demo'),
  ),
  body: Center(
    child: Text('Hello, World!'),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
)

 

위 코드는 상단에 앱 바와 중앙에 텍스트, 그리고 하단에 플로팅 액션 버튼이 있는 기본 레이아웃을 생성합니다.

 

7. GestureDetector 위젯

 

GestureDetector 위젯은 터치 이벤트를 감지할 때 사용됩니다. 탭, 드래그, 스와이프 등의 제스처를 처리할 수 있습니다.

GestureDetector(
  onTap: () {
    print('Tapped!');
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.green,
    child: Center(
      child: Text('Tap me'),
    ),
  ),
)

 

위 코드는 녹색 사각형을 탭하면 “Tapped!“라는 메시지를 출력하는 예제입니다.

 

결론

 

Flutter의 기본 위젯들은 다양한 UI 요소를 쉽게 구현할 수 있도록 도와줍니다. Text, Container, Row, Column, Stack, ListView, Scaffold, GestureDetector 등은 Flutter 애플리케이션 개발의 기본 빌딩 블록입니다. 이러한 위젯들을 잘 활용하면 복잡한 인터페이스도 손쉽게 구현할 수 있습니다. Flutter의 강력한 위젯 시스템을 통해 효율적이고 아름다운 애플리케이션을 만들어보세요.