Building a Flutter App with OverlayPortal and Back4app Integration

15min
Introduction
In this tutorial, we will learn how to use OverlayPortal in Flutter to create dynamic overlays for widgets like tooltips or menus. Additionally, we’ll integrate Back4app to store and manage user data, such as preferences or actions taken when interacting with the overlay.
By the end of this tutorial, you’ll be able to:
Implement OverlayPortal in a Flutter app.
Display interactive overlays like floating menus or tooltips.
Integrate Back4app as the backend to store overlay-related data (e.g., user preferences or actions).
Prerequisites
Flutter Environment: Make sure you have Flutter installed. Follow the installation guide.
Back4app Account: Sign up at Back4app to use as your backend.
Basic Knowledge of Flutter Widgets: Familiarity with common Flutter widgets like buttons, containers, and overlays.
Step 1: Setting Up Back4app
1.1 Create a Back4app Project
Sign in to your Back4app account and create a new project named OverlayDemoApp.
Create a Parse Class called OverlayActions with the following fields:
username (String): The name of the user.
actionType (String): The action taken on the overlay (e.g., "Opened", "Closed", "Clicked").
timestamp (DateTime): The time when the action occurred.
1.2 Get Your Back4app Credentials
From the Back4app dashboard, navigate to your project’s settings and retrieve your Application ID and Client Key. These credentials will be used to initialize Back4app in your Flutter app.
Step 2: Set Up Flutter Project
2.1 Create a New Flutter Project
Open your terminal and create a new Flutter project:
Bash
flutter create overlay_portal_app
cd overlay_portal_app
flutter create overlay_portal_app
cd overlay_portal_app
﻿
2.2 Add Dependencies
Open the pubspec.yaml file and add the required dependencies for Parse SDK and 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
﻿
Run flutter pub get to install the dependencies.
2.3 Initialize Parse SDK
In lib/main.dart, initialize the Parse SDK with your Back4app credentials:
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(),
    );
  }
}
﻿
Replace YOUR_BACK4APP_APP_ID and YOUR_BACK4APP_CLIENT_KEY with your Back4app credentials.
Step 3: Implementing the OverlayPortal in Flutter
3.1 Create the OverlayScreen Widget
In lib/overlay_screen.dart, create the main widget where we will implement the 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'),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
﻿
In this implementation:
OverlayPortal is toggled on and off with a button press.
The user’s interaction (opening, closing, or clicking) is logged to Back4app using the _logAction method.
The overlay contains a message and a button that triggers an action.
3.2 Create the UI
The UI contains a button that toggles the overlay visibility. The overlay itself is positioned using the Positioned widget. When the overlay is visible, a floating box with a message and button appears on the screen.
Step 4: Running the App
Open the terminal and run the app using:
Click the Show Overlay button to toggle the overlay. When the overlay is visible, click the button inside the overlay. All interactions (open, close, and click) will be logged to Back4app.
Step 5: Viewing Logged Actions on Back4app
To verify that the user’s actions are being logged:
Go to your Back4app dashboard.
Navigate to the OverlayActions class.
You should see records of the actions (opened, closed, clicked) logged with timestamps.
Step 6: Customizing the Overlay
You can further customize the overlay by:
Changing the position of the overlay with the Positioned widget.
Adding more complex widgets, such as forms or menus, within the overlay.
Styling the overlay with different colors, borders, and shadows.
Conclusion
In this tutorial, you learned how to implement OverlayPortal in a Flutter app to create interactive overlays that can be toggled on and off. Additionally, we integrated Back4app to log user interactions with the overlay, providing a robust backend to store data and enhance the app's functionality.
This setup can be used to build feature-rich applications where user interactions with overlays (e.g., tooltips, menus, popups) are stored in the backend, offering insights into user behavior or facilitating dynamic content loading based on real-time data.
For more information:
﻿Flutter Overlay Portal Documentation﻿
﻿Back4app Documentation﻿
﻿
Updated 05 Sep 2024
Did this page help you?
Building a Sustainable Game Using Flutter and Back4app
How to Build an Advanced Endless Runner Game Using Flutter, the Casual Games Toolkit, and Back4app