Skip to content

FireFlutter

장난감 로봇을 만들 때 각 부품을 조립해서 만들 듯, FireFlutter 가 제공하는 위젯, 모듈 등의 기능들을 통해 쉽게 앱을 만들 수 있다.

본 문서는 FireFlutter 에 대한 설명과 이를 통해 회원, 채팅, 게시판 및 소셜 커뮤니티 관련 기능을 가지는 앱을 쉽고 빠르게 만들 수 있도록 설명을 해 준다. FireFlutter 을 확장(커스터마이징)하여 소셜 앱 뿐만아니라 쇼핑몰, CMS 등 다양한 앱을 만들 수 있다.

참고로 FireFlutter 는 Firebase 의 Realtime Database 와 Firestore 를 동시에 사용하는데 특히, 회원 기능, 채팅 기능, 게시판 기능 등 단순한 자료 구조를 가지는 서비스를 Realtime Database 기반으로 작업을 하였으며 그 외 클럽(동호회), 모임(밋업) 등 보다 많은 검색(필터링)이 필요한 기능은 Firestore 로 작성하였다.

설치

순서

활용법

  • 빌딩 블록를 참고하시면, fireship 을 통해서 앱을 개발 할 수 있는 방법에 여러가지 설명을 하고 있다.
  • FireFlutter 의 exmaple 폴더에 예제 코드가 있다.

FireFlutter 의 기본 이해

  • FireFlutter 는 데이터베이스 구조와 관련된 로직을 구현하는 코드 뿐만아니라, 플러터 디자인을 위한 위젯들을 같이 제공하고

FireFlutter 의 패턴

  • FireFlutter 에는 꾸준한 패턴을 통해서 unified 한 코딩 방식을 지향하고 있다. 다르게 설명하면 일정한 코드 패턴을 통해서 보다 쉽게 다른 기능들을 익히도록 하는 것이다.

FireFlutter 모델 패턴

  • 모든 모델 클래스에는 아래와 같은 변수들을 가지고 있다.

    • node 는 데이터 노드 이름을 가지고 있다. 예를 들면, Post.node 는 posts 의 값을 가지고 있다.
    • 데이터 reference 는 ____Ref 로 끝난다.
    • ref 는 해당 모델의 데이터 reference 이다.
    • rootRef 는 Realtime Databsae 의 최상위 / 를 가르킨다.
    • nodeRef 는 각 데이터 노드의 최 상이 클래스를 가르킨다. 예: /users, /posts, etc.
    • 참고로 2024년 3월 현재, 이 부분 코드 리팩토링 중이어서 혼동이 조금 있을 수 있다.

  • 일부 모델 클래스에는 onFieldChange 라는 위젯 빌드 함수가 있으며, 내부적으로 단순히 Value 위젯을 사용하여 특정 필드가 변경되면, 위젯을 빌드 할 수 있도록 해 놓았다.

Service 패턴

예를 들면, 사용자 차단이나 신고 등을 할 때, 서비스 내에서 해당 동작에 대한 UI 설정을 할 수 있다.

  • 어떤 동작을 하기 전에 ask 옵션을 통해서 사용자에게 그 동작을 할지 또는 하지 않을지를 물어 볼 수 있다.

  • 어떤 동작이 끝난 다음 notify 옵션을 통해서 사용자에게 그 동작의 결과를 알려 줄 수 있다.

이러한 옵션은 service 에서 해야 모든 위치에서 적용이 된다.

참고로, report service 등에서는 아직, 이러한 패턴을 따르지 않고 있는데, 곧 동일한 패턴으로 업데이트 될 예정이다.

빠르게 시작하기

UI 디자인

참여