Dev Day

이미지 출처 : https://flutter-ko.dev/docs/resources/technical-overview

Flutter Widget 및 디렉토리 구조

앱을 만들기 위해 본격적으로 Flutter 공부를 시작했습니다.

구글링도 하고 Flutter 공식 홈페이지도 보고 youtube에서 강의도 보며 공부하고 있습니다.

저 같은 주니어 개발자가 Android, iOS 둘 다 섭렵하여 앱을 만드는 건 현실적으로 힘들기 때문에 크로스 플랫폼인 Flutter를 선택하여 공부하게 되었습니다. ReactNative와 Flutter 사이에서 많은 고민을 했지만 Flutter로 최종 선택했습니다.

 

일단 Flutter는 위젯(Widget)으로 구성되어 있습니다. 

 

Flutter에서 Widget이란?

일반적인 Widget

1. 독립적으로 실행되는 작은 프로그램

2. 주로 바탕화면 등에서 날씨나 뉴스, 생활정도 등을 보여줌

3. 그래픽이나 데이터 요소를 처리하는 함수를 가지고 있음

 

Flutter에서 Widget

1. UI를 만들고 구성하는 모든 기본 단위 요소 (Text, Icon, Image, Text Field, Button 등)

2. 눈에 보이지 않는 레이아웃 요소들까지 위젯 (Center, Column, Padding 등)

3. Everything is a widget 모든 것이 위젯이다

 

Flutter Widget 타입 종류

1. Stateless widgets 

2. Stateful widgets

3. Inherited widgets

 

Stateless 와 Stateful의 일반적인 의미

1. Stateful -> Value 값을 지속적으로 추적 보존

2. Stateless -> 이전 상호작용의 어떠한 값도 저장하지 않음

 

Stateless widgets vs Stateful widgets

1. Stateless widgets (상태가 없는 정적인 위젯)

2. Stateful widgets (계속 움직임이나 변화가 있는 동적인 위젯)

 

Stateless widgets

1. 스크린상에 존재만 할 뿐 아무것도 하지 않음

2. 어떠한 실시간 데이터도 저장하지 않음

3. 어떤 변화(모양,상태)를 유발하는 value값을 가지지 않음

ex) 일반적인 변화없는 텍스트나 이미지

 

Stateful widgets

1. 사용자의 interaction에 따라서 모양이 바뀜

2. 데이터를 받게 되었을 때 모양이 바뀜

ex) 로그인 Text field

 

Flutter Widget Tree

1. Widget들은 tree 구조로 정리될 수 있음

2. 한 Widget내에 얼마든지 다른 widget들이 포함될 수 있음

3. Widget은 부모 위젯과 자식 위젯으로 구성

4. Parent widget을 widget container라고 부르기도 함

 

 

위 이미지는 아주 기본적인 AppBar와 Image, TextField, Button이 있는 간단한 구조입니다.

Scaffold Widget

앱 화면과 기능을 구성하기 위한 빈 페이지를 준비해주는 위젯입니다.

본격적으로 UI와 관련된 모든 앱의 구성요소들이 사용됩니다.

 

요약

1. Flutter의 모든 것은 Widget

2. 위젯이 전혀 변화가 없으면 stateless widgets

3. 위젯의 모양이나 상태가 바뀐다면 stateful widgets

4. 위젯은 트리구조로 구성되어 있다.

 

디렉토리 구조

이 디렉토리 구조는 여러 글이나 영상을 보고 제가 생각한 구조입니다.(참고만 해주세요ㅎㅎ)

설계하는 아키텍처에 따라 디렉토리 구조는 많이 다를 겁니다.

Flutter에서는 파일, 폴더를 작명할 때 강제하는 규칙은 없습니다만 Dart의 규칙을 사용합니다.

1. 파일명은 소문자로 구성

2. 파일명의 구분자는 언더바(_)를 사용합니다.

 

아래는 테스트 프로젝트로 만들어본 디렉토리 구조입니다.

 

assets

일반적인 assets 파일들이 들어갑니다.

변경되지 않는 정적 파일들

ex) image, logo, icon 등

 

fonts

기본으로 제공하는 font가 아닌 다른 폰트를 사용하고 싶다면 이 디렉토리를 생성해 font파일을 넣을 수 있습니다.

 

lib

프로젝트를 생성할 때 만들어지는 기본 폴더이며, 거의 모든 작업이 이루어지는 공간이라고 생각하면 됩니다.

lib -> screens or pages

화면 UI에 대한 폴더, 해당 화면을 표현하는 코드들을 모아두는 공간입니다.

메인 화면, 서브 화면 등

 

lib -> widget

전체적으로 사용되는 위젯 AppBar 등 여러 화면에서 이용되는 Widget들을 모아두는 공간입니다.

 

lib -> utils

앱 전체적으로 사용되는 기능을 위한 것, 같은 내용의 코드를 반복해서 사용하는 건 정말 좋지 않은 습관이기에 앱 전체적으로 반복되는 기능들을 모아둔다고 생각하면 될 것 같습니다.

 

lib -> models or provider

앱에서 사용되는 데이터 모델이라고 생각하시면 됩니다. provider라고 명칭 하시는 분들도 많이 보였습니다.

 

새로운 프레임워크와 언어를 배우다 보니 재밌기도 하지만 어려운 점이 상당히 많습니다.

앞으로 계속 공부하고 개발하면서 추가적인 내용은 더 작성하도록 하겠습니다.

혹시 내용에 틀린 부분이 있다면 댓글로 남겨주세요!