Flutter에서 HomeWidget 및 Back4App으로 홈 화면 위젯 만들기 방법

소개 홈 화면 위젯을 사용하면 사용자가 앱을 열지 않고도 장치의 홈 화면에서 앱의 실시간 정보에 직접 접근할 수 있습니다 flutter를 사용하여 이러한 위젯을 만들려면 일부 플랫폼별 코드가 필요합니다 그러나 home widget https //pub dev/packages/home widget 패키지가 이 격차를 해소하여 dart 코드를 사용하여 flutter 앱과 홈 화면 위젯 간의 데이터 교환을 가능하게 합니다 이 튜토리얼에서는 home widget 패키지를 사용하여 flutter에서 홈 화면 위젯을 만드는 방법과 이를 parse server 기반의 백엔드 서비스인 back4app과 통합하는 방법을 배웁니다 이 튜토리얼이 끝나면 back4app의 데이터를 홈 화면 위젯에 표시하는 flutter 앱을 갖게 될 것입니다 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 flutter sdk 가 당신의 컴퓨터에 설치되어 있습니다 공식 flutter 설치 가이드 https //flutter dev/docs/get started/install 를 따라 운영 체제에 맞게 설치하세요 flutter와 dart에 대한 기본 지식 flutter가 처음이라면 flutter 문서 https //flutter dev/docs 를 검토하여 기본 사항에 익숙해지세요 ide 또는 텍스트 편집기 (예 visual studio code 또는 android studio) back4app 계정 back4app https //www back4app com/ 에서 무료 계정을 등록하세요 flutter용 parse server sdk 가 프로젝트에 추가되어야 합니다 back4app flutter sdk 가이드 https //www back4app com/docs/flutter/parse flutter sdk 를 따라 설정 방법을 배울 수 있습니다 플랫폼별 설정 이 android 및 ios 홈 화면 위젯에 필요합니다 1단계 – flutter 프로젝트 설정 1 1 새 flutter 프로젝트 만들기 터미널을 열고 다음을 실행하세요 flutter create home widget app 프로젝트 디렉토리로 이동 cd home widget app 1 2 의존성 추가 열기 pubspec yaml 및 다음 의존성을 추가 dependencies flutter sdk flutter home widget ^0 2 4 parse server sdk flutter ^4 0 1 다음 명령어를 실행하여 flutter pub get 패키지를 설치합니다 2단계 – back4app 설정 2 1 새로운 back4app 애플리케이션 만들기 당신의 back4app 대시보드 https //dashboard back4app com/ 에 로그인합니다 "새 앱 만들기"를 클릭합니다 애플리케이션 이름을 입력합니다 예 "homewidgetapp" , 그리고 "생성" 을 클릭합니다 2 2 데이터 모델 설정 애플리케이션 대시보드에서 "database" 섹션으로 이동합니다 "create a class" 를 클릭합니다 모달에서 "custom" 을 선택합니다 클래스 이름으로 "message" 을 입력합니다 "create class" 를 클릭합니다 2 3 클래스에 열 추가하기 "message" 클래스에서 "+" 를 클릭하여 새 열을 추가합니다 다음 열을 추가합니다 title 유형 string content 유형 string "message" 클래스에 샘플 데이터를 추가합니다 예를 들어 2 4 애플리케이션 자격 증명 얻기 app settings > security & keys 로 이동합니다 application id 와 client key 를 기록해 둡니다 3단계 – flutter 앱에서 parse 초기화하기 열기 lib/main dart 그리고 다음과 같이 수정하세요 import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'package\ home widget/home widget dart'; import 'dart\ async'; import 'home page dart'; // you'll create this file next void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your application id'; const keyclientkey = 'your client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, debug true, ); runapp(myapp()); } 다음으로 교체하세요 'your application id' 및 'your client key' 를 실제 back4app 자격 증명으로 4단계 – back4app에서 데이터 가져오기 새 파일 만들기 lib/home page dart import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'package\ home widget/home widget dart'; import 'dart\ async'; class homepage extends statefulwidget { @override homepagestate createstate() => homepagestate(); } class message { final string title; final string content; message(this title, this content); } class homepagestate extends state\<homepage> { message? message; @override void initstate() { super initstate(); fetchmessage(); } future\<void> fetchmessage() async { final querybuilder\<parseobject> query = querybuilder\<parseobject>(parseobject('message')); final parseresponse apiresponse = await query query(); if (apiresponse success && apiresponse results != null) { final data = apiresponse results! first; final title = data get\<string>('title') ?? ''; final content = data get\<string>('content') ?? ''; setstate(() { message = message(title, content); }); updatehomewidget(title, content); } else { print('error fetching data ${apiresponse error? message}'); } } future\<void> updatehomewidget(string title, string content) async { await homewidget savewidgetdata\<string>('title', title); await homewidget savewidgetdata\<string>('content', content); await homewidget updatewidget( name 'homewidgetprovider', // name of your homewidgetprovider iosname 'homewidget'); // used in ios } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('home widget app'), ), body center( child message == null ? circularprogressindicator() column( mainaxisalignment mainaxisalignment center, children \[ text( message! title, style textstyle(fontsize 24, fontweight fontweight bold), ), sizedbox(height 10), text( message! content, style textstyle(fontsize 18), ), sizedbox(height 20), elevatedbutton( onpressed fetchmessage, child text('refresh message'), ), ], ), ), ); } } 설명 메시지 클래스 메시지 데이터를 보유하기 위한 간단한 모델 클래스입니다 fetchmessage() back4app의 메시지 클래스에서 데이터를 가져오고 message 변수를 업데이트합니다 updatehomewidget() 가져온 데이터를 홈 화면 위젯에 저장하고 homewidget savewidgetdata 를 사용하여 업데이트를 트리거합니다 homewidget updatewidget build() 메시지 데이터를 표시하고 메시지를 새로 고치는 버튼을 제공합니다 단계 5 – 홈 화면 위젯 설정 5 1 안드로이드 설정 5 1 1 위젯 레이아웃 만들기 새 xml 레이아웃 파일을 android/app/src/main/res/layout/ 에 생성하고 home widget xml \<! android/app/src/main/res/layout/home widget xml > \<?xml version="1 0" encoding="utf 8"?> \<framelayout xmlns\ android="http //schemas android com/apk/res/android" android\ layout width="match parent" android\ layout height="match parent"> \<textview android\ id="@+id/widget title" android\ layout width="wrap content" android\ layout height="wrap content" android\ text="title" android\ textsize="18sp" android\ layout gravity="center horizontal|top" android\ paddingtop="16dp"/> \<textview android\ id="@+id/widget content" android\ layout width="wrap content" android\ layout height="wrap content" android\ text="content" android\ textsize="14sp" android\ layout gravity="center" android\ paddingtop="8dp"/> \</framelayout> 5 1 2 위젯 제공자 만들기 새로운 java 클래스를 생성합니다 android/app/src/main/java/your/package/name/ 이름은 homewidgetprovider java // android/app/src/main/java/your/package/name/homewidgetprovider java package your package name; import android appwidget appwidgetmanager; import android appwidget appwidgetprovider; import android content context; public class homewidgetprovider extends appwidgetprovider { @override public void onupdate(context context, appwidgetmanager appwidgetmanager, int\[] appwidgetids) { // the homewidget package handles the update } } 다음으로 교체합니다 your package name 실제 패키지 이름으로 5 1 3 android 매니페스트 업데이트 위젯 제공자를 추가합니다 androidmanifest xml \<! add inside the \<application> tag > \<receiver android\ name=" homewidgetprovider"> \<intent filter> \<action android\ name="android appwidget action appwidget update"/> \</intent filter> \<meta data android\ name="android appwidget provider" android\ resource="@xml/home widget info"/> \</receiver> 5 1 4 위젯 정보 xml 생성 새로운 xml 파일을 생성합니다 android/app/src/main/res/xml/ 이름은 home widget info xml \<! android/app/src/main/res/xml/home widget info xml > \<?xml version="1 0" encoding="utf 8"?> \<appwidget provider xmlns\ android="http //schemas android com/apk/res/android" android\ initiallayout="@layout/home widget" android\ minwidth="180dp" android\ minheight="110dp" android\ updateperiodmillis="0" android\ resizemode="horizontal|vertical" android\ widgetcategory="home screen"> \</appwidget provider> 5 2 ios 설정 5 2 1 위젯 확장 만들기 xcode에서 flutter 프로젝트를 열려면 ios/runner xcworkspace 를 엽니다 클릭 파일 > 새로 만들기 > 타겟 선택 위젯 확장 을 클릭하고 다음 을 클릭합니다 제품 이름으로 homewidget 을 입력하고 구성 의도 포함 이 선택 해제되어 있는지 확인합니다 클릭 완료 하고 활성화 합니다 5 2 2 위젯 코드 업데이트 homewidget 확장 프로그램에서 homewidget swift 를 열고 수정합니다 import widgetkit import swiftui struct provider timelineprovider { func placeholder(in context context) > simpleentry { simpleentry(date date(), title "title", content "content") } func getsnapshot(in context context, completion @escaping (simpleentry) > ()) { let entry = simpleentry(date date(), title "title", content "content") completion(entry) } func gettimeline(in context context, completion @escaping (timeline\<entry>) > ()) { var entries \[simpleentry] = \[] let shareddefaults = userdefaults(suitename "your group id") let title = shareddefaults? string(forkey "title") ?? "title" let content = shareddefaults? string(forkey "content") ?? "content" let entrydate = date() let entry = simpleentry(date entrydate, title title, content content) entries append(entry) let timeline = timeline(entries entries, policy never) completion(timeline) } } struct simpleentry timelineentry { let date date let title string let content string } struct homewidgetentryview view { var entry provider entry var body some view { vstack { text(entry title) font( headline) text(entry content) font( body) } } } @main struct homewidget widget { let kind string = "homewidget" var body some widgetconfiguration { staticconfiguration(kind kind, provider provider()) { entry in homewidgetentryview(entry entry) } configurationdisplayname("home widget") description("this is a home screen widget ") } } "your group id"를 your group id 로 바꾸세요 (예 group com example homewidgetapp ) 5 2 3 앱 그룹 설정하기 xcode에서 프로젝트를 선택하고 signing & capabilities 로 이동하세요 주 앱 타겟과 위젯 확장 모두에 "app groups" 를 추가하세요 새로운 앱 그룹을 생성하세요 (예 group com example homewidgetapp ) 두 타겟 모두 동일한 앱 그룹이 활성화되어 있는지 확인하세요 5 3 플랫폼별 구성을 위한 flutter 코드 업데이트 당신의 updatehomewidget() 메서드에서 home page dart , 위젯 이름을 업데이트하세요 await homewidget updatewidget( name 'homewidgetprovider', // for android, the class name of your appwidgetprovider iosname 'homewidget', // for ios, the name of your widget extension ); 6단계 – 앱 실행 및 위젯 테스트 6 1 앱 실행 터미널에서 다음을 실행하세요 flutter run 6 2 홈 화면에 위젯 추가 안드로이드 홈 화면을 길게 눌러 "위젯" 을 선택하세요 위젯 목록에서 앱을 찾으세요 위젯을 홈 화면으로 드래그 앤 드롭하세요 ios 홈 화면을 길게 눌러 진동 모드 로 들어가세요 왼쪽 상단의 "+" 버튼을 누르세요 이름으로 위젯을 검색하세요 위젯을 홈 화면에 추가하세요 6 3 테스트 데이터 업데이트 앱에서 "메시지 새로 고침" 버튼을 눌러 back4app에서 새로운 데이터를 가져옵니다 홈 화면의 위젯이 새로운 데이터로 업데이트되어야 합니다 결론 이 튜토리얼에서는 home widget 패키지를 사용하여 flutter에서 홈 화면 위젯을 만드는 방법과 back4app과 통합하여 동적 데이터를 표시하는 방법을 배웠습니다 이를 통해 사용자는 홈 화면에서 최신 정보를 제공받아 참여도와 사용자 경험을 향상시킬 수 있습니다 다음 단계 동적 데이터 back4app의 실시간 쿼리를 사용하여 실시간 데이터 업데이트를 구현합니다 상호작용성 위젯에 클릭 동작을 추가하여 앱의 특정 페이지를 엽니다 사용자 정의 위젯을 앱의 테마와 디자인에 맞게 스타일링합니다 추가 리소스 back4app 문서 https //www back4app com/docs pub dev의 home widget 패키지 https //pub dev/packages/home widget flutter 가이드용 parse sdk https //docs parseplatform org/flutter/guide/ flutter 공식 문서 https //flutter dev/docs 행복한 코딩!