전체 글 39

뽀모 타이머 앱 구글 플레이스토어 첫 출시!

프로덕션 승인은 7월 23일에 되었어요. 승인되자마자 바로 올리니까 빠르게 진행되었습니다.드디어 첫 모바일 앱을 출시했어요!👏👏 기존의 뽀모도로 타이머들과의 차별성이 있다면 시간, 분, 초 단위까지 집중시간과 휴식시간을 빠르게 설정할 수 있다는 점입니다.필요하신 분들이 생겼으면 좋겠네요.🤠 플레이 스토어에서 뽀모타이머라고 검색해 보니 깜짝 놀란 게 저 퍼런 이미지가 저렇게 쓰일 줄 몰랐어요...😂😂    그래서 얼른 이미지를 만들어서 수정했는데요. 우측이 왜인지 잘려서 다시 또 수정해서 업로드 중입니다...😱    출시하자마자 타이머 화면 UI를 수정하게 되었는데요.UI만 수정한 거라 업데이트를 바로 반영했어요.  화면 상단의 현재 타이머 정보를 게시판 제목 같은 느낌으로 변경해 보았는데,이전..

Projects 2024.07.24

뽀모타이머 앱 소개와 1인 개발 후기 - 안드로이드

프로젝트 카테고리에 글을 올릴 수 있기만을 고대했었는데요. 드디어 플러터로 만든 뽀모타이머 앱으로 첫 글을 작성하게 되었습니다!👏 아직 앱이 출시는 되지 않지만 그간 프로젝트를 진행해 보면서 있었던 일들을 작성해보려고 해요.개인적으로 앱을 만들어서 출시를 진행해보는 것은 처음이라 굉장히 떨리는데요.  스토어에 올라와 있는 다른 타이머 앱들 보면서 너무 못 만들었다는 생각이 자꾸 들어서 슬럼프가 왔던 적도 있었고요.😂  또 기능 욕심은 많아서 이것저것 잡다한 기능들 (예를 들면 도전과제,랭킹,회원가입,클라우드 연동 등등) 을 넣겠다는 무리수도 뒀지만 다 쳐내기도 했었고요.타이머 기능, 디자인도 엉망인 상태에서 저것까지 다하려면 진도가 안나가겠더라고요. 타이머 구현만 4번 이상 엎어지는 상황에 이르자, ..

Projects 2024.07.08

플러터에서 팝업 메뉴 버튼(PopupMenuButton) 구현하기

앱에서 메뉴를 구성해야 할 때 유용하게 사용하는 팝업메뉴버튼을 만들어봅시다. 1. PopupMenuButtonhttps://api.flutter.dev/flutter/material/PopupMenuButton-class.html PopupMenuButton class - material library - Dart APIDisplays a menu when pressed and calls onSelected when the menu is dismissed because an item was selected. The value passed to onSelected is the value of the selected menu item. One of child or icon may be provided, bu..

플러터 앱에 구글 애드몹(admob) 광고 넣기

플러터 앱에 광고를 달아서 수익 창출을 해보아요.💰배너광고와 전면광고를 플러터 앱에 구현해 보겠습니다.   1. google_mobile_ads 패키지 설치패키지를 설치해 주세요.https://pub.dev/packages/google_mobile_ads google_mobile_ads | Flutter packageFlutter plugin for Google Mobile Ads, supporting banner, interstitial (full-screen), rewarded and native adspub.devflutter pub add google_mobile_ads   2. admob에 앱 ID, 광고 ID 생성하기아래 링크로 들어가서 애드몹 계정을 생..

플러터 앱 이름, 아이콘 변경하기

플러터 프로젝트의 기본 아이콘과 이름을 바꾸어봅시다.  1. 앱 아이콘 이미지 적용하기1) 아이콘 이미지 만들기아이콘 이미지 파일을 아래 사이트에서 만들어줍니다.https://easyappicon.com/ EasyAppIcon - Create Mobile App IconEasyAppIcon helps you to create your own app icons easily. Supporting Android Adaptive Icon! You can simply import the icons to Android Studio and Xcode.easyappicon.com 내려받은 파일에서 원하는 이미지를 프로젝트에 넣어줍니다.저는 ios 아이콘에 사용할 파일은 playstore-icon.png 파일(512x5..

