본문 바로가기

플러터관련 정보54

[플러터, 애드몹] 네이티브 광고로 mx 플레이어와 같은 광고 구현하기- 4탄-네이티브와 플러터 연결하고, 플러터로 네이티브 광고 구현하기 이번 시간에는 이제 안드로이드(네이티브) 와 플러터를 연결하고 플러터로 네이티브 광고를 구현하는 것을 정리해 보겠습니다. 여기서 중요한 부분은 "media_ads" 인 factoryId입니다. 이 팩토리 아이디를 이용해서 플러터와 네이티브 UI를 연결할 수 있습니다. package 패키지명 import io.flutter.embedding.android.FlutterActivity import io.flutter.embedding.engine.FlutterEngine import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin class MainActivity : FlutterActivity() { override fun configureFlutter.. 플러터관련 정보/플러터-안드로이드 개발 2024. 1. 6.
[플러터, 애드몹] 네이티브 광고로 mx 플레이어와 같은 광고 구현하기- 3탄- MediaNativeAdsFactory로 레이아웃(UI, xml) 연결하기 2탄에서 만든 xml파일로 네이티브 광고의 UI를 구현했고 이것을 안드로이드 코드와 연결(?)하는 기능을 하는 MediaNativeAdsFactory 클래스를 구현해보겠습니다. 저는 이 부분을 앞서 만든 네이티브 광고 UI와 안드로이드 시스템을 연결하고 UI에 보여줄 데이터를 입력하는 과정이라 이해했습니다. 저는 자바로 구현했지만 코틀린으로 구현도 가능합니다. 해당 파일은 MainActivity.kt파일이 있는 곳에 만듭니다. MediaNativeAdsFactory 만들기 NativeAdFactory를 구현하는 MediaNativeAdsFactory 클래스를 만들고 NativeAdView를 리턴하는 createNativeAd() 메소드를 구현합니다. 아래 코드를 하나하나 살펴보면 일단 xml로 만든 UI.. 플러터관련 정보/플러터-안드로이드 개발 2024. 1. 6.
[플러터, 애드몹] 네이티브 광고로 mx 플레이어와 같은 광고 구현하기- 2탄- 네이티브 광고 레이아웃 설정하기 네이티브 광고에는 안드로이드 개발 지식이 어느정도 있어야 합니다. 안그러면 이해하는데 어려움이 있습니다. 저는 플러터로 앱 개발을 시작했지 때문에 안드로이드 개발 지식이 없어 코드를 이해하는데 어려움이 있었습니다. 하지만 최대한 제가 이해한 것을 바탕으로 쉽게 설명해 보도록 하겠습니다. 이번 포스팅에서는 네이티브 광고 UI xml로 구현해보도록 하겠습니다. 그리고 최종 구현된 화면이 아래와 같습니다. 광고 화면이 배너보다 크다보니 동영상 광고도 나오고 몬가 더 광고수익이 나올거 같은 느낌이 듭니다. 목차 1. 프로젝트에 안드로이드 폴더 열기 2. 레이아웃 파일(xml) 만들기 일단 네이티브 광고를 구현할 프로젝트에 안드로이드 폴더를 열고 아래 스크린샷과 같이 레이아웃 파일을 만듭니다. 파일이름은 원하시는.. 플러터관련 정보/플러터-안드로이드 개발 2024. 1. 6.
[플러터, 애드몹] 네이티브 광고로 mx 플레이어와 같은 광고 구현하기- 1탄- 애드몹 기본설정하기 애드몹(admob)에는 규격화된 광고 형태인 배너광고, 전면광고, 앱오닝광고, 리워드 광고가 있습니다. 하지만 앱의 UI와 잘 어울릴 수도 있지만 아직 규격화 되어 있어 어울리지 않을 수도 있고 커스텀이 되지 않습니다. 앱의 UI와 유사하게 하여 앱와 광고가 잘 어울리게 하기 위해서는 네이티브 광고(native ads)를 사용하면 됩니다. 하지만 네이티브 광고는 커스텀하게 광고를 보여 주기 위해서는 플러터(dart)문법 보다는 코틀린 또는 자바, 그리고 UI를 구현하기 위한 지식이 필요합니다. 저는 플러터로 앱개발을 시작했기 때문에 해당 부분에 대한 지식을 깊게는 모르지만 공식 홈페이지 예제를 보면서 공부한 내용을 바탕으로 아래와 같이 mx 플레이어에 나온 큰화면의 광고를 구현해보도록 하겠습니다. 구현 .. 플러터관련 정보/플러터-안드로이드 개발 2024. 1. 5.
[플러터] 다른 앱에서 플러터 앱으로 텍스트 공유 받기-앱 중복 실행 해결법 포함 우리가 사용하는 앱들을 서로 공유기능을 통해 글자나 사진 등을 주고 받을 수 있습니다. 안드로이드에서는 아래와 같은 아이콘을 클릭하면 다른앱으로 텍스트나 사진 등을 보낼 수 있는 공유기능을 사용 할수 있습니다. 현재 저는 마음의 글이라는 문장 수집 앱을 만들어 사용하고 있는데 밀리의 서재에서 책을 보다가 또는 인터넷에서 좋은 글을 발견하면 복사를 해서 일일히 붙여 넣었는데 공유 기능을 사용해서 자동으로 붙여넣기가 되도록 앱을 업데이트 하였습니다. 그래서 이번 포스팅에서는 receive_sharing_intent 패키지를 사용하여 공유 기능을 추가하는 법을 정리해보도록 하겠습니다. 그리고 이번에 공유기능 사용 시 앱이 계속 새로 실행되어 같은 앱이 공유 받을 때 마다 2개, 3개 이렇게 막 실행되는 것도 .. 플러터관련 정보/플러터-안드로이드 개발 2023. 12. 9.
[플러터, 애드몹] 테스트 기기에서 네이티브 광고 검사기(admob native ad validator)가 나올때 테스트 기기에서 갑자기 AdMob native ad vaildator라는 안내문이 나올때가 있습니다. 아무래도 네이티브 광고에 경우 사용자가 커스텀하고 UI를 구성하여 광고를 송출하다보니 배너광고 처럼 AdMob에서 딱 원하는 규격이 아닐수도 있기 때문에 이런 기능이 있는거 같습니다. admob native ad vaildator 안내문 끄기 이 안내문을 끄기 위해서는 AndroidManifest.xml 에 NATIVE_AD_DEBUGGER_ENABLE의 속성 값을 false로 바꾸시면 안내문을 끌 수 있습니다. 추가할 부분 플러터관련 정보/플러터-안드로이드 개발 2023. 11. 26.
[Flutter, admob] 앱 오프닝 광고(App open ads) 플러터 앱에 추가하기(사용법) -ChatGPT와 공식 문서로 코딩 공부 부업으로 안드로이드 앱을 혼자 개발하고 있는 저의 앱의 주 수입원은 애드몹 광고입니다. 그동안은 배너 광고, 네이티브 광고(배너모양) 외엔 없었습니다. 그러던 와중 다른 1인 개발과 부업 개발자 커뮤니티에서 전면광고에 대한 이야기를 접하였고 이번 기회에 앱이 시작될 때 광고가 나오도록 하는 전면광고 게제를 해보기로 하면서 플러터 앱에 앱 오프닝 광고의 사용법에 대해 정리해보았습니다. 이번에 이것을 공부하면서 저는 모르는 부분이 나올때마다 구글링이 아닌 ChatGPT를 활용했는데 처음에는 자바보다 사용자가 적은 플러터에 대한 질문이었지만 ChatGPT 엄청 잘 알려주어 수월하게 공부할 수 있었습니다. 아래 나온 내용들은 공식 문서와 chatGPT와 함께 공부한 자료입니다. 앱 오프닝 광고(App open .. 플러터관련 정보/플러터-안드로이드 개발 2023. 10. 26.
[Flutter, admob] 안드로이드, iOS에 따라 광고 ID 자동 변경하기 플러터(flutter)를 이용해서 앱을 만들고 수익화를 위한 첫단계로 애드몹(admob) 광고를 앱에 붙이실겁니다. 그리고 애드몹 광고를 송출하기 위해서는 애드몹에서 만든 광고 별로 ID를 입력해야 하는데 플러터(flutter)는 안드로이드와 iOS 둘다 만들수 있는 크로스 플랫폼이기 때문에 ios용 아이디와 안드로이드 용 광고 아이디가 각각 필요합니다. 물론 둘 중 하나만 만든다고 하면 한개만 있어도 됩니다. 하지만, 이렇게 iOS, 안드로이드 둘다 만든다고 하면 iOS를 빌드 할때, 안드로이드를 빌드 할때마다 광고 ID를 변경해줘야 하는 번거로움이 있는데 이번에는 그런 번거로움을 해결할 수 있는 방법과 배포버전일때와 디버그 모드일때 광고 ID를 변경하는 방법을 알아보도록 하겠습니다. 목차 1. 광고 .. 플러터관련 정보/플러터-안드로이드 개발 2023. 10. 25.
[플러터, 애널리틱스] flutter로 만든 안드로이드 앱 analytics 연결하기 애널리틱스는 안드로이드나 iOS 앱을 만들고 유저들이 어떤 행동을 하는지 알 수 있게 하여 앱을 더 발전 시킬 수 있게 해주는 서비스 입니다. 이 애널리틱스(analytics)를 이용하면 사용자들이 어떤 부분을 많이 이용하고 어떤 기능을 잘 쓰지 않는지 파악 할 수 있어 앱 개발에 집중할 부분을 파악할 수 있게 해주는 유용한 서비스 입니다. 이번에는 플러터(Flutter)를 이용해서 파이어베이스 애널리틱스를 연결하고 사용하는 법을 간단하게 살펴 보겠습니다. 목차 1. go_router(고라우터)와 애널리틱스(analytics) 연결하기: FirebaseAnalyticsObserver 2. 유저가 버튼을 누르면 어떤 버튼 눌러는지 알아보기: logEvent 사용전 main.dart 기본 설정하기 애널리틱스.. 플러터관련 정보/파이어 베이스(플러터) 2023. 10. 15.
[플러터, 애널리틱스] Missing google_app_id. Firebase Analytics disabled. 에러 해결하기- 2023년 10월 최신 해결방법 플러터(flutter)로 안드로이드 앱을 개발하면서 파이어 베이스 애널리틱스( Firebase Analytics) 연결했는데 아래와 같은 에러가 발생했습니다. Missing google_app_id. Firebase Analytics disabled. See https://goo.gl/NAOOOI Android 프로젝트에 Firebase 추가 | Firebase for Android Google I/O 2023에서 Firebase의 주요 소식을 확인하세요. 자세히 알아보기 의견 보내기 Android 프로젝트에 Firebase 추가 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세 firebase.google.com 그래서 이번에는 위와 같은 에러를 어떻게 해결하는지 알아보겠습니다.. 플러터관련 정보/파이어 베이스(플러터) 2023. 10. 14.
[플러터, 구글드라이브] 앱 데이터를 Google Drive에 백업하기&복원하기 2탄 Flutter와 Google Drive연동하여 백업과 복원 구현하는 방법 2탄입니다. 1탄에서는 구글 드라이브를 사용하기 위한 레포지토리 작업을 마쳤는데요. 이번에는 그 레포지토리를 이용하여 비지니스 로직을 구현해보겠습니다. 이번에는 리버팟을 이용한 상태관리법을 적용해 보았습니다. 상태 정의하기코드팩토리님의 중급 강의에서 리버팟을 이용하여 상태를 관리하는 방법을 공부하여 이번 프로젝트에도 적용해 보았습니다. 우선 각각의 상태를 정의하기 위한 클래스를 만들어 보겠습니다. 각각의 클래스로 로딩중인지 유저 정보가 있는지 여부를 확인하려고 합니다. 이것을 보고 객체지향의 다형성을 이렇게도 활용 가능 하구나 느꼈습니다. 직관적인 이름으로 되어 있으니 쉽게 아실거라 믿고 넘어가겠습니다. import 'package.. 플러터관련 정보/플러터-안드로이드 개발 2023. 9. 17.
[플러터, 구글드라이브] 앱 데이터를 Google Drive에 백업하기&복원하기 1탄 Google Drive와 플러터를 연동하여 앱 데이터를 백업하고 다운로드 받을 수 있다면 저 처럼 혼자서 개발하고 있는 1인 개발자에게 비용을 최소화하기 위한 안성맞춤인 방법인거 같습니다. 그래서 사실 이부분은 파이어베이스에 데이터를 저장하거나 별도의 백엔드 서버를 이용하여 개발하고 계신분들은 크게 상관 없는 포스팅입니다. 저는 이것을 이용해서 Drift를 이용한 앱의 SQLite3 db파일을 구글드라이브에 백업하고 복원하는 작업에 사용하고 있습니다. 결과는 성공졌이었고, 현재 출시된 앱에 해당 기술을 적용하여 사용하고 있습니다. 파이어베이스 설정 일단 저는 기본적으로 애널리틱스를 사용하고 있어 파이어베이스에 앱을 연결한 상태이며 파이어베이스를 이용한 구글로그인 설정을 완료한 상태입니다. 이렇게 하면 구.. 플러터관련 정보/플러터-안드로이드 개발 2023. 9. 16.
[flutter, drift, SQLite] New 플러터와 드리프트(drift)로 간단한 메모장 만들기 - 2탄(컬럼 추가, 마이그레이션) 이번에는 마이그레이션을 통해 새로운 컬럼을 추가해보도록 하겠습니다. Drift에서 컬럼 추가하기 목차 1. 테이블 클래스에 컬럼을 추가 2. MyDatabse클래스에 마이그레이션 코드 작성 3. 코드제너레이션 1. 테이블 클래스에 컬럼을 추가 기존에 없었던 folder라는 컬럼을 추가하였습니다. withDefault를 통해 기본값을 설정하였구요. nullable을 통해 널값이 가능하도록 하였습니다. import 'package:drift/drift.dart'; class Memos extends Table { IntColumn get id => integer().autoIncrement()(); TextColumn get content => text()(); TextColumn get folder => .. 플러터관련 정보/플러터-안드로이드 개발 2023. 6. 16.
[flutter, drift, SQLite] New 플러터와 드리프트(drift)로 간단한 메모장 만들기 - 1탄(기본 사용법, CRUD구현) 이전에도 플러터와 드리프트(과거 moor)로 간단한 todo 리스트를 만들어 보았는대요. 한지 오래되기도 했고 해서 다시 한번 정리해 보도록 하겠습니다. flutter로 사용하는 orm 패키지 Drift flutter에서 sqlite를 사용하기 위해서는 몇 가지 방법이 존재하는데요. 이 drift는 플러터에서 sqlite를 사용할 수 있게 만들어주는 ORM 패키지입니다. 저는 처음에 왜 ORM 패키지를 사용해야 되는지는 몰랐는데 김영한 님의 스프링 강의를 통해 RDB와 객체지향 사이에 패러다임의 차이 때문에 사용한다고 배웠습니다. 즉, RDB를 객체와 같이 다룰 수 있게 해 준다 간단하게 이렇게 이해하고 넘어가시면 될 거 같습니다. 공부한 내용 제가 이번 프로젝트의 목적은 아래와 같습니다. Drift의 .. 플러터관련 정보/플러터-안드로이드 개발 2023. 6. 16.
[Flutter] admob(애드몹) - iOS 네이티브 광고 만들기 2탄 - xib파일, 스위프트 파일 만들기(ChatGPT로 오류 해결한 이야기) 1탄에서 iOS 앱을 만드는데 필요한 info.plist 파일 설정을 마쳤습니다. 이번에는 본격적으로 애드몹 네이티브 광고 송출을 위한 xib파일과 스위프트 파일을 소개하도록 하겠습니다. 아울러 ChatGPT로 오류도 해결한 이야기는 중간에 있으니 읽어봐 주세요. xib 파일 만들기 xib 파일이 무엇인지 chatGPT에게 물어보니 다음과 같이 대답 해주었습니다. XIB는 Interface Builder 파일로, iOS 애플리케이션에서 사용자 인터페이스를 디자인하고 구성하는 데 사용되는 파일 형식입니다. XIB 파일은 뷰 컨트롤러, 뷰 및 다른 사용자 인터페이스 요소를 포함할 수 있습니다. XIB 파일은 XML 형식으로 저장되며, Xcode에서 Interface Builder 툴을 통해 쉽게 수정할 수 .. 플러터관련 정보/플러터-안드로이드 개발 2023. 4. 15.
[Flutter] admob(애드몹) - iOS 네이티브 광고 만들기 1탄 - info.plist 설정하기 (Native Ads) 플러터(Flutter)를 이용하면 안드로이드와 iOS 앱을 모두 만들 수 있습니다. 저번에는 안드로이드에서 google_mobile_ads 패키지를 이용해서 애드몹(Admob) 네이티브 광고를 구현했는데 이번에는 iOS에서 구현해보도록 하겠습니다. 안드로이드와 더불어 iOS에서 네이티브 광고를 구현하기 위해서는 안드로이드에 경우에는 자바 또는 코틀린과 뷰를 구성하기 위한 xml 파일을 만드는 법을 알아야 하듯이 iOS에서는 스위프트 또는 오브젝트C와 뷰를 구성하는 xib을 할 줄 알아야 합니다. 아직 저는 뷰를 구성하는 xml 파일 만드는 법과 xib를 만드는 법을 공부하지 못해 공식 사이트의 코드를 복사 붙여넣기하여 구현만 했습니다. info.plist 설정하기 App ID 만들어서 info.plist.. 플러터관련 정보/플러터-안드로이드 개발 2023. 4. 15.
[Flutter] - go_router로 오브젝트(Object) 전달하기 저는 화면을 이동할 때 플러터의 패키지인 go_router를 사용합니다. 그냥 문자열 같은 건 :id 이런 형태로 사용하는데 문제는 문자열이 아닌 의존성 주입을 해야 될 때 오브젝트, 인스턴스를 전달할 필요가 있을 때도 있다는 점입니다. 지금부터 go_router를 이용해 화면 전환 시 오브젝트를 전달하는 법을 알아보겠습니다. Memo memo = state.extra as Memo를 쓰자 아래 예시 코드와 같이 state.extra를 통해 오브젝트를 넘겨주면 됩니다. GoRoute( name: "edit", path: "/edit", builder: (context, state) { Memo memo = state.extra as Memo; return EditScreen(memo: memo); }) .. 플러터관련 정보/플러터-안드로이드 개발 2023. 3. 30.
[Flutter] - go_router로 화면 이동 구현하기 (로그인 가드 구현 포함) go_router는 페이지 이동을 위한 플러터 패키지 고라우터(go_router)는 플러터(flutter)의 화면 전환을 위한 패키지 입니다. 예를 들어 초기 화면에서 어떤 버튼을 누르면 글쓰기 페이지로 이동하는 기능을 구현하기 위해 쓰는 패키지 입니다. 쉽게 설명하면 HTML의 링크(a태그)의 기능을 구현하는 것입니다. 아래 공식 문서의 설명에도 나와 있듯이 url 기반으로 화면의 주소를 지정하고 버튼에 경로를 입력하여 해당 되는 화면으로 전환됩니다. 또한 로그인이 안되어 있으면 다른 화면에 접근할 수 없도록 하는 beamer로 치면 가드 기능인 redirect 기능도 함께 알아보도록 하겠습니다. 공식문서의 설명 A declarative routing package for Flutter that use.. 플러터관련 정보/플러터-안드로이드 개발 2023. 3. 23.
[Flutter] admob(애드몹) - 앱 만들어서 네이티브 광고로 돈 벌기, 수익 내기(Native Ads) 애드몹(admob) 네이티브 광고(Native ads)란? Admob에는 배너광고, 전면광고, 보상형광고 그리고 오늘의 주제인 네이티브 광고(Native Ads)가 있습니다. 애드몹 공식 사이트에는 네이티브 광고를 다음과 같이 설명하고 있습니다. 앱의 디자인과 스타일에 어울리게 설정할 수 있는 맞춤 광고입니다. 광고 배치 방법 및 위치를 정할 수 있으므로 광고 레이아웃과 앱 디자인 간의 일관성 유지가 가능합니다. 네 맞습니다. 애드몹 네이티브 광고는 우리가 만든 앱에 디자인과 유사하게 만들어 자연스럽게 융화되어 광고를 할 수 있는 맞춤형 애드몹 광고 중 하나입니다. 시작하기에 앞서 이 포스팅의 대상은 애드몹 배너 광고등 다른 애드몹 광고를 만들어본 경험이 어느 정도 있는 분들을 대상으로 쓰여있어 기본적인.. 플러터관련 정보/플러터-안드로이드 개발 2023. 3. 20.
[Flutter, android] com.google.android.gms:play-services-safetynet:17.0.0 오류 관련 얼마 전에 새로운 앱을 구글 플레이 스토어에 배포하니 com.google.android.gms:play-services-safetynet:17.0.0 이런 오류 메세지가 떠서 여기 저기 구글을 검색해보며 무엇이 문제인지 알아보았습니다. 일단 해당 오류는 firebase auth 와 관련이 있는거 같아보였습니다. 해당 이슈는 native firebase가 문제 스택 오버플로우를 열심히 검색해보니 파이어베이스로 인증을 구현한 것이 문제였습니다. 일단 firebase_auth의 깃허브의 이슈에서 해당 문제를 검색해보았습니다. 답변 내용을 보니 native firebase sdk를 고쳐야 된다는 이야기가 나오네요. 바로 답변의 링크를 타고 가보았습니다. https://github.com/firebase/flu.. 플러터관련 정보/플러터-안드로이드 개발 2023. 3. 18.

티스토리툴바