Membangun Aplikasi Flutter dengan Integrasi OverlayPortal dan Back4app

15min
Pendahuluan
Dalam tutorial ini, kita akan belajar bagaimana menggunakan OverlayPortal di Flutter untuk membuat overlay dinamis untuk widget seperti tooltip atau menu. Selain itu, kita akan mengintegrasikan Back4app untuk menyimpan dan mengelola data pengguna, seperti preferensi atau tindakan yang diambil saat berinteraksi dengan overlay.
Pada akhir tutorial ini, Anda akan dapat:
Mengimplementasikan OverlayPortal dalam aplikasi Flutter.
Menampilkan overlay interaktif seperti menu mengambang atau tooltip.
Mengintegrasikan Back4app sebagai backend untuk menyimpan data terkait overlay (misalnya, preferensi pengguna atau tindakan).
Prasyarat
Lingkungan Flutter: Pastikan Anda telah menginstal Flutter. Ikuti panduan instalasi.
Akun Back4app: Daftar di Back4app untuk digunakan sebagai backend Anda.
Pengetahuan Dasar tentang Widget Flutter: Memahami widget Flutter umum seperti tombol, kontainer, dan overlay.
Langkah 1: Menyiapkan Back4app
1.1 Buat Proyek Back4app
Masuk ke akun Back4app Anda dan buat proyek baru bernama OverlayDemoApp.
Buat Kelas Parse yang disebut OverlayActions dengan bidang berikut:
username (String): Nama pengguna.
actionType (String): Tindakan yang diambil pada overlay (misalnya, "Dibuka", "Ditutup", "Diklik").
timestamp (DateTime): Waktu ketika tindakan terjadi.
1.2 Dapatkan Kredensial Back4app Anda
Dari dasbor Back4app, navigasikan ke pengaturan proyek Anda dan ambil ID Aplikasi dan Kunci Klien. Kredensial ini akan digunakan untuk menginisialisasi Back4app di aplikasi Flutter Anda.
Langkah 2: Siapkan Proyek Flutter
2.1 Buat Proyek Flutter Baru
Buka terminal Anda dan buat proyek Flutter baru:
Bash
flutter create overlay_portal_app
cd overlay_portal_app
flutter create overlay_portal_app
cd overlay_portal_app
﻿
2.2 Tambahkan Dependensi
Buka pubspec.yaml file dan tambahkan dependensi yang diperlukan untuk Parse SDK dan 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
﻿
Jalankan flutter pub get untuk menginstal dependensi.
2.3 Inisialisasi Parse SDK
Di lib/main.dart, inisialisasi Parse SDK dengan kredensial Back4app Anda:
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(),
    );
  }
}
﻿
Ganti YOUR_BACK4APP_APP_ID dan YOUR_BACK4APP_CLIENT_KEY dengan kredensial Back4app Anda.
Langkah 3: Mengimplementasikan OverlayPortal di Flutter
3.1 Buat Widget OverlayScreen
Di lib/overlay_screen.dart, buat widget utama di mana kita akan mengimplementasikan 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'),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
﻿
Dalam implementasi ini:
OverlayPortal diaktifkan dan dinonaktifkan dengan menekan tombol.
Interaksi pengguna (membuka, menutup, atau mengklik) dicatat ke Back4app menggunakan metode _logAction.
Overlay berisi pesan dan tombol yang memicu suatu tindakan.
3.2 Buat UI
UI berisi tombol yang mengubah visibilitas overlay. Overlay itu sendiri diposisikan menggunakan widget Positioned . Ketika overlay terlihat, sebuah kotak mengambang dengan pesan dan tombol muncul di layar.
Langkah 4: Menjalankan Aplikasi
Buka terminal dan jalankan aplikasi menggunakan:
Klik tombol Tampilkan Overlay untuk mengubah overlay. Ketika overlay terlihat, klik tombol di dalam overlay. Semua interaksi (buka, tutup, dan klik) akan dicatat ke Back4app.
Langkah 5: Melihat Tindakan yang Dicatat di Back4app
Untuk memverifikasi bahwa tindakan pengguna sedang dicatat:
Pergi ke dasbor Back4app Anda.
Navigasikan ke OverlayActions kelas.
Anda harus melihat catatan tindakan (dibuka, ditutup, diklik) yang dicatat dengan cap waktu.
Langkah 6: Menyesuaikan Overlay
Anda dapat lebih menyesuaikan overlay dengan:
Mengubah posisi overlay dengan widget Positioned.
Menambahkan widget yang lebih kompleks, seperti formulir atau menu, di dalam overlay.
Menata overlay dengan warna, batas, dan bayangan yang berbeda.
Kesimpulan
Dalam tutorial ini, Anda belajar bagaimana mengimplementasikan OverlayPortal dalam aplikasi Flutter untuk membuat overlay interaktif yang dapat diaktifkan dan dinonaktifkan. Selain itu, kami mengintegrasikan Back4app untuk mencatat interaksi pengguna dengan overlay, menyediakan backend yang kuat untuk menyimpan data dan meningkatkan fungsionalitas aplikasi.
Pengaturan ini dapat digunakan untuk membangun aplikasi kaya fitur di mana interaksi pengguna dengan overlay (misalnya, tooltip, menu, popup) disimpan di backend, menawarkan wawasan tentang perilaku pengguna atau memfasilitasi pemuatan konten dinamis berdasarkan data waktu nyata.
Untuk informasi lebih lanjut:
﻿Dokumentasi Flutter Overlay Portal﻿
﻿Dokumentasi Back4app﻿
﻿
Diperbarui 24 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Membangun Game Berkelanjutan Menggunakan Flutter dan Back4app
BERIKUTNYA
Cara Membangun Game Endless Runner Lanjutan Menggunakan Flutter, Toolkit Game Kasual, dan Back4app