Cara Mengimplementasikan Pintasan Keyboard di Flutter dengan CallbackShortcuts dan Back4App

23min
Pendahuluan
Pintasan keyboard meningkatkan pengalaman pengguna dengan memberikan akses cepat ke tindakan umum dalam aplikasi. Di Flutter, widget CallbackShortcuts memungkinkan pengembang untuk memetakan kombinasi tombol keyboard langsung ke fungsi callback tanpa perlu mendefinisikan tindakan atau niat. Ini menyederhanakan proses penambahan pintasan keyboard ke aplikasi Anda.
Dalam tutorial ini, Anda akan belajar bagaimana mengintegrasikan CallbackShortcuts ke dalam aplikasi Flutter dan menggunakan Back4App—sebagai backend-as-a-service yang didukung oleh Parse Server—untuk menyimpan dan mengambil data. Pada akhir tutorial ini, Anda akan memiliki aplikasi Flutter yang merespons pintasan keyboard untuk melakukan tindakan seperti mengambil data dari Back4App.
Prasyarat
Untuk menyelesaikan tutorial ini, Anda akan memerlukan:
Flutter SDK terinstal di mesin Anda. Ikuti panduan instalasi Flutter resmi untuk sistem operasi Anda.
Pengetahuan dasar tentang Flutter dan Dart. Jika Anda baru mengenal Flutter, tinjau dokumentasi Flutter untuk membiasakan diri dengan dasar-dasarnya.
Sebuah IDE atau editor teks seperti Visual Studio Code atau Android Studio.
A akun Back4App. Daftar untuk akun gratis di Back4App.
Parse Server SDK untuk Flutter ditambahkan ke proyek Anda. Pelajari cara mengaturnya dengan mengikuti Panduan SDK Flutter Back4App.
Sebuah keyboard fisik atau emulator untuk menguji pintasan keyboard.
Langkah 1 – Menyiapkan Proyek Flutter
1.1. Buat Proyek Flutter Baru
Buka terminal Anda dan jalankan:
Bash
flutter create callback_shortcuts_app
flutter create callback_shortcuts_app
﻿
Navigasikan ke direktori proyek:
Bash
cd callback_shortcuts_app
cd callback_shortcuts_app
﻿
1.2. Tambahkan Dependensi
Buka pubspec.yaml dan tambahkan dependensi berikut:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
﻿
Jalankan flutter pub get untuk menginstal paket.
Langkah 2 – Menyiapkan Back4App
2.1. Buat Aplikasi Back4App Baru
Masuk ke dasbor Back4App.
Klik pada "Buat aplikasi baru".
Masukkan nama untuk aplikasi Anda, misalnya, "CallbackShortcutsApp", dan klik "Buat".
2.2. Siapkan Model Data
Di dasbor aplikasi Anda, navigasikan ke "Database" bagian.
Klik pada "Buat kelas".
Di modal:
Pilih "Kustom".
Masukkan "Item" sebagai nama kelas.
Klik "Buat kelas".
2.3. Tambahkan Kolom ke Kelas
Di kelas "Item", klik pada "+" untuk menambahkan kolom baru.
Tambahkan kolom berikut:
nama: Ketik String
deskripsi: Ketik String
Tambahkan beberapa data contoh ke kelas "Item". Misalnya:
2.4. Dapatkan Kredensial Aplikasi
Navigasikan ke Pengaturan Aplikasi > Keamanan & Kunci.
Catat ID Aplikasi dan Kunci Klien.
Langkah 3 – Menginisialisasi Parse di Aplikasi Flutter Anda
Buka lib/main.dart dan ubah seperti berikut:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'home_page.dart'; // You'll create this file next

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    debug: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Callback Shortcuts App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'home_page.dart'; // You'll create this file next

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    debug: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Callback Shortcuts App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}
﻿
Ganti 'YOUR_APPLICATION_ID' dan 'YOUR_CLIENT_KEY' dengan kredensial Back4App Anda yang sebenarnya.
Langkah 4 – Mengambil Data dari Back4App
Buat file baru lib/home_page.dart:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class Item {
  final String name;
  final String description;

  Item(this.name, this.description);
}

