Future is now

앱에서 메뉴를 구성해야 할 때 유용하게 사용하는 팝업메뉴버튼을 만들어봅시다. 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..

플러터 앱에 광고를 달아서 수익 창출을 해보아요.💰배너광고와 전면광고를 플러터 앱에 구현해 보겠습니다.   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..

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

플러터 앱에 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..

새 프로젝트를 만들려고 하니 이것저것 환경 설정하는 부분이 전혀 기억이 안 나요. 하하... 블로그에 적어두는 습관을 갖도록 해야겠습니다. 😂😂😂 1. Vscode에 플러터 프로젝트 새로 만들기 Vscode에 플러터와 다트 플러그인을 설정하는 것은 생략하도록 하겠습니다. 맥 OS 기준 Command + Shift + P 를 누르면 팔레트 창이 보이는데 Flutter: New Project를 선택합니다. 그리고 아래 사진에서 Application을 선택하고 원하는 폴더를 지정 간단하게 플러터 프로젝트 생성 완료했습니다. 그렇지만 이전에 organization을 설정해두지 않았으면 패키지명이 com.example.프로젝트명으로 되어있을 것인데요. 저는 기존에 설정해 놓은 것이 있었기 때문에 com.zzing..

다트 객체 지향 프로그래밍에 관하여 궁금하시다면 이전글을 참조해 주세요.😄 2023.02.22 - [독서/IT・컴퓨터] - [코드팩도리의 플러터 프로그래밍] 2장. 다트 객체지향 프로그래밍 [코드팩도리의 플러터 프로그래밍] 2장. 다트 객체지향 프로그래밍 다트 기초 문법은 이전글에서 보실 수 있어요.😆 2023.02.20 - [독서/IT・컴퓨터] - [코드팩토리의 플러터 프로그래밍] 1장. 다트(dart) 입문하기 [코드팩토리의 플러터 프로그래밍] 1장. 다트(dart) 입문 zzingonglog.tistory.com 다트 언어는 동기/비동기 프로그래밍을 지원합니다. 동기는 요청하고 나서 응답이 올 때까지 코드를 더 이상 진행하지 않고 응답을 받을 때까지 기다리고 받고 나서야 다음 코드로 진행을 하는데요..