OverlayPortal 및 Back4app 통합으로 Flutter 앱 구축

소개 이 튜토리얼에서는 overlayportal 을(를) 사용하여 flutter에서 툴팁이나 메뉴와 같은 위젯을 위한 동적 오버레이를 만드는 방법을 배웁니다 또한, back4app 을(를) 통합하여 오버레이와 상호작용할 때의 선호도나 행동과 같은 사용자 데이터를 저장하고 관리합니다 이 튜토리얼이 끝나면 다음을 할 수 있습니다 flutter 앱에서 overlayportal 을(를) 구현합니다 플로팅 메뉴나 툴팁과 같은 인터랙티브 오버레이를 표시합니다 오버레이 관련 데이터를 저장하기 위해 back4app 을(를) 백엔드로 통합합니다 (예 사용자 선호도 또는 행동) 전제 조건 flutter 환경 flutter가 설치되어 있는지 확인하세요 설치 가이드 https //flutter dev/docs/get started/install 를 따르세요 back4app 계정 back4app https //www back4app com/ 에서 가입하여 백엔드로 사용하세요 flutter 위젯에 대한 기본 지식 버튼, 컨테이너 및 오버레이와 같은 일반적인 flutter 위젯에 대한 친숙함 1단계 back4app 설정하기 1 1 back4app 프로젝트 만들기 back4app 계정에 로그인 https //www back4app com/ 하고 overlaydemoapp 이라는 새 프로젝트를 만드세요 다음 필드를 가진 parse class 인 overlayactions 를 만드세요 username (문자열) 사용자의 이름 actiontype (문자열) 오버레이에서 수행된 작업 (예 "열림", "닫힘", "클릭됨") timestamp (날짜/시간) 작업이 발생한 시간 1 2 back4app 자격 증명 가져오기 back4app 대시보드에서 프로젝트 설정으로 이동하여 application id 와 client key 를 가져오세요 이 자격 증명은 flutter 앱에서 back4app을 초기화하는 데 사용됩니다 2단계 flutter 프로젝트 설정하기 2 1 새로운 flutter 프로젝트 만들기 터미널을 열고 새로운 flutter 프로젝트를 만드세요 flutter create overlay portal app cd overlay portal app 2 2 의존성 추가 pubspec yaml 파일을 열고 parse sdk 와 overlayportal 에 필요한 의존성을 추가하세요 dependencies flutter sdk flutter parse server sdk flutter ^latest version overlay portal ^0 1 0 provider ^5 0 0 flutter pub get 을 실행하여 의존성을 설치하세요 2 3 parse sdk 초기화 lib/main dart , parse sdk 를 back4app 자격증명으로 초기화하세요 import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your back4app app id'; const keyclientkey = 'your back4app client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, ); runapp(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( title 'overlay portal demo', theme themedata(primaryswatch colors blue), home overlayscreen(), ); } } your back4app app id 및 your back4app client key 를 back4app 자격증명으로 교체하세요 3단계 flutter에서 overlayportal 구현하기 3 1 overlayscreen 위젯 만들기 에서 lib/overlay screen dart , 우리가 overlayportal 를 구현할 주요 위젯을 만듭니다 import 'package\ flutter/material dart'; import 'package\ overlay portal/overlay portal dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; class overlayscreen extends statefulwidget { @override overlayscreenstate createstate() => overlayscreenstate(); } class overlayscreenstate extends state\<overlayscreen> { final overlayportalcontroller controller = overlayportalcontroller(); bool isoverlayvisible = false; future\<void> logaction(string actiontype) async { // log action to back4app final actionobject = parseobject('overlayactions') set('username', 'player1') // example user set('actiontype', actiontype) set('timestamp', datetime now()); await actionobject save(); } void toggleoverlay() { setstate(() { isoverlayvisible = ! isoverlayvisible; if ( isoverlayvisible) { logaction('opened'); } else { logaction('closed'); } }); controller toggle(); } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('overlay portal example'), ), body center( child column( mainaxisalignment mainaxisalignment center, children \[ elevatedbutton( onpressed toggleoverlay, child text( isoverlayvisible ? 'hide overlay' 'show overlay'), ), overlayportal( controller controller, overlaychildbuilder (context) => positioned( top 150, left 50, child material( elevation 5 0, borderradius borderradius circular(8), child container( padding edgeinsets all(16 0), color colors blueaccent, child column( mainaxissize mainaxissize min, children \[ text( 'this is an overlay!', style textstyle(color colors white), ), sizedbox(height 10), elevatedbutton( onpressed () { logaction('clicked'); scaffoldmessenger of(context) showsnackbar(snackbar( content text('overlay button clicked!'), )); }, child text('click me'), ), ], ), ), ), ), ), ], ), ), ); } } 이 구현에서 overlayportal 버튼을 눌러 켜고 끌 수 있습니다 사용자의 상호작용(열기, 닫기 또는 클릭)은 back4app 에 logaction 메서드를 사용하여 기록됩니다 오버레이에는 메시지와 동작을 트리거하는 버튼이 포함되어 있습니다 3 2 ui 만들기 ui에는 오버레이 가시성을 전환하는 버튼이 포함되어 있습니다 오버레이 자체는 positioned 위젯을 사용하여 위치가 지정됩니다 오버레이가 보일 때, 메시지와 버튼이 있는 플로팅 박스가 화면에 나타납니다 4단계 앱 실행하기 터미널을 열고 다음을 사용하여 앱을 실행합니다 오버레이를 전환하기 위해 show overlay 버튼을 클릭합니다 오버레이가 보일 때, 오버레이 내부의 버튼을 클릭합니다 모든 상호작용(열기, 닫기 및 클릭)은 back4app에 기록됩니다 5단계 back4app에서 기록된 작업 보기 사용자의 행동이 기록되고 있는지 확인하려면 back4app 대시보드로 이동합니다 overlayactions 클래스으로 이동합니다 행동(열림, 닫힘, 클릭)의 기록이 타임스탬프와 함께 기록된 것을 확인할 수 있습니다 6단계 오버레이 사용자 정의 오버레이를 다음과 같이 추가로 사용자 정의할 수 있습니다 positioned 위젯을 사용하여 오버레이의 위치를 변경합니다 오버레이 내에 양식이나 메뉴와 같은 더 복잡한 위젯을 추가합니다 다양한 색상, 테두리 및 그림자로 오버레이를 스타일링합니다 결론 이 튜토리얼에서는 overlayportal 을 flutter 앱에 구현하여 켜고 끌 수 있는 인터랙티브 오버레이를 만드는 방법을 배웠습니다 또한, 사용자 상호작용을 기록하기 위해 back4app 을 통합하여 데이터를 저장하고 앱의 기능을 향상시키는 강력한 백엔드를 제공했습니다 이 설정은 오버레이(예 툴팁, 메뉴, 팝업)와의 사용자 상호작용이 백엔드에 저장되어 사용자 행동에 대한 통찰력을 제공하거나 실시간 데이터를 기반으로 동적 콘텐츠 로딩을 용이하게 하는 기능이 풍부한 애플리케이션을 구축하는 데 사용될 수 있습니다 자세한 정보는 다음을 참조하십시오 flutter overlay portal 문서 https //pub dev/packages/overlay portal back4app 문서 https //www back4app com/docs