class _HomePageState extends State<HomePage> {
  List<Item> items = [];

  Future<void> fetchItems() async {
    final QueryBuilder<ParseObject> query =
        QueryBuilder<ParseObject>(ParseObject('Item'));

    final ParseResponse apiResponse = await query.query();

    if (apiResponse.success && apiResponse.results != null) {
      setState(() {
        items = apiResponse.results!.map((data) {
          final name = data.get<String>('name') ?? '';
          final description = data.get<String>('description') ?? '';
          return Item(name, description);
        }).toList();
      });
    } else {
      print('Error fetching data: ${apiResponse.error?.message}');
    }
  }

  @override
  void initState() {
    super.initState();
    fetchItems();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Callback Shortcuts App'),
      ),
      body: items.isEmpty
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: items.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(items[index].name),
                  subtitle: Text(items[index].description),
                );
              },
            ),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class Item {
  final String name;
  final String description;

  Item(this.name, this.description);
}

class _HomePageState extends State<HomePage> {
  List<Item> items = [];

  Future<void> fetchItems() async {
    final QueryBuilder<ParseObject> query =
        QueryBuilder<ParseObject>(ParseObject('Item'));

    final ParseResponse apiResponse = await query.query();

    if (apiResponse.success && apiResponse.results != null) {
      setState(() {
        items = apiResponse.results!.map((data) {
          final name = data.get<String>('name') ?? '';
          final description = data.get<String>('description') ?? '';
          return Item(name, description);
        }).toList();
      });
    } else {
      print('Error fetching data: ${apiResponse.error?.message}');
    }
  }

  @override
  void initState() {
    super.initState();
    fetchItems();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Callback Shortcuts App'),
      ),
      body: items.isEmpty
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: items.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(items[index].name),
                  subtitle: Text(items[index].description),
                );
              },
            ),
    );
  }
}
﻿
Penjelasan
Kelas Item: Kelas model untuk mewakili item yang diambil dari Back4App.
fetchItems(): Mengambil data dari kelas Item di Back4App dan memperbarui daftar items.
build(): Menampilkan daftar item atau indikator pemuatan jika data masih diambil.
Langkah 5 – Mengimplementasikan CallbackShortcuts
Sekarang, mari kita tambahkan pintasan keyboard untuk menyegarkan data dan menavigasi melalui daftar.
5.1. Tambahkan Widget Focus dan CallbackShortcuts
Modifikasi build() metode di home_page.dart:
Dart
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Callback Shortcuts App'),
    ),
    body: Focus(
      autofocus: true,
      child: CallbackShortcuts(
        bindings: {
          SingleActivator(LogicalKeyboardKey.keyR, control: true): () {
            fetchItems();
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Data refreshed')),
            );
          },
          SingleActivator(LogicalKeyboardKey.arrowDown): () {
            _focusNextItem();
          },
          SingleActivator(LogicalKeyboardKey.arrowUp): () {
            _focusPreviousItem();
          },
        },
        child: items.isEmpty
            ? Center(child: CircularProgressIndicator())
            : ListView.builder(
                itemCount: items.length,
                itemBuilder: (context, index) {
                  return FocusableActionDetector(
                    child: ListTile(
                      title: Text(items[index].name),
                      subtitle: Text(items[index].description),
                    ),
                  );
                },
              ),
      ),
    ),
  );
}
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Callback Shortcuts App'),
    ),
    body: Focus(
      autofocus: true,
      child: CallbackShortcuts(
        bindings: {
          SingleActivator(LogicalKeyboardKey.keyR, control: true): () {
            fetchItems();
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Data refreshed')),
            );
          },
          SingleActivator(LogicalKeyboardKey.arrowDown): () {
            _focusNextItem();
          },
          SingleActivator(LogicalKeyboardKey.arrowUp): () {
            _focusPreviousItem();
          },
        },
        child: items.isEmpty
            ? Center(child: CircularProgressIndicator())
            : ListView.builder(
                itemCount: items.length,
                itemBuilder: (context, index) {
                  return FocusableActionDetector(
                    child: ListTile(
                      title: Text(items[index].name),
                      subtitle: Text(items[index].description),
                    ),
                  );
                },
              ),
      ),
    ),
  );
}
﻿
Penjelasan
Focus Widget: Membungkus tubuh untuk memastikan dapat menerima fokus dan peristiwa keyboard.
CallbackShortcuts: Memetakan pintasan keyboard ke fungsi callback.
Ctrl + R: Memperbarui data dengan memanggil fetchItems().
Arrow Down: Memindahkan fokus ke item berikutnya.
Arrow Up: Memindahkan fokus ke item sebelumnya.
FocusableActionDetector: Membuat setiap ListTile dapat difokuskan untuk dinavigasi menggunakan keyboard.
5.2. Implementasikan Fungsi Navigasi
Tambahkan metode berikut untuk menangani navigasi item:
Dart
void _focusNextItem() {
  final focus = FocusScope.of(context);
  if (focus.canRequestFocus) {
    focus.nextFocus();
  }
}

