본문 바로가기

✏️/flutter

 (30)
Flutter Asset Catalog 1부: 설계하기 모바일 앱 개발을 하면, 한번 쯤 고민해보게 되는 항목이 있습니다. 바로 "Asset을 어떻게 관리할까?"에 대한 고민인데요. Asset은 폰트, 색상, 이미지와 같이 컴포넌트를 구성하기 위해 필요한 디자인적 요소를 뜻합니다. 아름다운 앱을 만들기 위해서는 이러한 Asset들을 잘 활용하는 것이 필수적입니다. 디자이너와 협업을 한다면, 디자인 프로토타이핑 툴(Figma, Sketch, Zeplin)을 사용해서 소통을 합니다. 보통 디자인 시스템을 미리 디자이너가 정의를 하고, 이에 맞춰 앱을 구상하게 되는데 우리는 여기서 이러한 디자인 시스템을 어떻게 앱에 잘 녹여낼지에 대한 고민을 한번 쯤 하게 됩니다. 그래서 오늘, Flutter 엔진에서 이러한 Asset들을 관리하는지에 대해서 이야기 하고자 합니다..
[flutter] 내 프로젝트가 다른 사이트에 소개된.ssul 오늘, 좀 색다른 경험을 해서 기록하고자 오랜만에 블로그에 글을 써본다. 사실 최근 블로그 활동이 뜸했던 이유는(ㅠㅠ) 학교 복학 + 졸업논문(및 캡스톤) + 대외활동 + 취준 4콤보로 정신없이 하루를 보내고 있었기 때문이다 ㅠㅠ (매번 공개글이 아닌 비공개로 글을 저장했었는데, 최대한 빠른 시일 내에 글을 완성해서 게시해야겠다.) 결론부터 말씀드리면, 과제로 만들었던 프로젝트가 flutterawesome.com 이라는 사이트에 소개되었다. 이 글을 쓰고 있는 지금, 나는 스마일게이트의Stove Dev Camp 전형을 진행 중에 있다. 전형 중, 독특하게 코딩 테스트가 아닌 [사전 과제] 전형이 있었고, 주제는 간단한 블로그 앱을 만드는 것이었다. 이 과제는 프론트와 백엔드를 모두 구현했어야 하는 과제로..
[flutter] 새로운 Bloc Widget 두둥 등장! - BlocSelector 이번에 bloc 버전이 7.1.x 대로 올라오면서, BlocSelector가 생겼습니다! 🥳🥳 이전 포스팅에서, 잠깐 BlocSelector에 대해서 언급한 적이 있는데요, 오늘은 간단하게 소개만 했던 BlocSelector를 사용해보고, 알아가는 느낌(?)으로 글을 작성해보겠습니다. BlocSelector pub.dev flutter_bloc에서는 다음과 같이 소개하고 있습니다. BlocSelector는 BlocBuilder와 유사합니다. 하지만, 개발자가 state를 기준으로 값을 선택하여 업데이트를 필터링 할 수 있는 Flutter 위젯입니다. 선택한 값이 변경되지 않으면, 불필요한 빌드가 방지 됩니다. BlocSelector가 builder를 호출 해야하는지 여부를 정확하게 결정하려면 선택한 값이..
[flutter] BLoC v.6.xx > 7.1.x으로 되면서 달라진 점 Flutter로 처음 개발 할 때 BLoC 패턴으로 입문해서 그런지, 아무리 불편해도 BLoC 패턴을 자주 사용한다. (최근에 GetX를 써보니, dependency injection 부분이 정말 신세계였다...😭) 처음 시작 당시에는 flutter version이 1.2xx 이기도 했었고 해서, 이번에는 flutter 2.xx로 업그레이드하고 코딩을 하고 있는데 기존에 사용했던 코드가 안먹히는 ㅎㅎ; 상태가 발생했다. null-safefy 추가와 함께 BLoC에서는 어떠한 변화가 있는지, 알아본 것을 바탕으로 글을 써본다. 1. BlocBase bloc 패키지에서 상태를 관리하는 방법으로 Bloc과 Cubit을 제시하고 있습니다. Cubit은 이벤트의 개념이 없이, state를 가볍게 관리 할 수 있는..
[flutter][Getx] GetX pattern 겟✊-하기 (구조) 플러터 프로젝트에 GetX를 도입하기 전, GetX에 대해 알아봅시다! GetX 패턴에 대해 공식 레포에서 다음의 형태로 문서화 되어 있습니다. 이 내용을 바탕으로 블로그 글을 작성하였습니다. - GetX github.io - medium - medium2 GetX Pattern - - 상태관리, 종속성 주입 및 route 관리 제공 - validation, media query, theme, languatge 등 기본 제공 구조 ** 공통 [data] 1. model : API를 통해 객체 또는 Json을 생성 할 때 쓰이는 class 2. repository (또는 service) : entity에 해당, 단일 데이터에 접근하는 레이어 3. provider (obs) : http 요청 또는 데이터베이..
[flutter][Getx] GetX pattern 겟✊-하기 (구조) 플러터 프로젝트에 GetX를 도입하기 전, GetX에 대해 알아봅시다! GetX 패턴에 대해 공식 레포에서 다음의 형태로 문서화 되어 있습니다. 이 내용을 바탕으로 블로그 글을 작성하였습니다. - GetX github.io - medium - medium2 GetX Pattern - 기본원칙 : 생산성, 성능, 조직화 - 상태관리, 종속성 주입 및 route 관리 제공 - validation, media query, theme, languatge 등 기본 제공 구조 ** 공통 [data] 1. model : API를 통해 객체 또는 Json을 생성 할 때 쓰이는 class 2. repository (또는 service) : entity에 해당, 단일 데이터에 접근하는 레이어 3. provider (obs..
[flutter][GetX] 플러터 프로젝트 GetX로 겟-하기 - 1편, CLI 👋 요즘 핫하다는,,, GetX를 사용해서 프로젝트를 하나 시작하게 되었습니당~ (야호) 그래서 GetX + Flutter 2.xx를 기준으로 해서 포스팅을 해볼까해요! 먼저, GetX가 무엇인지 한번 알아봅시다! GetX : extra-light and powerful solution high-performance state management, intelligent dependency injection, and route managemen - 한글화 MD 링크 - 공식 MD 링크 GetX는 상태관리, 의존성 주입, 라우트를 가볍게 관리하는 솔루션입니다. 개발을 하다보면 컨트롤러에 해당하는 코드가 비대해지는 경우가 많은데요, GetX는 이러한 컨트롤러를 조직화 하여 뷰-비즈니스로직-종속성 주입-네비게이..
[flutter] fcm 알림 - background 뱃지 처리하기 (2편, badges) 이전글 - [flutter] local notification - FCM foreground 처리하기 [flutter] fcm 알림 - background 처리하기 (1편, 설정) 앱을 사용하다보면, 런처 아이콘에 뱃지처리가 되어 있는 것을 볼 수 있을 것이다. 오늘은 이 badge 처리를 하는 법에 대해서 알아보자! firebase message에서 알림을 수신 할 경우, 다음과 같이 payload를 내려주고 있다. { "message":{ "token":"bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1...", "notification":{ "title":"Portugal vs. Denmark", "body":"great match!" }, "data" : { "Nick"..

티스토리툴바