더 많은
OverlayPortal 및 Back4app 통합으로 Flutter 앱 구축

14min
소개
이 튜토리얼에서는 OverlayPortal을(를) 사용하여 Flutter에서 툴팁이나 메뉴와 같은 위젯을 위한 동적 오버레이를 만드는 방법을 배웁니다. 또한, Back4app을(를) 통합하여 오버레이와 상호작용할 때의 선호도나 행동과 같은 사용자 데이터를 저장하고 관리합니다.
이 튜토리얼이 끝나면 다음을 할 수 있습니다:
Flutter 앱에서 OverlayPortal을(를) 구현합니다.
플로팅 메뉴나 툴팁과 같은 인터랙티브 오버레이를 표시합니다.
오버레이 관련 데이터를 저장하기 위해 Back4app을(를) 백엔드로 통합합니다 (예: 사용자 선호도 또는 행동).
전제 조건
Flutter 환경: Flutter가 설치되어 있는지 확인하세요. 설치 가이드를 따르세요.
Back4app 계정: Back4app에서 가입하여 백엔드로 사용하세요.
Flutter 위젯에 대한 기본 지식: 버튼, 컨테이너 및 오버레이와 같은 일반적인 Flutter 위젯에 대한 친숙함.
1단계: Back4app 설정하기
1.1 Back4app 프로젝트 만들기
Back4app 계정에 로그인하고 OverlayDemoApp이라는 새 프로젝트를 만드세요.
다음 필드를 가진 Parse Class인 OverlayActions를 만드세요:
username (문자열): 사용자의 이름.
actionType (문자열): 오버레이에서 수행된 작업 (예: "열림", "닫힘", "클릭됨").
timestamp (날짜/시간): 작업이 발생한 시간.
1.2 Back4app 자격 증명 가져오기
Back4app 대시보드에서 프로젝트 설정으로 이동하여 Application ID와 Client Key를 가져오세요. 이 자격 증명은 Flutter 앱에서 Back4app을 초기화하는 데 사용됩니다.
2단계: Flutter 프로젝트 설정하기
2.1 새로운 Flutter 프로젝트 만들기
터미널을 열고 새로운 Flutter 프로젝트를 만드세요:
Bash
flutter create overlay_portal_app
cd overlay_portal_app
flutter create overlay_portal_app
cd overlay_portal_app
﻿
2.2 의존성 추가
 pubspec.yaml 파일을 열고 Parse SDK와 OverlayPortal에 필요한 의존성을 추가하세요:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^latest_version
  overlay_portal: ^0.1.0
  provider: ^5.0.0
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 자격증명으로 초기화하세요:
Dart
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(),
    );
  }
}
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:를 구현할 주요 위젯을 만듭니다.
Dart
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'),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
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 문서﻿
﻿Back4app 문서﻿
﻿
업데이트됨 24 Jan 2025
이 페이지가 도움이 되었습니까?
Flutter와 Back4app을 이용한 지속 가능한 게임 구축
Flutter, 캐주얼 게임 툴킷 및 Back4app을 사용하여 고급 엔드리스 러너 게임을 만드는 방법