Flutter로 만든 작은 투두리스트! 수박 두잇

gozero·2021년 8월 28일
3

수많은 분들이 만든 투두리스트를 보고 Flutter로도 이건 간단하게 만들어볼 수 있겠는데? 싶어서 시작한 작은 프로젝트입니다. 아직 서툴고 부족한 부분도 있겠지만 조금은 뿌듯해서 프로젝트 정리글을 작성 해봅니다 :)


수박 두잇이 무슨 뜻인가요?

혹시 다들 수박게임이라고 들어보신 적 있으신가요?
작은 원들이 뭉쳐지고 뭉쳐져서 하나의 큰 원을 만들어 내는 게임입니다(한때 유행했던 게임이에요).
수박 게임처럼 다양한 동그라미들이 모여 오늘 해야 할 일을 기록하는 투두리스트앱입니다!
앱의 아이콘처럼 귀여운 수박 모양의 동그라미들과 do it! 본인의 열정이 가득한 오늘의 일을 마음껏 기록할 수 있습니다!

처음 앱을 키게 되면 달력이 보이고 그날의 작성 했던 체크리스트를 보여줍니다! 저는 오늘도 열심히 개발을 하는 게 오늘의 할 일이네요. 이렇게 달력과 같이 그 날 작성한 할 일을 보고, 그 날에 대한 투두리스트를 자세히 보고 싶다면 밑에 자세히 보기를 눌러주세요!


다양한 크기와 다채로운 색깔의 동그라미들!

수박 게임에서 볼 수 있듯 크기가 다양한 동그라미들로 오늘의 해야할 일을 가득 채울 수 있습니다! 크기가 클 수록 오늘 반드시 해야 하는 중요한 일이고, 작을 수록 여유를 가지고 해도 되는 일입니다.

오늘의 일을 자유롭게 작성하고 작성한 일이 얼마나 중요한지 중요도를 선택할 수 있어요! 한 가지 색으로 원을 채우는 건 따분하니 다양한 색깔로 오늘을 다채롭게 만들어 보세요!


할 일 끝! 이제 뭘 하나요?

우와! 오늘의 일을 다 마무리 하셨다구요? 그렇다면 다 마친 동그라미를 탭하여 시원하게 터트려 보세요!

오늘의 일들 중 가장 먼저 끝낸 세 가지의 일은 명예의 전당에 자랑스럽게 들어간답니다!

명예의 전당에 들어가진 못 했더라도 오늘의 일을 잘 마무리 한 여러분! 오늘 하루도 완전 고생 많으셨습니다.

수박 두잇은 어떻게 만들어졌나요?

수박 두잇은 Flutter로 만들어진 앱입니다! 제가 현재 회사에서 사용하고 있는 기술이기도 하고, 제가 애정을 가지고 공부를 하고 있는 언어라 프로젝트를 하면서 되게 즐겁게 진행을 한 것 같습니다.

앱을 제작하는 과정에서 네이티브 언어(코틀린, 스위프트 등)와 리액트 네이티브가 주로 주목을 받는 것 같아서 Flutter 개발자로써 이런 것도 이렇게 간단하고 쉽게 Flutter로 만들 수 있어요! 를 보여주고 싶었습니다. Flutter 좋아요!!

앱의 전체적인 디자인은 제 소중한 UI / UX 디자이너 친구가 만들어줬습니다. 이쁘게 디자인을 해준 친구에게 이 글을 볼 지 모르겠지만 감사 인사를 보내봅니다.

사용한 패키지

  intl: ^0.17.0
  flutter_screenutil: ^5.0.0+2
  sqflite: ^2.0.0+3
  path: ^1.8.0
  provider: ^5.0.0
  crypto: ^3.0.1
  shared_preferences: ^2.0.6
  syncfusion_flutter_datepicker: ^19.2.57
  sliding_up_panel: ^2.0.0+1

프로젝트를 진행하며 총 9개의 패키지를 사용하였습니다.

