[Flutter] Widget

IE·2023년 1월 25일
0

Flutter

목록 보기
1/7

해당 게시물은 과거에 작성한 블로그 내용을 옮겨 온 것으로, 가독성이 떨어지고 내용이 부정확할 수 있습니다.

기본 위젯

  • Text 위젯: 텍스트를 작성할 수 있는 위젯
  • Row 위젯: 행으로 작성할 수 있는 위젯
  • Column 위젯: 열로 작성할 수 있는 위젯
    • Row와 Column은 flexible한 레이아웃을 생성 가능
    • mainAxisAlignment: Column에서 사용 시 세로 정렬, Row에서 사용 시 가로 정렬
    • crossAxisAlignment: Column에서 사용 시 가로 정렬, Row에서 사용 시 세로 정렬
  • Stack 위젯: 선형적인 위젯이 아니라 위젯들을 겹쳐서 사용할 수 있는 위젯
    • Positioned 위젯을 Child로 선언하여 스택의 상하좌우 영역에 위젯을 겹칠 수 있는 위젯
  • Container 위젯: 하위 위젯의 구성 및 장식, 위치 설정이 가능한 위젯
    • 텍스트나 이미지 배경, 모양, 사이즈 지정 등에도 사용 가능
    • Single-child layout widgets의 일종
    • child가 없는 경우 페이지에서 가능한 가장 많은 공간을 차지
    • width, height, margin, padding, flutter inspector 사용 가능

위젯의 상태

  • state: 위젯이 변할 때 그 변하는 값
  • statelessWidget: 상태 변화가 없는 위젯
    • 위젯에 상태 변화가 일어나지 않을 때 statelessWidget으로 선언
  • statefulWidget: 상태 변화가 있는 위젯
    • 위젯에 상태 변화가 일어날 때 statefulWidget으로 선언
    • state(상태)라는 데이터 변화 감지
    • state가 변하면 위젯을 rebuild (재빌드)
    • setState 함수: state 변화 감지

위젯의 생명 주기

  • 위젯이 생성되면 위젯 트리에 등록이 되고 그 위젯을 화면 상에 표현
  • 위젯 트리에서 빠진 후 화면에서 사라지면 생명주기 종료
  • 생성자: 위젯 생성 시 가장 먼저 호출되는 함수
  • createState(): 상태 위젯을 관리하는 플러터 엔진의 구조적 단계인 함수
    • statefulWidget일 경우 내부적으로 호출
  • initState(): 위젯에서 사용하는 state를 초기화
    • initState()가 완료되지 않으면 위젯은 비가시적
  • build(): 화면에 표현되는 위젯을 반환 값으로 가지는 함수
    • 모든 위젯이 구현하는 함수
    • initState()가 완료되고 build()함수가 호출될 때 위젯이 가시적으로 변경
  • dispose(): 위젯이 화면 상에서 사라지게 하는 함수
    • 위젯에 메모리 할당 해제가 필요할 시 dispose() 내부에서 수행

플러터의 트리

  • 트리의 종류를 나누어서 불필요한 랜더링을 줄이고 성능 저하를 해결
  • 위젯 트리 (Widget Tree): immutable한 오브젝트들로 구성된 트리
    • 생성하고 파기하는 비용이 매우 적게 소모
    • State가 자주 변경되는 위젯 트리의 업데이트에 순간적인 대응 가능
  • 엘리먼트 트리 (Element Tree): mutable한 오브젝트들로 구성된 트리
    • 역할
      ⇒ 위젯 트리의 상태 관리
      ⇒ 렌더오브젝트 트리의 생명주기 관리
    • 위젯트리는 불변적인 트리이므로 엘리먼트 트리가 위젯 트리를 대신하여 state를 관리
    • 위젯 트리와 렌더오브젝트 트리의 중간 역할
  • 렌더오브젝트 트리 (RenderObject Tree): 렌더링을 하고 위젯을 그리는 트리
    • 플러터가 위젯을 화면에 보여줄 때 참조하는 트리
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext ctxt) {
    return MaterialApp(
      title: "Hi",
      home: Scaffold(
        appBar: AppBar(
          title: Text("Hi"),
        ),
        body: Center(
          child: Text("Hello World!"),
        ),
      ),
    );
  }
}
profile
정위블

0개의 댓글