[Flutter] 위젯이란 무엇인가?

김근재·2024년 3월 26일

dart flutter

[Flutter] 시리즈

목록 보기

3/10

위젯의 개념

위젯은 플러터 앱의 모든 시각적 요소를 표현합니다.

Button, Text, Image 등 사용자 인터페이스의 모든 요소는 Widget로 표현됩니다.
flutter는 모든것이 Widget요소입니다.

위젯의 종류

플러터에서는 크게 두 가지 위젯을 사용한다.

1. StatelessWidget

한 번 그려진 후에는 변경되지 않는 위제입니다.
앱의 로고 이미지나 정적인 텍스트를 표시하는 데 사용됩니다.

 StatelessWidget 
 -Text
 -Image
 -Container
 -Row
 -Column
 -ListView
 등등

이 상속 트리에서 StatelessWidget은 최상위 부모 클래스입니다.

Object
ㄴDiagnosticable
    ㄴDiagnosticableTree
        ㄴWidget
          ㄴStatelessWidget
               ㄴText

Text에 대해서 좀 더 자세하게 보시면 아래와 같습니다.
Object: 모든 플러터 객체의 기본 클래스입니다.
Diagnosticable: 진단 정보를 제공하기 위한 추상 클래스입니다.
DiagnosticableTree: 진단 정보를 트리 구조로 제공하기 위한 추상 클래스입니다.
Widget: 플러터의 위젯을 나타내기 위한 추상 클래스입니다.
StatelessWidget: 상태를 가지지 않는 위젯을 나타내기 위한 추상 클래스입니다.
Text: 텍스트를 나타내는 위젯입니다. 주어진 텍스트를 화면에 표시할 수 있습니다.

2. StatefulWidget

상태를 가지고 있으며, 상태가 변경될 때마다 UI가 업데이트 됩니다.
사용자의 입력 상태에 따라 바뀌는 버튼, 폼 필드가 있습니다.

  StatefulWidget
 - TextButton
 - IconButton
 - Checkbox
 - Radio
 - TextFormField
 - DropdownButton

이 상속 트리에서 StatefulWidget은 최상위 부모 클래스입니다.

StatefulWidget을 상속하는 다양한 클래스들이 있으며 여기에는
TextButton, IconButton, Checkbox, Radio, TextFormField, DropdownButton 등의 클래스가 포함됩니다.

그리고 TextButton 에 대해서 좀 더 자세하게 보시면 아래와 같습니다.

Object
	ㄴDiagnosticable
       ㄴDiagnosticableTree
         ㄴWidget
            ㄴStatefulWidget
                ㄴMaterialButton
                   ㄴTextButton

Object: 모든 플러터 객체의 기본 클래스입니다.
Diagnosticable: 진단 정보를 제공하기 위한 추상 클래스입니다.
DiagnosticableTree: 진단 정보를 트리 구조로 제공하기 위한 추상 클래스입니다.
Widget: 플러터의 위젯을 나타내기 위한 추상 클래스입니다.
StatefulWidget: 상태를 가지는 위젯을 나타내기 위한 추상 클래스입니다. 내부적으로 State 객체를 가집니다.
MaterialButton: 마테리얼 디자인 스타일을 가지는 버튼 위젯을 나타냅니다. TextButton은 MaterialButton의 하위 클래스입니다.
TextButton: 텍스트를 보여주고 사용자 입력에 반응하는 버튼 위젯입니다. 일반적으로 눌렀을 때 어떤 작업을 수행하기 위해 사용됩니다.

화면을 배치하는 레이아웃

Scaffold() 위젯 이란?

flutter 앱에서 가장중요한 부분입니다.
앱의 상단 중단 하단으로 나누어 주는 위젯입니다.

appBar: 상단
body: 중단
bottomNavigationBar: 하단

Row() 위젯과 Column() 위젯

Row() 위젯은 가로 정렬입니다.

Column() 위젯은 세로 정렬입니다.

Row()와 Column() 위젯 안에 쓸 수 있는 명령어를 소개하겠습니다.

mainAxisAlignment: 파라미터로 간격 조절이 가능

-MainAxisAlignment.spaceEvenly // 모든 여백 동일하게 배치
-MainAxisAlignment.spaceBetween // 좌우 끝에 우선 배치
-MainAxisAlignment.spaceAround // 모든 여백 동일, 좌우 마지막 여백은 절반만큼 줍니다.
-MainAxisAlignment.start // 시작 부분에 모이게 합니다.
-MainAxisAlignment.end // 끝 부분에 모이게 합니다.
-MainAxisAlignment.center // 중간 부분에 모이게 합니다.

ex) 예시로 center 값을 줘봤다.