Flutter Widget

이동완·2024년 2월 3일

Widget flutter

프로젝트 공부

목록 보기

5/6

Flutter에게 UI란?

상당히 중요한 요소
Flutter가 각광받는 이유가 하나의 소스코드로 수려한 JUI를 여러 Platform에 출력할 수 있기 때문
UI가 사용하는 이유의 70~80%의 비중을 차지한다고 해도 과언이 아닐정도

Flutter UI에서 Widget이란?

UI의 가장 기본적인 단위
간단한 블록부터, 텍스트 입력 창, 화면 내 특정 요소간의 간격 조차 Widget으로 관리됨
기본 SDK의 Widget만 해도 상당히 많을 뿐더러, pub.dev를 통해 제공되는 오픈소스 Widget을 모두 더하면 상당히 많은 수의 Widget이 있음

Widget Tree

Widget을 조합해서 사용하는 방식에 따라 전혀 다른 UI 를 만들어 낼 수도 있고, 한 화면에서 만들어 뒀던 Widget을 다른 화면에서 그대로 가지고 와 사용하는 것도 가능
이런 Widget들 간의 관계를 나타낸 형태를 Widget Tree 라고 말함

Widget example Code

가장 기본적인 위젯 코드로써 폰트 사이즈와 컬러를 설정하고 폰트가 출력되는 위치를 설정하는 등의 기본 설정에 대한 코드이다.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: TestWidget(),
      ),
    ),
  );
}

class TestWidget extends StatelessWidget {
  const TestWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Center(
        child: Text(
          'Hello, Flutter',
          style: TextStyle(
            fontSize: 40,
            color: Colors.black,
          ),
        ),
      ),
    );
  }
}

코딩 결과

Hot restart와 Hot reload

Dart언어의 언어적 특징을 사용해 빠른개발을 위해 위의 기능을 제공하고 있다.

JIT 컴파일러를 활용하여, 시간이 오래 걸리는 컴파일 과정을 거치지 않아도 코드의 변경사항을 즉시 반영할 수 있다.

Hot restart

앱을 재시작 하는 형태
호라용시 앱의 모든 상태 초기화, 앱의 코드 변경 사항을 반영 가능

Hot reload

앱을 재실행 하지는 않지만, 코드의 변경 사항을 반영하는 기능
앱의 상태를 유지한 상태로 코드의 수정사항을 확인하여 더욱 빠른 개발을 할 수 있음

주의사항

재 컴파일 후 빌드하는 것이 아니기 때문에 앱의 기초가 되는 네이티브 코드의 수정이나, 라이브러리나 Asset의 추가 등의 상황에는 정상적으로 작동 X
지나치게 많은 코드의 변경사항이 있을 경우 Reload/Restart순으로 실행중인 프로세스가 상위 재시동을 요청
추후 상태를 관리하는 개발 단계에 도달 시, 해당 기능을 사용 할 때 주의를 요하게 될 수도 있음