Intro to widgets

Intro to widgets

docs.flutter.dev/ui/widgets-intro

핵심 아이디어: 위젯으로 UI를 구축한다

• Flutter 위젯은 React에서 영감을 얻었다
• render tree가 존재한다.

---

Widget

• widget은 current configuation과 state를 기술한다.
• widget의 description가 달라지면 flutter는 widget을 rebuild한다.
  - state가 달라지면 widget는 rebuild된다.
  - 이전 description과의 최소한의 변경점을 판별하는데 이때 render tree에 기반한다.

Hello world

code

void main() {
	runApp(
    	const Center(
        	child: Text(
            	'Hello, world!',
                textDirection: TextDirection.ltr
            ),
        ),
    );
}

• widget tree의 root : runApp()
  위 코드의 widget tree의 widget : Center, Text
• 추가적인 디자인은 MaterialApp class 이용

widget의 종류 : StatelessWidget, StatefulWidget
- 구분 기준 : whether your widget manages any state

widget의 주작업 : build() function 기술

Basic widgets

• Text : create a run of styled text

• Row, Column : create flexible layouts in both the horizontal (Row) and vertical (Column) directions.

  • 정보
    -based on the web’s flexbox layout model
  • 사용
    - Expanded : 최대한으로 확장한다(다른 children 점유하지 않는 최대공간). 여러 Expanded 사용 시 Expanded의 flex argument로 비율 조정 가능

• Stack : 중첩 배치(place widgets on top of each other in paint order)

  • 사용
    - children : Positioned 위젯
  • 정보
    - based on the web’s absolute positioning layout model.

• Container : create a rectangular visual element

  • 사용
    - can have margins, padding, and constraints applied to its size
    - children : BoxDecortion(background, a border, or a shadow)
    - can be transformed in three dimensional space using a matrix.
    

• MyScaffold : organizes its children in a vertical column

  • 위치 : At the top of the column it places an instance of MyAppBar
  • 사용
    • Expanded
      to fill the remaining space with its body, which consists of a centered message.

tip

• to use the predefined set of Material icons :
  pubspec.yaml file에서 "uses-material-design: true" 코드 삽입

  			```
        name: my_app
  			flutter:
  			  uses-material-design: true
        ```