Flutter 위젯 생성 방법들, 유용한 플러그인/사이트 정리

Photo by Miguel Tomás on Unsplash

 

 플러터를 사용하여 어떤 식으로 앱을 만드는 지에 대해 정리해본다. Flutter로 앱을 만들 때 추가적으로 도움이 되는 플러그인과 웹사이트들도 정리하였다. UI를 구성하기 쉽고 잘 정리되어 있는 사이트들도 많아서 간단하게 정리해두고 시작하면 훨씬 수월하게 앱을 만들 수 있어 보인다.

 

반응형

 

---

Flutter로 Widget을 사용하여 앱 만들기

 플러터를 사용하여 어떤 식으로 앱을 만드는 지에 대해 정리해본다. Flutter로 앱을 만들 때 추가적으로 도움이 되는 플러그인과 웹사이트들도 정리하였다. UI를 구성하기 쉽고 잘 정리되어 있는 사이트들도 많아서 간단하게 정리해두고 시작하면 훨씬 수월하게 앱을 만들 수 있어 보인다.

 

위젯을 만드는 방법들

 위젯을 만드는 경우 코드로 위젯을 만들어야 하는데, 결국 다 코드로 만들어진 위젯을 사용하는 것이지만 세 가지 방법(?)이 있다. 먼저 직접 코드를 통해 위젯을 만들고 배치하는 작업을 해주는 일반적인 경우가 있고, Zeplin, Figma와 같이 디자이너와 협업하여 사용하는 툴에서 Flutter 코드를 변환하여 사용할 수도 있다. 아니면 이미 잘 만들어진 위젯을 제공하는 패키지들을 찾아서 사용하거나 위젯 예시들이 모여 있는 사이트에서 참고하여 사용할 수도 있다. 정리하면 다음과 같다.

1. 직접 생성
2. 디자인 툴에서 자동 생성 (디자이너와 협업하는 경우)
3. 이미 누가 만들어 둔 위젯 사용하기

위젯을 직접 생성하는 방법

 필요한 곳에서 Widget을 만들어서 사용해도 되고, 앱 내에서 자주 사용하는 앱이라면 Custom Widget을 생성하여 따로 빼서 사용해도 된다. Custom 위젯은 다음처럼 class로 선언해서 만든다.

 

 

디자인 툴에서 자동으로 생성하는 방법

Zeplin이나 Figma와 같이 디자이너나 디자인 부서와 함께 협업할 때 사용하는 툴에 Flutter 플러그인을 추가하여 자동으로 Flutter 위젯 코드를 생성할 수 있다. 둘 다 플러그인을 설치하면 UI 요소를 Flutter 코드로 변환해주는 것이니 자세한 설명은 생략하고 링크를 적어둔다.

• Flutter Gen (Zeplin Extension)

Zeplin Extensions

• Figma to Code (Figma Extension)

Figma - Figma to Code (HTML, Tailwind, Flutter, SwiftUI) | [100% FREE] Convert Figma layouts into responsive webpages (in HTML o

 

이미 누가 만들어 둔 위젯 사용하기

 앱을 만들다 보면 다양한 위젯이나 기능들이 필요한데, 일반적인 앱들에서도 많이 사용하는 위젯/기능들이 있을 수 있다. 이런 것들은 사람들이 이미 만들어서 공유되고 있는 솔루션들이 있을 확률이 높다. Flutter SDK로 공유되거나 코드로 공유되는 경우들이 있는데 이런 것들을 찾기 좋은 사이트를 세 가지 정리해본다.

 

Flutter Gems

https://fluttergems.dev/

Flutter Gems - A Curated Package Guide for Flutter

 먼저, Flutter Gems 사이트이다. 이 곳은 필요한 UX나 기능에 따라 찾아보기 쉽게 되어 있다.

 

 구글 로그인 기능이 필요하다면 위와 같이 해당 Flutter 플러그인을 찾아 사용하면 된다.

 

Awesome Flutter

https://github.com/Solido/awesome-flutter#ui

GitHub - Solido/awesome-flutter: An awesome list that curates the best Flutter libraries, tools, tutorials, articles and more.

 깃헙에 정리되어 있는 문서인데, 카테고리별로 패키지를 정리해놔서 찾아서 사용하기 편하다. 여기는 패키지 뿐만 아니라 Flutter와 관련된 각종 학습 자료, 커뮤니티, 문서들도 잘 정리되어 있어서 그런 것들도 필요에 따라 확인하면 좋다.

 

Flutter Tap

https://fluttertap.com

Flutter weekly newsletter

 Flutter Tap의 경우는 페이지 안에서 찾아서 검색해보거나 할 수 있는 곳은 아니다. 좋은 패키지나 글, Flutter 소식 등을 선별해서 매주 보내주는 Flutter 뉴스레터이다. 이메일을 등록해두면 매주 유용한 정보들을 보내주니 신청해두면 좋다.

 

반응형

 

---

유용한 툴 소개

Device Preview

https://pub.dev/packages/device_preivew

 iOS나 Android 하나만 네이티브로 개발하더라도 다양한 화면 사이즈와 OS 버전으로 인해 UI가 모든 디바이스에서 제대로 보이는지 확인하기가 어려운 세상이다. Device Preview는 패키지인데, 여러 시뮬레이터를 실행해서 하나하나 확인할 필요 없이 안드로이드, iOS 모두 폰/태블릿 등 다양한 디바이스의 화면에서 어떻게 보이는 지를 테스트할 수 있다.