Flutter 기본 정리

Scaffold에서 사용할 수 있는 주요 속성

Scaffold(
  appBar: AppBar(),                // 상단 앱바
  body: Container(),                // 메인 화면 내용
  floatingActionButton: FloatingActionButton(), // 하단 우측 플로팅 버튼
  bottomNavigationBar: BottomNavigationBar(),  // 하단 네비게이션 바
  drawer: Drawer(),                 // 좌측 메뉴바 (햄버거 메뉴)
  endDrawer: Drawer(),               // 우측 메뉴바
  persistentFooterButtons: [],       // 하단에 고정된 버튼들
  bottomSheet: BottomSheet(),        // 하단에서 올라오는 시트
  backgroundColor: Colors.white,     // 전체 배경색
  resizeToAvoidBottomInset: true,    // 키보드가 올라올 때 화면 조정 여부
  extendBody: true,                  // body를 bottomNavigationBar까지 확장할지 여부
  extendBodyBehindAppBar: true,      // body를 appBar 뒤로 확장할지 여부
)

 

주요 위젯

** 레이아웃 관련 위젯
Container() : 크기, 패딩, 마진을 설정할 수 있는 기본 박스
Center() : 자식 위젯을 중앙 정렬
Column() : 세로 방향 배치
Row() : 가로 방향 배치
Stack() : 위젯을 겹쳐서 배치
Expanded() : 남은 공간을 모두 차지하는 위젯
Flexible() : 특정 비율로 크기를 조정하는 위젯
SizedBox() : 특정 크기의 빈 공간을 제공하는 위젯

** 입력 및 버튼 관련 위젯
TextField() : 텍스트 입력 필드
ElevatedButton() : 입체감 있는 버튼
OutlinedButton() : 외곽선이 있는 버튼
TextButton() : 기본적인 텍스트 버튼
IconButton() : 아이콘을 클릭할 수 있는 버튼
FloatingActionButton() : 둥근 플로팅 버튼

** 리스트 및 스크롤 관련 위젯
ListView() : 스크롤 가능한 리스트
GridView() : 격자 형태의 리스트
SingleChildScrollView() : 스크롤 가능한 영역

** 기타 주요 위젯
Card() : 카드 스타일 UI
Divider() : 구분선
Image.asset() : 로컬 이미지 표시
Image.network() : 네트워크 이미지 표시

 

Center 파라미터

Center(
  child: Text("Hello"),
)

 

Center()는 child 속성 하나만 제공하는데, child로 다양한 위젯을 넣을 수 있음

 

child와 children의 차이점

 

• child: 단일 위젯을 받을 때 사용
• children: 여러 개의 위젯을 리스트로 받을 때 사용

child 위젯

 

① 기본적인 레이아웃 위젯
Container() : 박스 형태의 위젯
SizedBox() : 특정 크기의 빈 공간
Center() : 중앙 정렬
Padding() : 여백을 주는 위젯
Align() : 정렬 조정
Expanded() : Row나 Column에서 남은 공간을 차지하는 위젯
Flexible() : Expanded와 비슷하지만 비율 조절 가능
FractionallySizedBox() : 부모 위젯의 특정 비율을 차지하는 박스
ClipRRect() : 둥근 모서리를 가진 위젯
Transform() : 회전, 이동, 크기 조절 가능

② 텍스트 관련 위젯
Text() : 기본 텍스트
RichText() : 여러 스타일을 포함하는 텍스트
SelectableText() : 선택 가능한 텍스트

③ 이미지 및 아이콘
Image.asset() : 로컬 이미지
Image.network() : 네트워크 이미지
Icon() : 아이콘

④ 버튼 관련 위젯
ElevatedButton() : 기본 입체 버튼
TextButton() : 텍스트 버튼
OutlinedButton() : 외곽선 버튼
IconButton() : 아이콘 버튼
FloatingActionButton() : 플로팅 버튼

⑤ 입력 및 폼 관련 위젯
TextField() : 텍스트 입력
Checkbox() : 체크박스
Switch() : 스위치 토글 버튼
Slider() : 슬라이더 조절 바
Radio() : 라디오 버튼
DropdownButton() : 드롭다운 메뉴

⑥ 리스트 및 스크롤 관련 위젯
ListView() : 스크롤 가능한 리스트
GridView() : 그리드 리스트
SingleChildScrollView() : 한 개의 자식을 스크롤할 수 있는 위젯
CustomScrollView() : 커스텀 스크롤 뷰
Scrollbar() : 스크롤 바 추가

⑦ 카드 및 다이얼로그
Card() : 카드 형태의 UI
AlertDialog() : 알림창 다이얼로그
SimpleDialog() : 간단한 다이얼로그
BottomSheet() : 하단 시트