void _focusPreviousItem() {
  final focus = FocusScope.of(context);
  if (focus.canRequestFocus) {
    focus.previousFocus();
  }
}
void _focusNextItem() {
  final focus = FocusScope.of(context);
  if (focus.canRequestFocus) {
    focus.nextFocus();
  }
}

void _focusPreviousItem() {
  final focus = FocusScope.of(context);
  if (focus.canRequestFocus) {
    focus.previousFocus();
  }
}
﻿
Langkah 6 – Menguji Pintasan Keyboard
6.1. Jalankan Aplikasi
Di terminal Anda, jalankan:
Bash
flutter run
flutter run
﻿
6.2. Uji Pintasan Segarkan
Tekan Ctrl + R (atau Cmd + R di macOS) saat aplikasi sedang berjalan.
Anda harus melihat pesan snackbar yang mengatakan "Data diperbarui".
Daftar harus diperbarui jika ada perubahan pada data.
6.3. Uji Pintasan Navigasi
Gunakan Tombol Panah Bawah dan Tombol Panah Atas untuk menavigasi melalui daftar.
Anda harus melihat fokus berpindah ke item yang berbeda.
Kesimpulan
Dalam tutorial ini, Anda belajar bagaimana mengimplementasikan pintasan keyboard dalam aplikasi Flutter menggunakan CallbackShortcuts. Anda mengintegrasikan Back4App untuk mengambil dan menampilkan data, serta meningkatkan pengalaman pengguna dengan memungkinkan pengguna berinteraksi dengan aplikasi menggunakan pintasan keyboard.
Poin Penting
CallbackShortcuts: Menyederhanakan penambahan pintasan keyboard dengan memetakan kombinasi tombol langsung ke fungsi callback.
Manajemen Fokus: Penting untuk widget agar menerima peristiwa keyboard.
Integrasi Back4App: Menyediakan backend yang dapat diskalakan untuk menyimpan dan mengambil data.
Langkah Selanjutnya
Perluas Pintasan: Tambahkan lebih banyak pintasan keyboard untuk fungsionalitas tambahan.
Modifikator Khusus Platform: Menangani perbedaan dalam tombol modifikasi antara platform (misalnya, Control vs. Command).
Aksesibilitas: Pastikan aplikasi Anda dapat diakses dengan mendukung navigasi keyboard dan pembaca layar.
Penanganan Kesalahan: Tingkatkan penanganan kesalahan saat mengambil data dari Back4App.
Sumber Daya Tambahan
﻿Dokumentasi Back4App﻿
﻿Panduan Parse SDK untuk Flutter﻿
﻿Dokumentasi Resmi Flutter﻿
﻿Widget CallbackShortcuts﻿
Selamat Berkoding!
Diperbarui 24 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Cara Membuat Widget Layar Utama di Flutter dengan HomeWidget dan Back4App
BERIKUTNYA
Membangun Aplikasi Flutter Drag-and-Drop dengan Widget Draggable dan Back4App