[FlutterFlow] 플러터플로우의 기초와 레이아웃

✔️ 플러터플로우에 대해 배워보자! 

 

FlutterFlow: 플러터플로우란?

💡 우선 플러터란??

플러터는 구글이 만든 크로스 플랫폼이다. 크로스 플랫폼에서는 하나의 코드로 여러 플랫폼에 배포할 수 있고 플러터는 하나의 코드로 iOS, Android, Web, PC까지 모두 가능하다.

플러터의 기본 철학이자 골조는 "모든 것은 위젯이다"이다.

▶ 위젯 = 레고블록, 위젯을 예쁘게 쌓아 앱을 만듦.

 

⭐️ 플러터플로우란??

플러터플로우는 No.1 하이브리드 플랫폼인 플러터를 코딩 없이 만들 수 있게 해주는 툴이다!

사용해 보면서 Xcode의 스토리보드와 비슷하다고 느꼈다. (플러터플로우가 레이아웃 잡기는 조금 더 편함)

---

플러터플로우의 장점

• 쉽고 빠르고 편함.
• 자신만의 동작을 만들 수 있고, 그것들을 붙여서 복잡한 동작을  자유롭고 유연하게 구현할 수 있다.
• 문서가 자세하고 친절하다.
• 자주 업데이트 하며 발전한다.

 

플러터플로우의 단점

• 배우는데 난이도 있지만, 완전히 자유롭지 못함.
  • 90% 까지 쉽게  만들지만, 10% 완성도 올리기 어려움.
• 자체 문제로 발목 잡힐 수 있으며, 한국 (ex - 결제)에 최적화되어있지  않다.

 

플러터플로우 사용해 보기

FlutterFlow

 

사이트에서 Create New를 클릭하면 샘플 템플릿들을 사용할 수 있다.

템플릿으로 탭들과 위젯들을 간단히 확인하고, 연습해 보기 위해 빈 프로젝트에서 개념을 익혀봤다.

 

첫 번째 탭은 Widget Palette로서, 위젯 리스트를 보고, 추가할 수 있다.

위젯을 페이지에 드래그해서 추가할 수 있고, 우측 상단 버튼을 누르면 한 페이지 내에서 Widget Pallete를 팝업처럼 보이게 설정할 수도 있다.

 

두 번째 탭은 Widget Tree로 현재 페이지가 어떤 위젯들로 구성되어 있는지를 볼 수 있다.

페이지는 최상위 위젯 하나를 가지고 있으며, 위젯들이 부모와 자식 관계로 구성되어 있다.

 

새 프로젝트 만들기

빈프로젝트를 생성하고 Theme Setting을 통해 기본적인 세팅을 추가했다.

 

디자인

Design System에서는 디자인에 대한 일반적인 것들을 설정할 수 있으며, 반응형 구분점 기준,  로딩바 모양 등을 변경할 수 있다.

Colors에서는 색상 변경이 가능하며, Typography & Icons에서 폰트 변경이 가능하다.

나는 폰트를 수정하기 위해 Pretendard 폰트를 추가했다.

 

App Settings

App Asset에서의 Splash (앱을 처음 실행했을 때 나오는 이미지), 앱 아이콘 이미지를 설정할 수 있어서 파일을 업로드해서 추가했다.

 

Nav Bar, App Bar에 대한 설정도 이 페이지에서 가능하다.

page가 2개 이상이어야 Nav Bar 사용 가능하고 스타일링과 아이콘 및 크기 조정도 가능하다.

 

위젯의 기본 개념

위젯을 추가할 때는 Widget Pallete에서 드래그해서 추가할 수 있고, Widget Tree에서 버튼을 눌러서 추가할 수 있다. 어떤 부모에 추가할지 정확하게 지정할 수 있어서 위젯 트리가 더 편리한 것 같다!

 

예를 들어 버튼을 추가할 때는 Button Text의 텍스트를 바꿔, 이름을 바꿔준 후 액션을 지정할 수 있다.

 

동작을 테스트해 보는 방법은 다음과 같다.⭐️⭐️

• Preview App은 실제로 앱이 구동되지는 않고, 겉모습만 확인할 수 있어 로딩 시간이 빠르다.
  • 애니메이션, 페이지 이동, 레이아웃 변경 내용을 확인하는데 용이하다.
• Test Mode는 테스트 모드로 빌드하며 2-3분 정도의 시간이 소요된다.
  • 마지막 사용 후 10분 이후에는 Test Mode는 세션이 종료되기에, 바뀐 내용을 반영하려면 다시 빌드해야 한다.
  • Instant Reload가 가능하여 업데이트한 내용이 빠르게 반영됨.
• Run은 실제로 앱을 빌드하며 2-4분 정도의 시간이 소요된다.
  • Run은 실제로 빌드하기에, 향후 같은 링크로 가더라도 동일하게 작동한다.
• 버전의 히스토리를 보려면 v1을 누르고 Snapshots에 돌아가고 싶을 때의 모습을 Peek로 확인하고 Revert로 돌아갈 수 있다.

 

이외 여러 위젯들의 속성을 조절이 가능하다! --> 구글링으로 그때그때 확인

Padding, Width 등 길이 속성은 8의 배수로 해야 해상도가 작아져도 위젯이 깨지지 않는다.

 

또한 Developer Menu에서  View Code를 눌러 페이지에 해당하는 전체 코드를 볼 수 있다는 점이 좋았다.

 

레이아웃 위젯

✔️ 레이아웃 위젯은 유일하게 부모가 될 수 있는 위젯이다! 

레이아웃 위젯 종류

 

레이아웃 위젯의 종류는 Column, Row, Container, Stack 4종류가 있다.

위젯 중 유일하게 자식을 만들 수 있는 틀 위젯이다.

 

Column과 Row

✔️ 레이아웃 중 Column과 Row은 가장 기본이 되는 뼈대이다.

• Column은 열을 의미
  • 위젯을 추가하면, 세로방향으로 배열
• Row는 행을 의미
  • 위젯을 추가하면 가로방향으로 배열

https://docs.flutterflow.io/resources/ui/widgets/composing-widgets/rows-column-stack/

Rows, Column & Stack | FlutterFlow Documentation

 

Container

• 컨테이너란 디자인이 가능한 레이아웃 위젯으로 Width와 Height가 있어 크기를 설정할 수 있다.

https://docs.flutterflow.io/resources/ui/widgets/container/

Container | FlutterFlow Documentation

 

Stack

• 스택이란 위젯을 서로 겹치게 해주는 레이아웃 위젯이고 레이아웃 순서를 바꾸어 어떤 위젯이 더 앞에 올지 설정이 가능하다.
• 또한 스택 내에서 위젯을 드래그해도 위치를 자유롭게 옮길 수 있다.

https://docs.flutterflow.io/resources/ui/widgets/composing-widgets/rows-column-stack/

Rows, Column & Stack | FlutterFlow Documentation

 

레이아웃 위젯은 여러 속성을 직접 만지고 설정해 보며 실습을 여러 번 해야 익숙해질 수 있다.

뜻대로 안 될 때는 문서를 보면서 공부하면 해결하려고 노력했다!