카테고리 없음

Flutter 기초 위젯 정리

qkrtjddlf 2024. 11. 12. 17:33

Flutter 기초 위젯 정리
1. MaterialApp
설명: `MaterialApp`은 Flutter 앱의 루트 위젯으로, 머티리얼 디자인을 적용합니다.
• title: 앱의 제목을 설정합니다.
• theme: 앱의 테마를 설정합니다.
• home: 앱이 시작될 때 표시할 기본 위젯을 설정합니다.
2. Cupertino
설명: `Cupertino`는 iOS 스타일의 UI를 제공하는 위젯입니다. `CupertinoApp`을 사용하여 iOS 느낌의 앱을 만들 수 있습니다.
• CupertinoApp: iOS 스타일의 앱을 생성합니다.
• CupertinoPageScaffold: iOS 스타일의 페이지 레이아웃을 제공합니다.
3. Scaffold
설명: `Scaffold`는 머티리얼 디자인의 기본 페이지 레이아웃 구조를 제공합니다.
• appBar: 상단에 표시할 앱바를 설정합니다.
• body: 페이지의 주요 콘텐츠를 설정합니다.
• floatingActionButton: 플로팅 액션 버튼을 설정합니다.

4. Spacer
설명: `Spacer`는 `Flex` 위젯 내에서 남은 공간을 차지하는 데 사용됩니다.
• flex: 공간을 얼마나 차지할지 비율을 설정합니다.
5. Padding
설명: `Padding`은 자식 위젯 주위에 여백을 추가하는 데 사용됩니다.
• padding: `EdgeInsets`를 사용하여 상하좌우 여백을 설정할 수 있습니다.
6. Expanded
설명: `Expanded`는 자식 위젯이 가능한 모든 공간을 차지하도록 확장합니다.
• flex: 다른 `Expanded` 위젯과 공간을 나누는 비율을 설정합니다.
7. SizedBox
설명: 특정 크기의 상자를 만들거나 고정된 크기의 빈 공간을 생성합니다.
• width, height: 상자의 너비와 높이를 설정합니다.

8. Column
설명: 수직으로 자식 위젯들을 정렬합니다.
• mainAxisAlignment: 주 축 방향의 정렬 방식을 설정합니다.
• crossAxisAlignment: 교차 축 방향의 정렬 방식을 설정합니다.
9. AppBar
설명: 화면 상단에 위치하는 앱의 제목과 액션 버튼 등을 포함하는 바입니다.
• title: 앱바의 제목을 설정합니다.
• actions: 앱바의 오른쪽에 표시할 위젯 리스트를 설정합니다.
10. Icon
설명: 앱에서 아이콘을 표시하는 데 사용됩니다.
• icon: 표시할 아이콘을 설정합니다.
• color, size: 아이콘의 색상과 크기를 설정할 수 있습니다.
11. Container
설명: 레이아웃, 배경색, 경계선 등을 설정할 수 있는 다목적 위젯입니다.
• color: 배경색을 설정합니다.
• margin, padding: 외부 및 내부 여백을 설정합니다.
12. ListView
설명: 스크롤 가능한 목록을 만드는 데 사용됩니다.
• children: 목록에 표시할 위젯 리스트를 설정합니다.
• scrollDirection: 스크롤 방향을 설정합니다 (수평 또는 수직).

13. AspectRatio
설명: 자식 위젯의 가로세로 비율을 유지하도록 합니다.
• aspectRatio: 가로세로 비율을 설정합니다 (예: 16/9).
14. ClipRRect
설명: 자식 위젯의 모서리를 둥글게 잘라내는 데 사용됩니다.
• borderRadius: 모서리의 둥글기 정도를 설정합니다.