쏘니의 개발블로그

Flutter에서는 다양한 종류의 위젯을 제공하여 사용자 인터페이스를 구축할 수 있습니다. 주요 위젯들은 다음과 같은 범주로 나눌 수 있습니다.

1. 기본 위젯

Text

• 설명: 텍스트를 화면에 표시하는 위젯.
• 사용 예시:
   

Text('Hello, Flutter!')

• 레퍼런스: https://api.flutter.dev/flutter/widgets/Text-class.html

Container

• 설명: 레이아웃, 스타일, 배경색, 패딩 등을 조정할 수 있는 다목적 위젯.
• 사용 예시:
   

Container(
  padding: EdgeInsets.all(16.0),
  color: Colors.blue,
  child: Text('Hello, Container!'),
)

레퍼런스: https://api.flutter.dev/flutter/widgets/Container-class.html

Column

• 설명: 자식 위젯들을 수직으로 정렬하는 위젯.
• 사용 예시:
• 레퍼런스: https://api.flutter.dev/flutter/widgets/Column-class.html

Column( children: <Widget>[ Text('First Item'), Text('Second Item'), ], )

Row

• 설명: 자식 위젯들을 수평으로 정렬하는 위젯.
• 사용 예시:
• 레퍼런스: https://api.flutter.dev/flutter/widgets/Row-class.html

Row( children: <Widget>[ Text('First Item'), Text('Second Item'), ], )

Image

• 설명: 이미지를 표시하는 위젯.
• 사용 예시:
• 레퍼런스: https://api.flutter.dev/flutter/widgets/Image-class.html

Image.network('https://flutter.dev/images/flutter-logo-sharing.png')

Stack

• 설명: 자식 위젯을 겹쳐서 표시할 수 있습니다.
• 레퍼런스: https://api.flutter.dev/flutter/widgets/Stack-class.html

2. 입력 위젯

TextField

• 설명: 사용자가 텍스트를 입력할 수 있는 필드.
• 사용 예시:
• 레퍼런스: https://api.flutter.dev/flutter/material/TextField-class.html

TextField( decoration: InputDecoration( labelText: 'Enter your name', ), )

RaisedButton (Deprecated), ElevatedButton

• 설명: 클릭할 수 있는 버튼 위젯.
• 레퍼런스: https://api.flutter.dev/flutter/material/ElevatedButton-class.html

ElevatedButton( onPressed: () {}, child: Text('Click Me'), )

Checkbox, Radio, Switch

• 설명: 체크박스, 라디오 버튼, 스위치
• 레퍼런스:
• Checkbox: https://api.flutter.dev/flutter/material/Checkbox-class.html
• Radio: https://api.flutter.dev/flutter/material/Radio-class.html
• Switch: https://api.flutter.dev/flutter/material/Switch-class.html

Checkbox( value: true, onChanged: (bool? value) {}, )

3. 레이아웃 위젯

Padding

• 설명: 자식 위젯에 패딩을 추가하는 위젯.
• 사용 예시:
• 레퍼런스: https://api.flutter.dev/flutter/widgets/Padding-class.html

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

Center

• 설명: 자식 위젯을 중앙에 배치하는 위젯.
• 레퍼런스: https://api.flutter.dev/flutter/widgets/Center-class.html

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

Expanded

• 설명: 자식 위젯이 남은 공간을 차지하도록 하는 위젯.
• 레퍼런스: https://api.flutter.dev/flutter/widgets/Expanded-class.html

Row( children: <Widget>[ Expanded( child: Text('Expanded Text'), ), ], )

ListView

• 설명: 스크롤 가능한 리스트를 표시하는 위젯.
• 레퍼런스: https://api.flutter.dev/flutter/widgets/ListView-class.html

ListView( children: <Widget>[ ListTile(title: Text('Item 1')), ListTile(title: Text('Item 2')), ], )

4. 네비게이션 위젯

Navigator

• 설명: 화면 전환을 관리하는 위젯.
• 레퍼런스: https://api.flutter.dev/flutter/widgets/Navigator-class.html

Navigator.push( context, MaterialPageRoute(builder: (context) => SecondPage()), )

Drawer

• 설명: 앱의 사이드 메뉴를 제공하는 위젯.
• 레퍼런스: https://api.flutter.dev/flutter/material/Drawer-class.html

Drawer( child: ListView( padding: EdgeInsets.zero, children: <Widget>[ DrawerHeader( child: Text('Drawer Header'), decoration: BoxDecoration( color: Colors.blue, ), ), ListTile( title: Text('Item 1'), onTap: () {}, ), ], ), )

5. 애니메이션 위젯

AnimatedContainer

• 설명: 애니메이션 효과를 주는 컨테이너.
• 레퍼런스: https://api.flutter.dev/flutter/widgets/AnimatedContainer-class.html

AnimatedContainer( duration: Duration(seconds: 1), color: _color, child: FlutterLogo(size: 75), )

FadeTransition

• 설명: 투명도 애니메이션을 적용하는 위젯.
• 레퍼런스: https://api.flutter.dev/flutter/widgets/FadeTransition-class.html

FadeTransition( opacity: _animation, child: FlutterLogo(size: 100.0), )

머티리얼 디자인 위젯

a. Scaffold

• 설명: 기본적인 머티리얼 디자인 레이아웃 구조를 제공합니다.
• 문서: https://api.flutter.dev/flutter/material/Scaffold-class.html

b. AppBar

• 설명: 앱 상단에 표시되는 앱 바를 구현합니다.
• 문서: https://api.flutter.dev/flutter/material/AppBar-class.html

c. FloatingActionButton

• 설명: 화면 위에 떠 있는 동그란 버튼을 생성합니다.
• 문서: https://api.flutter.dev/flutter/material/FloatingActionButton-class.html

레퍼런스

• 위젯 카탈로그: https://flutter.dev/widgets
• Flutter API 문서: https://api.flutter.dev/