APP/Dart & Flutter

[Flutter] Flutter 프로젝트 구조와 위젯(Widget)구조 이해

JOKUN 2022. 10. 29. 23:06

본격적으로 App을 만들기 시작하면서 전체적인 플러터 위젯의 구조를 제대로 짚고 넘어가야겠다 생각했다.

위젯 위에 위젯을 쌓고 쌓고 위젯을 또 끼워 넣고 하다 보니 기본 구조와 위젯들끼리의 상관관계를 알아야 앱 개발이 좀 더 쉬워질 것이다. 

 

 

기본 구조

플러터 프로젝트는 어떤 플랫폼에 사용할 앱을 만들지 결정하는 것에 따라 자동으로 많은 파일이 생성된다.

새 프로젝트를 생성하면 이미지와 같이 앱 개발에 필요한 파일들이 자동 생성된다.

(assets 폴더만 내가 따로 생성해주었는데, 어차피 이것도 개발하다 보면 필요한 구성이기 때문에 미리 생성해둬도 좋다.)

 

프로젝트 구성 요소

안드로이드와 ios는 이름만 들어도 대충 어떤 기능인지 구분이 된다.

android : 안드로이드 프로젝트 관련 파일

ios : ios 프로젝트 관련 파일 

lib : 플러터 앱의 소스를 작성하는 영역 (main.dart 파일)
      실제로 이 폴더 하단에 components, page등등 앱 개발에 필요한 웬만한 UI파일들이 여기서 작업된다.

test : 테스트 코드 파일 

.metadate : Flutter SDK 정보

.packages : Flutter SDK 패키지 정보

pubspec.lock : pubcpec.yaml 파일에 적용된 패키지 위치

pubspec.yaml : 프로젝트의 사용환경 버전, 라이브러리 등을 정의해서 사용함 (패키지, 이미지 폰트 등을 설정하는 파일)

 

기본 프로젝트 코드 호출 순서

코드의 실행 흐름은 이렇게 진행 된다.

main 메소드 ➡️ MyApp<StatelessWidget> ➡️ MyHomePage<StatefulWidget> ➡️ _MyHomePage<State<MyHomePage>>

 

 

 

Flutter에서 Widget이란?

  • 1. UI를 만들고 구성하는 모든 기본 단위 요소
    ex) Text, Icon, Image, Text field, Button 등 
  • 2. 눈에 보이지 않는 요소들까지 위젯
    ex) Center, Padding, Colums 등

즉, 플러터에서는 모든 것이 위젯이라 할 수 있다.

위젯들이 쌓여서 만들어지는 것이 App ! 

 

 

Types of Widget 

Widget들은 tree구조로 정리된다.
한 widget내에 얼마든지 다른 widget들이 포함될 수 있다.
widget은 부모 위젯과 자식 위젯으로 구성된다.
parent widget을 widget container라고 부르기도 한다.

 

 

위젯에는 크게 3가지 위젯이 있다.

  • Stateless Widget : 상대가 없는 정적인 위젯
    이전 상호작용의 어떠한 값도 저장하지 않음
  • Stateful Widget : 계속 움직임이나 변화가 있는 위젯
    Value 값을 지속적으로 추적 보존
  • Inherited Widget : 위젯 트리 자식으로 정보를 확장할 수 있게 하는 위젯
    일종의 상태 관리 기술이며, 변경이 발생하면 등록된 빌드 참조를 알린다.

 

Stateless Widge

  1. 스크린상에 존재만 할 뿐 아무것도 하지 않음
  2. 어떠한 실시간 데이터도 저장하지 않음
  3. 어떤 변화(모양, 상태)를 유발시키는 Value 값을 가지지 않음

 

예를 들면 앱바 타이틀이나 이미지 같은 것이 있다. 

노란 박스가 모두 해당됨! 

(상단에 이미지 에러 뜨는 것은 코드 작성해놓고 이미지를 따로 추가 안 해놔서 생기는 오류니 대충 이미지가 들어갔다고 생각하고 skip)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Stateful Widget

  1. 사용자의 intetaction에 따라서 모양이 바뀜
  2. 데이터를 받게 되었을 때 모양이 바뀜

 

예를 들면 저렇게 왼쪽 이미지와 같이 입력 값을 받는 위젯이나,

체크 박스 같이 사용자가 어떠한 액션을 취하면

UI 모양에 변화가 생기는 것들을 말한다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Widget 구조

 

https://flutter-ko.dev/docs/development/ui/layout

 

  • my App - 커스텀 위젯 (이름 변경 가능), StatelessWidget으로 만들어야 함 
  • materialApp - 전체 앱을 감싸고 있는 위젯, 플러터 SDK에서 제공하는 위젯이라고 하는 모든 것을 사용 가능함 (반드시 아규먼트를 가지고 있어야 한다)
  • MyHomePage - 커스텀 위젯 (이름 변경 가능), 여기서부터 본격적으로 앱의 디자인과 기능이 만들어짐
  • Scaffold - 아주 중요한 위젯, 앱 화면 기능을 구성하기 위한 빈 페이지 위젯 본격적으로 UI로서 모든 구성 요소가 들어감 이미지, 버튼, 텍스트, cneter, column, padding 등
  • App Bar - 앱 화면의 가장 상단에 위치하는 앱바부터 디자인이 가능해짐 (여기 안에는 title로 쓸 수 있는 text위젯이 있음)

<app bar 밑으로 body부분에 해당>

Center - 모든 구성 요소들을 화면의 중앙에 배치하도록 하는 것

   ㄴColimn - center 안에서 요소들을 세로로 배치함

      ㄴ이미지 위젯, 텍스트 위젯, 버튼 위젯

 

클로징 레이블 : flutter에서는 여러 위젯들을 나열하면서 코딩하기 때문에 알아보기 쉽게 자동으로 위젯의 끝을 알려주는 기능이 있다. (주석으로 자동 처리됨)

 

 

 

 

 

출처 & 참고 영상 : https://youtu.be/IcRhLBAfb0M

https://youtu.be/jI4kqLdqXic