intl : DateFormat을 사용하기 위하셔 사용하였습니다.
flutter_screenutil : 다양한 기기의 스크린 사이즈를 대응하기 위하여 사용하였습니다.
provider : provider를 이용하여 투두리스트들의 상태를 관리 하였습니다.
crypto : 각 투두리스트들의 고유 idx를 만들어 주기 위하여 사용하였습니다.
syncfusion_flutter_datepicker : 달력을 보여주기 위해 사용하였습니다.


조금 고생 했던 패키지는... sqflite입니다.

우선 제가 백엔드를 할 줄 모르는 오직 프론트엔드!! 만을 외치는 사람이기 때문에 백엔드 + DB까지 연결을 따로 하지 않고, sqflite 패키지를 사용하여 간단하게 DB를 연결하여 사용 하였습니다.

처음 연결 해본 거라 당황스러운 오류도 많이 나고, 시행착오도 많이 겪었지만 지금은 정말 고맙게도 동작을 잘 해주고 있어서 눈물이 나옵니다!


추가 될 기능

수박 두잇은 여기서 멈추지 않습니다!

위 사진과 같이 배경 색상을 선택하여 동그라미만 다채롭게 만드는 것이 아닌 앱의 전체적인 분위기 또한 다채롭게 꾸며볼 예정입니다.

그리고 할 일을 아직 작성하지 않았을 경우에 보여야 할 엠프티 페이지와 같은 세부적인 부분 또한 쏙쏙 찾아내서 해결 해나갈 예정입니다!

나름(?) 고생했던 점

우선은 앞서 말했듯이 이 앱은 백엔드 없이 프론트엔드 + 디자인으로만 시작한 프로젝트입니다. 당연히 다른 거에 비해 퀄리티가 떨어질 수도 있고, 코드를 까보면 왜 이렇게 짰어!! 싶은 것도 있을 수 있습니다.

예를 들면,

toDoListProvider!.completeToDoList.where((todo) =>
    todo.date == toDoListProvider!.todayDate
)

내가 완료한 할 일의 목록을 뽑아줘야 하는데 DB를 백엔드에서 연결하고, 쿼리를 짜서 그 부분만 API로 만들어 전송을 했으면 편했을텐데 ^^... 자체적으로 프론트엔드에서 where를 사용하여 조건을 걸고 분리를 시키는 점...? 혹시나 다른 분들이 보신다면 경악을 하실 지도 모르겠네요.

프로젝트 진행을 하면서 앱의 수많은 변수가 존재한다는 사실 또한 알게 되었고, 그 변수를 해결 해나가면서 앞으로 개인 프로젝트 또한 회사에서 개발을 진행하게 될 때도 이 앱의 기획과 개발 과정에서 일어날 수 있는 일들을 생각하는 폭이 넓어졌다는 것이 이번 프로젝트에서 느낄 수 있는 가장 큰 깨달음이었습니다.

소박한 마무리!

이 글을 다른 분들이 보실지 모르겠지만 Flutter도 이렇게 좋은 언어이고, 많은 분들이 좋아해주시고, 기억 해주셨음 좋겠습니다.

처음으로 올리는 프로젝트 정리글이라 내용이 이상할 수도 있고, 어색한 부분도 있을 수 있을 거라 생각합니다. 그래도 지금 이 말을 읽고 계신다면, 부족한 글을 끝까지 읽어주셨다는 것에 저는 감사 인사를 드립니다.

프로젝트의 이름처럼 수박처럼 동그랗게 모나지 않는 하루하루를 보내시고, do it! 하고 싶은 일은 반드시 하고, 해야 할 일도 잘 마무리 하셨으면 좋겠습니다.

profile
Flutter를 제일 좋아하는 앱 프론트엔드 개발자입니다!

2개의 댓글

comment-user-thumbnail
2021년 8월 30일

참 재미있는 프로젝트 입니다! 한 번 써볼 수 있는 기회가 있었으면 좋겠네요

1개의 답글