Больше
Создание приложения на Flutter с интеграцией OverlayPortal и Back4app

15min
Введение
В этом учебном пособии мы научимся использовать OverlayPortal в Flutter для создания динамических наложений для виджетов, таких как подсказки или меню. Кроме того, мы интегрируем Back4app для хранения и управления данными пользователей, такими как предпочтения или действия, предпринятые при взаимодействии с наложением.
К концу этого учебного пособия вы сможете:
Реализовать OverlayPortal в приложении Flutter.
Отображать интерактивные наложения, такие как плавающие меню или подсказки.
Интегрировать Back4app в качестве бэкенда для хранения данных, связанных с наложением (например, предпочтений пользователей или действий).
Предварительные требования
Среда Flutter: Убедитесь, что у вас установлен Flutter. Следуйте руководству по установке.
Учетная запись Back4app: Зарегистрируйтесь на Back4app для использования в качестве вашего бэкенда.
Базовые знания о виджетах Flutter: Знакомство с общими виджетами Flutter, такими как кнопки, контейнеры и наложения.
Шаг 1: Настройка Back4app
1.1 Создание проекта Back4app
Войдите в свой аккаунт Back4app и создайте новый проект с именем OverlayDemoApp.
Создайте Parse Class с именем OverlayActions с следующими полями:
имя пользователя (String): Имя пользователя.
тип действия (String): Действие, выполненное на наложении (например, "Открыто", "Закрыто", "Нажато").
временная метка (DateTime): Время, когда произошло действие.
1.2 Получите свои учетные данные Back4app
На панели управления Back4app перейдите в настройки вашего проекта и получите свой ID приложения и Ключ клиента. Эти учетные данные будут использоваться для инициализации Back4app в вашем приложении Flutter.
Шаг 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: Реализация OverlayPortal в Flutter
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 Создание пользовательского интерфейса
Пользовательский интерфейс содержит кнопку, которая переключает видимость наложения. Само наложение позиционируется с помощью виджета Positioned . Когда наложение видно, на экране появляется плавающий блок с сообщением и кнопкой.
Шаг 4: Запуск приложения
Откройте терминал и запустите приложение с помощью:
Нажмите кнопку Показать наложение для переключения наложения. Когда наложение видно, нажмите кнопку внутри наложения. Все взаимодействия (открытие, закрытие и нажатие) будут записаны в Back4app.
Шаг 5: Просмотр зарегистрированных действий в Back4app
Чтобы проверить, что действия пользователя записываются:
Перейдите на свою панель управления Back4app.
Перейдите к классу OverlayActions.
Вы должны увидеть записи действий (открыто, закрыто, нажато) с отметками времени.
Шаг 6: Настройка наложения
Вы можете дополнительно настроить наложение, выполнив следующие действия:
Изменив положение наложения с помощью виджета Positioned.
Добавив более сложные виджеты, такие как формы или меню, в наложение.
Стилизовав наложение с помощью различных цветов, границ и теней.
Заключение
В этом учебном пособии вы узнали, как реализовать OverlayPortal в приложении Flutter для создания интерактивных наложений, которые можно включать и выключать. Кроме того, мы интегрировали Back4app для регистрации взаимодействий пользователей с наложением, предоставляя надежный бэкенд для хранения данных и улучшения функциональности приложения.
Эта настройка может быть использована для создания функционально насыщенных приложений, где взаимодействия пользователей с наложениями (например, подсказками, меню, всплывающими окнами) хранятся на бэкенде, предоставляя информацию о поведении пользователей или облегчая динамическую загрузку контента на основе данных в реальном времени.
Для получения дополнительной информации:
﻿Документация Flutter Overlay Portal﻿
﻿Документация Back4app﻿
﻿
Обновлено 23 Jan 2025
Помогла ли вам эта страница?
Создание устойчивой игры с использованием Flutter и Back4app
Как создать продвинутую бесконечную бегалку, используя Flutter, инструмент для казуальных игр и Back4app