[Flutter] 기본 위젯1 정리

오준석님의 생존코딩을 보고 위젯 내용을 정리합니다.

---

화면 배치

Container

- 빈 상자

: color, width, height, padding, margin

 

Column

- vertical 수직 위젯 배치

: children,  mainAxisSize(채움), mainAxisAlignment(수직 정렬), crossAlignment(수평 정렬)

 

Row

- horizontal 수평 위젯 배치

: children, mainAxisSize(채움), mainAxisAlignment(수평 정렬), crossAlignment(수직 정렬)

 

spaceEvenly와 spaceAround의 차이점은 Evenly는 위젯들의 모든 간격이 동일하고,

Around는 첫 위젯과 끝 위젯은 동일 간격의 반 만큼 띄어지고, 나머지 위젯들의 간격이 동일하다.

 

Stack

- 나열한 위젯들이 레이어가 쌓이듯 쌓이는 것(겹침 가능)

: children, 

 

SingleChildScrollView

- 스크롤 하기 위함, 감싼 위젯에 스크롤 기능을 부여함

 

ListBody

- 스크롤 가능한 영역을 가로로 꽉채움

ListBody(
	children: items.map((i) => Text('')).toList(),
)

 

 

ListView

- 리스트 뷰

: scrollDirection, children: [ListTile~], 

 

ListTile

- ListView위젯과 함께 사용되는 리스트 내부 아이템

: leading(왼쪽 배치), title, trailing(우측배치), onTap,

 

 

GridView.count

- 그리드 형태로 위젯을 나열함

: crossAxisCount: [열수], children

 

 

PageView

- 여러 페이지를 좌우 슬라이드하여 넘김

: children

 

 

AppBar, TabBar, Tab, TabBarView

- 상단 탭바

- DefaultTabController

- AppBar ( title, bottom, tabs )

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text(widget.title),
          bottom: const TabBar(
            tabs: <Widget>[
              Tab(icon: Icon(Icons.tag_faces)),
              Tab(text: 'menu',),
              Tab(icon: Icon(Icons.info), text: 'etc',)
            ],
          ),
        ),
        body: TabBarView(
          children: [
            Container(color: Colors.yellow,),
            Container(color: Colors.red,),
            Container(color: Colors.blue,),
          ],
        ),
      ),
    );
  }

 

 

BottomNavigationBar

- 하단 탭 메뉴

- 탭은 3개 이상이 기본

- Scaffold의 bottomNavigationBar위젯에 넣어서 사용

 

BottomNavigationBarItem

- BottomNavigationBar의 items 배열에 넣어서 사용

 

 

---

위치, 정렬, 크기

Center

- 화면에 정중앙정렬

 

Padding

- 안쪽 여백 넣기

: padding(EdgeInsets.all, only, symmetric)

 

Align

- 자식 위젯의 정렬 방향을 정함

: alignment(Alignment.bottomRight) - 우측 하단에 위젯 배치, child

 

Expanded

- 위젯을 확장시킴

: flex:[비율](기본 default: 1)

 

SizedBox

- 크기를 가질 수 있는 위젯

: width, height, child

 

Card

- 카드 형태, 크기가 0으로 자식 위젯의 크기에 따라 변함

: elevation(그림자 깊이 조정), shape(RoundedRectangleBorder), child

 

---

버튼

RaisedButton

- 입체감을 가진 버튼 위젯

 

FlatButton

- 평평한 버튼, 아무것도 꾸미지 일반 버튼

 

IconButton

- 아이콘으로 표시되는 버튼

 

FloatingActionButton

- 입체감 있는 버튼

 

 

---

표현, 표시

Text

- 글자 표시

: style(TextStyle(letterSpacing: 글자 간격))

 

Image

- 이미지 표시

: .network(url) 인터넷 이미지 불러오기, .asset(path) 내부 파일

assets를 사용할 경우 yaml 수정

flutter:
	assets:
    	- assets/

 

Icon

- 아이콘 표시

: icon(Icons.home)

 

Progress

- 프로그레스 인디케이터

: CircularProgressIndicator, LinearProgressIndicator

 

CircleAvatar

- 원형 위젯

: 일반 위젯은 child에서, 네트워크 이미지는 backgroundImage 파라메터로 받는다.

 

Divider

- 구분선

- 세로(:VerticalDivider)

 

VerticalDivider

- 그냥 사용하면 표출되지 않는다. 

- Row를 IntrinsicHeight위젯으로 감싼 뒤 사용해야 표출된다.