[플러터] 시작하기, 위젯이란?

ho's·2022년 8월 12일
0

🎫 플러터를 설치해보자

⚽ 시작이 반이다

많은 시간에 거쳐서 드디어 플러터 설치를 했다.

Windows power shell 에 들어가 flutter doctor 명령어를 입력 했을때 위와 같이 모두 초록색 check가 되었다!

여기서 flutter 플러그인도 설치하자.

SDK를 설정해주자. 처음 git을 통해 등록한 flutter의 설치 위치를 저장하면 된다.

티라미슈를 설치하고, 실행을 하면 아래와 같이 화면이 뜬다.

위젯이란?

  • 독립적으로 실행되는 작은 프로그램
  • 주로 바탕화면 등에서 날씨나 뉴스, 생활정보 등을 보여줌
  • 그래픽이나 데이터 요소를 처리하는 함수를 가지고 있음.

flutter에서 위젯이란?

  • UI를 만들고 구성하는 모든 기본 요소단위
  • 눈에 보이지 않는 요소들까지 위젯이라고 한다.(column, center, padding 등)
  • 즉, 플러터는 모든 것이 위젯이다.

아직 잘 와닿지 않는다.


위의 책의 내용을 바탕으로 위젯에 대해 좀 더 알아보자.

위와 같은 레고가 있다고 하자. 우리에게 위 같은 레고를 만들어야 하는 임무가 주어졌다.
어떻게 시작할지 막막하지만 아래와 같은 계획을 세워보도록 하자.

  1. 만들 결과물을 떠올린다. 전체적으로 떠올리자.
  2. 한 번에 만들 수 없는 복잡한 프로젝트임을 깨닫는다.
  3. 프로젝트를 두 다리, 왼 팔, 오른팔, 몸통, 왼손에 쥘 검, 오른손에 쥘 검, 투구, 망토, 머리 등의 부분으로 나눈다.
  4. 각 부분도 여전히 복잡하다는 점을 깨닫는다.
  5. 각 부분을 다시 더 작은 부분으로 나눈다.
  6. 각 부분이 자신과 다른 팀원이 이해하고, 만들고, 보수하기 쉬울 만큼 단순해질 때까지 4와 5의 과정을 반복한다.
  7. 단순해진 각 부분을 만든다.
  8. 단순한 부분을 합쳐서 더 크고 복잡한 부분으로 만든다.
  9. 전체 프로젝트가 만들어질 때까지 7과8의 과정을 반복한다.

위와 같은 과정을 컴포넌트화 라고 한다. 플러터 세계에서는 이렇게 분해한 부분 즉 컴포넌트를 위젯이라고 한다. 플러터 개발자는 "위젯이 전부다"라고 말한다. 즉 구글이 플러터와 함께 제공하는 위젯을 사용하게 될 것이라는 뜻이다.

모든 앱은 두 부분으로 나눠서 생각할 수 있다.
1. 동작 - 소프트웨어가 하는 일이다. 데이터를 읽고 쓰고 처리하는 모든 비지니스 로직이 여기 해당한다.
2. 표현 - 소프트웨어를 표현하는 방법이다. 버튼, 텍스트 박스, 레이블 같은 사용자 인터페이스에 해당한다.

유일하게 플러터만 동작과 표현이 두 개의 언어로 나뉘지 않고 하나의 언어로 합쳐져 있다.

위젯의 종류

  • Stateless Widget
  • Stateful Widget
  • Inherited Widget

Stateless와 Stateful의 일반적인 의미

Stateless Widgets 상태가 없는 정적인 위젯

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

Stateful Widgets 계속 움직임이나 변화가 있는 위젯

  • 사용자의 interaction에 따라서 모양이 바뀜
  • 데이터를 받게 되었을 때 모양이 바뀜

플러터 위젯 트리

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


참고영상 - https://www.youtube.com/watch?v=jI4kqLdqXic&list=PLQt_pzi-LLfpcRFhWMywTePfZ2aPapvyl&index=6

profile
그래야만 한다

0개의 댓글