3. 위젯의 종류

Container

빈 위젯, 다양한 속성을 가질 수 있는 위젯으로

직사각형의 가상 요소를 만든다.

BoxDecoration으로 테두리, 배경색, 그림자등을 꾸밀 수 있으며

Margin, Padding, Constraint 속성으로 조정할 수 있다.

Row, Column

콘텐츠의 수평, 수직 배치를 할 수 있게 하며

대부분의 레이아웃이 이와 조합하여 사용된다.

Children 속성에 여러 위젯을 사용할 수 있다.

• mainAxisSize : (max,min) mainAxis의 사이즈
• mainAxisAlignment : (center, start, end) 가로형 정렬
• crossAxisAlignment : (center, start, end) 세로형 정렬

Stack

Flutter는 요소 배치를 위해 배치형 위젯을 사용한다.

Stack 위젯은 children에 나열된 위젯들을 순서대로 겹칠 수 있게 한다.

html로 생각하면 이미지나 div 태그안에 글자를 표기하거나 Z-Index 를 사용한다고

생각하면 된다.

SingleChildScrollView

Column 위젯을 사용하여 위젯을 배치할 때, 화면 크기를 넘어서는 경우

스크롤을 정의할 수 있다. 모든 스크롤 위젯은 스크롤될 컨텐츠가 본 위젯

안에서 작동해야 하므로 상위 위젯에서 스크롤 위젯을 정의해야한다.

ListView, ListTile

해당 위젯 내 상호작용 할 수 있는 리스트를 표시한다.

ListView와 ListTile의 관계는 각각 HTML의 table 태그와 li 태그이며

ListView는 하나 이상의 자식 ListTile 위젯을 포함할 수 있다.

GridView

열을 지정하고, 그리드 형태로 표기하기 위한 위젯이다.

열의 숫자를 설정할 수 있는 crossAxisCount 속성을 포함한다.

AppBar

앱의 상단, 타이틀이 표기되는 AppBar에 대한 정보를 변경한다.

title, bottom, tabs 등의 속성을 포함하며, 앱바의 상태를 변경할 수 있다.

BottomNavigationBar

앱의 하단 메뉴를 구성하는 BottomNaavigationBar에 대한 정보를 변경한다.

Center

자식 위젯을 중앙으로 정렬시킬 때 사용되는 위젯이다.

Padding

자식 위젯의 안쪽 여백을 표현할 때 사용되는 위젯이다.

Padding 속성으로 EdgeInsets 속성을 지원하며, 이는 Padding 값을 나타낸다.

Align

자식 위젯의 정렬 방향을 나타낸다.

alignment 속성으로 정렬 방향을 설정할 수 있다.

SizedBox

어떤 위젯을 특정 크기로 설정하고 싶을 때 사용되는 위젯이다.

이 위젯만 배치하여 공백의 공간을 설정할 수도 있고,

자식 위젯을 배치하여 자식 위젯의 크기를 설정할 수도 있다.

Card, FlatButton, IconButton, RaisedButton

Flutter에서 사용되는 버튼, 카드 위젯들로

Button 위젯은 onPressed 속성 내 실행할 함수를 지정할 수 있다.

Text

문자열을 지정할 수 있으며, 브라우저 상에 텍스트를 표기할 수 있는

대표적인 화면 표시 위젯이다.

속성으로 style을 지정할 수 있으며, 스타일은 fontSize, fontStyle, color 등

여러 하위 속성들을 가진다.

Image

이미지를 표시할 수 있는위젯으로, 네트워크 내 인가된 파일에 대해

Asset 을 가져와 화면에 표기한다.

파일의 인가는 pubspec.ymal 파일에 기록되며, assets 항목을 통해 작성가능하다.

Icon

아이콘을 작성하기 위한 위젯으로, Image 위젯과도 비슷하지만,

리스트 내 배치나 버튼 등에 물려 사용할 때 더 활용된다.