[Flutter] 위젯(Widget) 소개

[ Everything is Widget! ]

플러터에서 화면에 보여지는 UI와 관련된 모~든 요소는 위젯으로 구성되어 있다.

플러터 제공 위젯 API

 

상태를 기반으로, 변경 사항에 알맞게 변경된 UI를 화면에 다시 그려준다.

상태가 변경될 경우 필요한 최소한의 변경 사항을 산출해서 화면을 그려낸다. 

 

위젯 

- 자식을 하나만 갖는 위젯 : Container, GestureDetector, SizedBox

- 자식을 여럿 갖는 위젯 : Column, Row, ListView

---

MaterialApp 위젯 : 머터리얼 디자인 기반의 위젯들을 사용하게 해주는 위젯

Scaffold 위젯 : 화면 전체를 차지, 레이아웃을 도와주고 UI관련 특수 기능 제공해주는 위젯

↓

 

* Flutter의 기본 설정 : 

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text(
            '주로 여기에 작성'
            ),
          ),
        ),
      ),
    );
  }
}

 

~ 자식 하나만 갖는 위젯 ~ 

Container 위젯 : 자식을 담는 컨테이너 역할 (배경색, 너비 및 높이, 테두리 등 디자인 지정 가능)

GestureDetector 위젯 : 플러터에서 제공하는 제스처 기능을 자식 위젯에서 인식하는 위젯 (탭, 드래그, 더블클릭 같은..)

SizedBox 위젯 : 높이와 너비 지정하는 위젯 

* Container 위젯과는 다르게 디자인적 요소는 적용할 수 없다. But const 생성자로 선언할 수 있다!

 

~ 자식 여러개 갖는 위젯 ~ 

Column 위젯 : children 매개변수에 입력된 모든 위젯들을 세로로 배치

Row 위젯 : chidren 매개변수에 입력된 모든 위젯들을 가로로 배치

ListView 위젯 : 리스트 구현시 사용, children 매개변수에 다수의 위젯 입력 가능 / 화면 벗어나게 될 경우 스크롤 가능해짐

---

* Children과 Child의 차이점

플러터 : 위젯 아래에 계속 위젯이 입력되는 형태로 '위젯 트리'를 구성하여 UI를 제작한다!

 

child 매개변수 : 위젯을 하나만 추가 가능

children 매개변수 : 위젯 여럿 추가 가능

 

둘을 동시에 입력받는 위젯은 존재하지 않는다!

---

• 텍스트 관련 위젯
• 제스처 관련 위젯
• 디자인 관련 위젯
• 배치 관련 위젯

---

* 텍스트 관련 위젯 : 글자를 화면에 그릴 때 사용

* 제스처 관련 위젯

• Button : 텍스트만 있는 버튼
• ElevatedButton : 입체적으로 튀어나온 느낌 나는 버튼
• OutlineButton : 테두리 있는 버튼
• IconButton : 아이콘=버튼
  
  
• GestureDetector : 하위 위젯이 제스처에 반응하도록 함 (탭, 더블탭, 길게 누르기,...)
  • onTap / onDoubleTap / onLongPress / onPanStart / onPanUpdate / onPanEnd
  • onHorizontalDragStart / onHorizontalDragUpdate / onHorizontalDragEnd
  • onVerticalDragStart / onVerticalDragUpdate / onVerticalDragEnd
  • onScaleStart / onScaleUpdate / onScaleEnd
• FloatingActionButton : 화면 오른쪽 아래에 사용자가 가장 많이 사용하는 위치
  
  

* 디자인 관련 위젯

• Container : 위젯에 배경, 패딩, 테두리 등 추가
• SizedBox : 위젯간 간격 구현 (너비, 높이)
• Padding : 하위 위젯에 패딩 적용시 사용
  • EdgeInsets.all
  • EdgeInsets.symmetric(horizontal: , vertical: )
  • EdgeInsets.only(top: , bottom: , left: , right: )
  • EdgeInsetsFromLTRB( , , , )
• SafeArea : 시스템 UI에 가려지지 않게 위젯을 화면에 그릴 때 (ex.아이폰 노치 피해서)
  
  

* 배치 관련 위젯

• Row : ↔, 가로로 위젯 배치
• Column : ↕, 세로로 위젯 배치
  
  • MainAxisAlignment.start / center / end / spaceBetween / spaceAround / spaceEvenly
  • CrossAxisAlignment.start / center / end / stretch
• Flexible : Row, Column에서 하위 위젯이 '비율'만큼 공간 차지 할 수 있게 함
• Expanded : Row, Column에서 하위 위젯이 '최대한'의 공간을 차지할 수 있게 함 (FlexFit.tight)
• Stack : 하위 위젯들을 순서대로 겹쳐줌, children에 위치한 순서대로!