[Flutter] 프로젝트 구조와 Widget

 

 

 

 

 

 

플러터는 다트 언어의 프레임워크로 다트 언어로 작성한 코드를 컴파일을 통해 각 플랫폼이 인식할 수 있는 네이티브 코드로 변환하고, (Android -> Dart VM IOS -> LLVM) 각 운영체제는 컴파일 된 네이티브 코드를 실행하게 된다.

 

안드로이드, iOS 같은 모바일 애플리케이션 뿐만 아니라 데스크탑 애플리케이션과 웹 애플리케이션도 플러터로 제작할 수 있지만, 모바일 애플리케이션 부분을 플러터가 가장 원활하게 지원하고 있다. 

 

 

개발할 때 사용하는 IDE로는 vscode, Android Studio, IntelliJ 등 여러가지가 있다.

 

 

 

 

.dart_tool : 다트와 플러터가 생성한 파일이 포함된다. 스프링의 .gradle 디렉토리와 비슷한 역할을 한다.

.idea : 인텔리제이로 프로젝트 생성할 때 함께 생성되는 디렉토리이다. 프로젝트 설정 관련 파일이 저장된다.

android, macos, web... : 해당 플랫폼에 대한 코드와 리소스가 저장된다.

lib : 다트 소스코드가 저장된다. 스프링의 src 디렉토리와 같은 역할을 한다.

test : 스프링의 src/test와 같은 역할을 한다. 말 그대로 테스트.. 

.metadata : 플러터가 작동하는데 필요한 정보를 포함한다. 

.analysis_options.yml : 사용자가 코드 규칙을 설정할 수 있는 파일이다. 코드 스타일, 린트 등 정적 분석 설정을 지정한다.

pubspec.lock : Dart 패키지 매니저인 Pub가 생성한다. 프로젝트에서 사용되는 패키지의 버전 정보를 포함한다.

pubspec.yaml : build.gradle처럼 외부 패키지, 외부 라이브러리 등을 관리한다. 

 

 

 

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text("Hello World!"),
        ),
      ),
    ),
  );
}


//////

void runApp(Widget app) {
  final WidgetsBinding binding = WidgetsFlutterBinding.ensureInitialized();
  assert(binding.debugCheckZone('runApp'));
  binding
    ..scheduleAttachRootWidget(binding.wrapWithDefaultView(app))
    ..scheduleWarmUpFrame();
}

 

 

Java처럼 Dart도 메인 메서드가 있고, 플러터로 애플리케이션을 만든 경우 다트로 작성한 메인 메서드가 실행된다. (정확히는 해당 플랫폼에 적합한 언어로 변환된 메서드)

 

runApp 소스코드를 따라가보면 Widget 객체를 받아오고 있음을 확인할 수 있다.

해당 함수는 플러터가 제공하는 함수이고, 앱의 시작점을 정의하며 최상위 위젯을 그린다. (앱의 생명주기 동안 한 번만 실행된다)

 

화면을 구성할 때는 위젯을 사용한다. 

 

플러터에서는 모든 것이 위젯이라는 철학을 가지고 개발한다.

 

모든 위젯은 Widget 클래스를 상속하고, StatelessWidget과 StatefulWidget으로 구분된다.

 

1. StatelessWidget

말 그대로 상태를 가지지 않는 위젯이다. 

텍스트 위젯, 아이콘 위젯이 해당하고 const 키워드와 함께 사용해 플러터 엔진이 위젯의 재생성을 최적화한다.

 

2. StatefulWidget

상태를 가지는 위젯이다. 위젯의 생명 주기 동안 상태가 변경될 수 있다.

체크박스 위젯이나 슬라이더 위젯은 사용자의 interaction에 따라서 상태가 변한다.

 

기본적으로 위젯은 불변성을 가진다.

위젯의 상태가 변경된다는 것은 새로운 위젯을 생성하고 플러터 엔진이 새로운 위젯과 기본 위젯을 비교해 변화된 부분만 업데이트 함을 의미한다.

 

모바일 애플리케이션에서 시간에 따라서 변경되는 정보를 상태 라고 부른다.

 

규모가 작고 간단한 애플리케이션이라면 위젯이 상태를 관리할 수 있지만, 규모가 커지면 별도의 상태 관리 패키지나 솔루션이 필요할 수 있다. (Provider, Bloc 등..)

 

상태 관리의 핵심은 상태 변경의 효과적인 처리이다.

플러터는 리액티브 방식을 사용해 상태가 변경될 때 마다 UI를 업데이트한다. 

 

StatefulWidget에서는 setState 메서드로 상태를 변경하고, UI를 다시 빌드한다. 

 

플러터는 기본적으로 다양한 위젯을 기본적으로 제공하고, 제공하는 위젯들을 입맛대로 섞어서 UI를 구성할 수 있다.

위젯 개념을 익히고, 플러터가 제공하는 위젯을 적절하게 사용하자.

 

위젯마다 어떤 파라미터를 넘겨줘야 하고 어떻게 사용하는지는 모두 다르니.. 필요할 때 마다 찾아서 사용하자.

 

위의 예시처럼 코드의 가독성과 자동 정렬 기능을 제대로 활용하기 위해 파라미터와 위젯의 마지막 부분에는 comma를 붙여주자.