Flutter 기본 위젯

StatelessWidget

- 변수 값을 변경한다 하더라도 화면이 변경되지 않는다. 상태가 없는 위젯이기 때문이다.

- 최초 앱 실행 시 한 번만 실행된다.

 

StatefulWidget

- 변수 값을 변경하게 되면 화면이 변경된다. 상태가 있는 위젯이다.

- 앱이 실행되고 난 뒤에도 상태가 변경되면 다시 실행한다. 

- final 변수가 아닌 변경할 수 있는 일반적인 변수를 가질 수 있다. 

 

Scafflod

- 사용자에게 좋은 경험을(UX) 줄 수 있도록 플렅처에게 개발자에 제공해주는 클래스, Scaffold로 감싸는 순간 휴대폰 화면에 구조가 만들어지고 쉽게 앱을 만들 수 있다.

- MaterialApp 안에 Scaffold 구조를 가져야 한다. 

 - AppBar : 해당 화면에 대한 메뉴나 이동 버튼, 그리고 제목 같은 것들을 가지고 있다.

- body : 이 부분에 내용 및 콘텐츠를 넣으면 된다.

- FloatingActionButton : 버튼

- BottomNavigationBar : 화면을 변경 가능 

 

AppBar

- 현재 화면의 title, leading, action 영역을 포함하고 있는 막대 모양의 위젯

- action 속성을 이용하면 AppBar 오른쪽 상단 부분에 위젯을 추가할 수 있다. 

 

Column 

- 수직 방향 레이아웃 구조를 만들어 주고 child가 아닌 children 속성을 가진다. 

- child 속성을 가진 위젯은 하나의 위젯만 가질 수 있지만 children 속성을 가진 위젯은 많은 위젯을 가질 수 있다.

- 가장 width가 넓은 자식의 크기에 따라 넓이가 결정되며 기본 가로 방향 정렬은 center이다. 

- 세로로 배치가 되기 때문에 mainAxis(주축)이 세로 방향이며, crossAxis(반대축)이 가로 방향이다. 

 

Row

- 수평 방향 레이아웃 구조를 만들어 주고 child가 아닌 children 속성을 가진다. 

 

Text 

- 문자열을 담을 수 있는 위젯

 

TextFormField

- TextField와 유사하게 사용자 입력을 받을 수 있는 입력 양식이다. 다른 점은 vaildator 속성을 활용하여 유효성 검사를 가능하게 해준다. 

 

SafeArea 

- 핸드폰 기기별로 조금씩 다른 StatusBar(상태바) 영역에 padding(여백)을 넣어주는 역할을 한다.

 

Spacer 

- 위젯 사이의 간격을 조정하는 데 사용한다.

 

Padding

- 패딩(여백)은 자식 위젯 주위에 빈 공간을 만들어 준다. 

- EdgeInserts.all (전체 방향으로 여백을 줄 때 사용)

- EdgeInserts.only (4 방향 중 내가 원하는 곳만 여백을 줄 때 사용)

- EdgeInserts.symmetric ( 수직이나 수평 중 선택하여 여백을 줄 때 사용) 

 

Image

- 사진을 배치할 수 있다. 

- Image 위젯을 사용할 때는 fit 속성을 이용해야한다.

- BoxFit.contain : 원본사진의 가로 세로 비율 변화 없음

- BoxFit.fill : 원본사진의 비율을 무시하고 지정한 영역에 사진을 맞춤

- BoxFit.cover : 원본사진의 가로 세로 비율을 유지한 채로 지정한 영역에 사진을 맞춤, 장점은 사진의 비율을 유지할 수 있다는 점이고,

단점은 자신이 지정한 크기를 벗어나면 잘릴 수 있음

 

Image.network

- url 주소를 사용하여 이미지를 다운로드 한 뒤 화면에 표시할 수 있다. 

- http://picsum.photos 사이트는 이미지를 무료로 제공해준다. 이미지가 필요할 때 유용하게 활용할 수 있다. 

 

Expanded 

- 남은 위젯을 공간을 확장하여 공간을 채울 수 있도록 하는 위젯이다. 

 

SizedBox

- width 혹은 height 크기를 가지는 빈 상자이다. 

 

Container

- 빈 박스 위젯이다. 

- SizedBox 위젯과 차이점이 있다면 Container는 내부에 decoration 속성이 있어서 박스에 색상을 입히거나 박스의 모양을 바꾼다거나 테투리 선을 줄 수 있다. SizedBox 위젯은 보통 마진(Margin)을 줘야할 때 사용한다. 

- 자식이 없는 Container는 가능한 박스를 크게 만들려고 한다.

- 자식이 있는 Container는 자식의 크기에 맞게 조정된다. 

 

AspectRatio 

- 특정 종횡비로 자식 크기를 조정하는 위젯이다. 이미지를 화면에 표시할 때는 비율로 표시하는 것이 좋다.

- 레이아웃 제약에서 허용되는 가장 큰 너비를 시도한다. 위젯의 높이는 지정된 가로 세로 비율을 너비에 적용하여 결정되며 너비와 높이의 비율로 표현된다. 

 

ClipRRect

- 둥근 사각형을 사용하여 자식을 자르는 위젯이다.

- Clip은 자르다는 의미이고, R은 Round, Rect은 사각형의 의미이다.

- 사각형을 둥글게 잘라주는 위젯 

- 위젯에 shape나 decoration 속성이 없다면 CilpRRect를 이용하여 모서리에 곡선을 줄 수 있다. 

 

InkWell

- 모든 위젯을 버튼화 시켜주는 위젯이다. 

 

ListView

- 가장 일반적으로 사용되는 스크롤 위젯이다.

- 스크롤 방향으로 자식을 차례로 표시한다. 가로축, 세로축으로 스크롤 할 수 있다. 

 

GridView

- 수평방향이나 수직방향으로 고정 수의 위젯을 생성하고 반복해서 List를 출력해주는 위젯이다.

- GridView 들어올 item 개수가 동적이라면 GridView.builder를 사용해야한다.

 

Form

- 데이터 전송을 위해 여러 양식의 위젯을 함께 그룹화 해주는 컨테이너 위젯이다. 사용자 입력을 받을 수 있는 여러 입력 요소들을 감싸서 한 번에 데이터를 전송하게 해주거나, 입력 유소들의 유효성을 검사하는 데 사용된다.

- 즉, Form 위젯 안에 TextFormField를 여러 개 추가하여 사용자 입력을 받고 입력 받은 데이터를 한 번에 전송할 수 있다. 

 

Navigator

- 스택(Stack) 방식을 이용하여 여러 위젯을 관리하는 위젯이다.

- 페이지 이동 때 유용하게 사용된다.

 

Icon

- Icon을 표시해주는 위젯

- MaterialIcon or CupertinoIcon 중 원하는 아이콘을 사용할 수 있음

- 플러터가 제공하는 기본 아이콘이 아닌 다른 아이콘을 사용하길 원한다면 https://pub.dev 에서 원하는 아이콘 라이브러리를 활용할 수 있다. 

 

TabBar

- 탭의 가로 행을 표시하는 머티리얼 디자인 위젯이다.

 

TabBarView

- 현재 선택된 탭에 해당하는 화면을 표시하는 위젯 

- TabBar 위젯과 TabBarView 위젯의 controller 속성에 TabController 객체를 연결하면 TabBarView가 선택된 Tab에 따라 화면을 변경하게 된다.