⑧ iOS 스타일 위젯 (Cupertino 위젯)
CupertinoButton() : iOS 스타일 버튼
CupertinoSwitch() : iOS 스타일 스위치
CupertinoActivityIndicator() : iOS 스타일 로딩 인디케이터
CupertinoAlertDialog() : iOS 스타일 알림창
CupertinoNavigationBar() : iOS 스타일 네비게이션 바

 

 

children 위젯 (여러 개의 위젯 리스트)

① 여러 개의 위젯을 포함할 수 있는 부모 위젯
Column() : 세로 방향으로 정렬
Row() : 가로 방향으로 정렬
Stack() : 겹쳐서 배치
Wrap() : 자동 줄 바꿈을 지원하는 가로/세로 배치
ListView() : 스크롤 가능한 리스트
GridView() : 격자 형태의 리스트
Flex() : 유연한 레이아웃 조정

② children에 들어갈 수 있는 위젯 (위 child에서 나열한 모든 위젯 가능)

예시)
Column(
  children: [
    Text("첫 번째 텍스트"),
    Text("두 번째 텍스트"),
    ElevatedButton(
      onPressed: () {},
      child: Text("버튼"),
    ),
  ],
)

 

 

Column 파라미터

Column(
  mainAxisAlignment: MainAxisAlignment.center,   // 세로 정렬 방식
  crossAxisAlignment: CrossAxisAlignment.center, // 가로 정렬 방식
  mainAxisSize: MainAxisSize.max, // Column의 크기 지정 (max: 전체 차지, min: 최소 크기)
  children: [
    Text("Item 1"),
    Text("Item 2"),
  ],
)

 

Column() 주요 파라미터

# mainAxisAlignment
 * MainAxisAlignment.start : 위쪽 정렬
 * MainAxisAlignment.center : 중앙 정렬
 * MainAxisAlignment.end : 아래쪽 정렬
 * MainAxisAlignment.spaceBetween : 요소 간 동일한 간격
 * MainAxisAlignment.spaceAround : 요소 주변에 동일한 여백
 * MainAxisAlignment.spaceEvenly : 전체를 동일한 간격으로 분배
 
# crossAxisAlignment
 * CrossAxisAlignment.start : 왼쪽 정렬
 * CrossAxisAlignment.center : 중앙 정렬
 * CrossAxisAlignment.end : 오른쪽 정렬
 * CrossAxisAlignment.stretch : 가로 길이를 최대한 늘림
 
# mainAxisSize
 * MainAxisSize.max : 최대 크기 사용
 * MainAxisSize.min : 최소 크기 사용

 

Text 파라미터

Text(
  "Hello Flutter",
  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
  textAlign: TextAlign.center,
  overflow: TextOverflow.ellipsis,
  maxLines: 2,
)

 

Text 주요 파라미터

style : 텍스트 스타일 (폰트 크기, 색상, 두께 등)
textAlign : 텍스트 정렬
maxLines : 최대 줄 수
overflow : 텍스트가 넘칠 때 처리 방식
 * TextOverflow.clip : 넘친 부분 삭제
 * TextOverflow.fade : 서서히 사라짐
 * TextOverflow.ellipsis : ...으로 표시

 

AppBar 파라미터

AppBar(
  title: Text("AppBar Title"),
  backgroundColor: Colors.blue,
  elevation: 4.0,
  leading: IconButton(
    icon: Icon(Icons.menu),
    onPressed: () {},
  ),
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {},
    ),
  ],
)

 

AppBar 주요 속성

title : 앱바의 제목
backgroundColor : 배경색
elevation : 그림자 높이
leading : 앱바의 왼쪽 아이콘
actions : 오른쪽 액션 버튼 리스트

 

 

FloatingActionButton() 파라미터

FloatingActionButton(
  onPressed: () {},
  tooltip: "Increment",
  child: Icon(Icons.add),
  backgroundColor: Colors.blue,
  elevation: 6.0,
)

 

FloatingActionButton() 주요 파라미터

FloatingActionButton() 주요 속성
onPressed : 버튼 클릭 이벤트
tooltip : 툴팁(설명) 표시
child : 버튼 내부에 넣을 위젯 (보통 Icon)
backgroundColor : 배경색
elevation : 그림자 높이

 

CupertinoButton과 같은 위젯들 (iOS 스타일 위젯)

Flutter에는 Material 디자인(안드로이드 스타일)과 Cupertino 디자인(iOS 스타일) 위젯

 

Cupertino 위젯

CupertinoButton() : iOS 스타일 버튼
CupertinoSwitch() : iOS 스타일 스위치
CupertinoActivityIndicator() : iOS 스타일 로딩 인디케이터
CupertinoAlertDialog() : iOS 스타일 알림창
CupertinoNavigationBar() : iOS 스타일 네비게이션 바
CupertinoTabBar() : iOS 스타일 탭바

 

CupertinoButton 예시

CupertinoButton(
  child: Text("Click Me"),
  onPressed: () {},
  color: Colors.blue,
)