플러터 앱에 flutter_local_notifications 패키지 이용하여 푸시 알림 설정하기

FCM과 함께 푸시 알림을 설정하는 것은 아래 글에서 확인하실 수 있어요. https://zzingonglog.tistory.com/40 플러터 앱에 Firebase Cloud Messaging(FCM) 푸시 알림 설정하기 - Android 플러터 프로젝트에 Firebase에서 제공하는 FCM을 설정해 보겠습니다. 공식문서: https://firebase.google.com/docs/cloud-messaging?hl=ko Firebase 클라우드 메시징 Firebase 클라우드 메시징(FCM)은 무료로 메시지를 안 zzingonglog.tistory.com 이어서 이번글에서는 안드로이드와 ios 두 플랫폼에서 푸시 알림 기능을 구현하기 flutter_local_notifications 패키지를 사용해 보..

플러터 앱에 Firebase Cloud Messaging(FCM) 푸시 알림 설정하기 - Android

플러터 프로젝트에 Firebase에서 제공하는 FCM을 설정해 보겠습니다. 공식문서: https://firebase.google.com/docs/cloud-messaging?hl=ko Firebase 클라우드 메시징 Firebase 클라우드 메시징(FCM)은 무료로 메시지를 안정적으로 전송할 수 있는 크로스 플랫폼 메시징 솔루션입니다. firebase.google.com 앱에서 특정 조건이 만족할 때 사용자 앱에서 FCM 서버로 Messaging API(HTTP V1)를 이용해서 send 요청을 하면 FCM서버에서 다시 사용자 앱으로 푸시 알림을 보내주는 기능을 만들어보겠습니다. 원래는 사용자 단에서 직접적으로 FCM 서버로 요청을 하는 것보다는 중간다리 역할을 하는 서버를 만들고 서버에서 FCM으로 가..

플러터 앱에 구글 폰트 설정하기

플러터 앱을 더욱 예쁘게 꾸며줄 구글 폰트를 적용하는 법을 알아봅시다! 1. google_font 패키지 설치 flutter pub add google_fonts https://pub.dev/packages/google_fonts/install google_fonts install | Flutter package A Flutter package to use fonts from fonts.google.com. Supports HTTP fetching, caching, and asset bundling. pub.dev pubspec.yaml 파일의 dependencies 부분에 아래와 같이 등록되었습니다. google_fonts: ^6.2.1 2. 플러터 앱에 구글 폰트 반영하기 원하시는 폰트는 아래 링크에..

플러터 앱에 flex_color_scheme 테마 설정하기 (Hive 연동)

플러터 앱에 테마 배경을 다양한 색상으로 바꿔서 예쁘게 꾸며봅시다. flex_color_scheme 패키지를 선택한 이유는 많은 사용자들이 사용 중이고 Flutter favorite으로 선정된 앱이기 때문입니다. 😀 다크모드도 설정할 수 있고, 여러 가지 테마 색상을 지원합니다. 내가 만든 앱을 이용하는 사용자에게 한 가지 고정된 배경 색상만 제공하기보다는 다양한 선택권을 주면 꾸미는 맛도 있고 기분이 좋겠죠? 🥹🥹 제가 현재 제작하고 있는 뽀모도로 타이머 앱은 다크모드만 필요하나, 하는 김에 테마까지 지원해 보기로 했습니다. 사용자가 테마 색상을 선택하면 바로 테마 색상이 반영되는 것과 다크모드 기능을 코드로 정리해 볼게요. 공식문서: https://pub.dev/packages/flex_color_s..

플러터 앱에 다국어화(Localization) 설정하기

플러터 앱에 easy_localization 패키지를 사용하여 다국어화를 지원하도록 설정해 보겠습니다. easy_localization 패키지를 선택한 이유는 아래 이유 때문이고요.😆 공식문서참조: https://pub.dev/packages/easy_localization easy_localization | Flutter package Easy and Fast internationalizing and localization your Flutter Apps, this package simplify the internationalizing process . pub.dev 1. easy_localization 설치 우선 터미널에 명령어를 이용하여 easy_localization 패키지를 설치합니다. flut..