Cara Membuat Widget Layar Utama di Flutter dengan HomeWidget dan Back4App

31min
Pendahuluan
Widget layar beranda memungkinkan pengguna untuk mengakses informasi waktu nyata dari aplikasi Anda langsung di layar beranda perangkat mereka tanpa membuka aplikasi. Dengan Flutter, membuat widget ini memerlukan beberapa kode spesifik platform. Namun, paket home_widget menjembatani kesenjangan ini dengan memungkinkan pertukaran data antara aplikasi Flutter Anda dan widget layar beranda menggunakan kode Dart.
Dalam tutorial ini, Anda akan belajar bagaimana cara membuat widget layar beranda di Flutter menggunakan paket home_widget dan mengintegrasikannya dengan Back4App—sebuah backend-as-a-service yang didukung oleh Parse Server. Pada akhir tutorial ini, Anda akan memiliki aplikasi Flutter yang menampilkan data dari Back4App dalam widget layar beranda.
Prasyarat
Untuk menyelesaikan tutorial ini, Anda akan memerlukan:
Flutter SDK terinstal di mesin Anda. Anda dapat mengikuti panduan instalasi Flutter resmi untuk sistem operasi Anda.
Pengetahuan dasar tentang Flutter dan Dart. Jika Anda baru mengenal Flutter, pertimbangkan untuk meninjau dokumentasi Flutter untuk membiasakan diri dengan dasar-dasarnya.
Sebuah IDE atau editor teks seperti Visual Studio Code atau Android Studio.
Sebuah akun Back4App. Daftar untuk akun gratis di Back4App.
Parse Server SDK untuk Flutter ditambahkan ke proyek Anda. Anda dapat belajar cara mengaturnya dengan mengikuti Panduan SDK Flutter Back4App.
Pengaturan spesifik platform untuk widget layar utama Android dan iOS.
Langkah 1 – Menyiapkan Proyek Flutter
1.1. Buat Proyek Flutter Baru
Buka terminal Anda dan jalankan:
Bash
flutter create home_widget_app
flutter create home_widget_app
﻿
Navigasi ke direktori proyek:
Bash
cd home_widget_app
cd home_widget_app
﻿
1.2. Tambahkan Dependensi
Buka pubspec.yaml dan tambahkan dependensi berikut:
YAML
dependencies:
  flutter:
    sdk: flutter
  home_widget: ^0.2.4
  parse_server_sdk_flutter: ^4.0.1
dependencies:
  flutter:
    sdk: flutter
  home_widget: ^0.2.4
  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, "HomeWidgetApp", dan klik "Buat".
2.2. Siapkan Model Data
Di dasbor aplikasi Anda, navigasikan ke bagian "Database".
Klik pada "Buat kelas".
Di modal:
Pilih "Kustom".
Masukkan "Pesan" sebagai nama kelas.
Klik "Buat kelas".
2.3. Tambahkan Kolom ke Kelas
Di kelas "Pesan" , klik pada "+" untuk menambahkan kolom baru.
Tambahkan kolom berikut:
judul: Ketik String
konten: Ketik String
Tambahkan beberapa data contoh ke kelas "Pesan". Misalnya:
2.4. Dapatkan Kredensial Aplikasi
Navigasikan ke Pengaturan Aplikasi > Keamanan & Kunci.
Catat ID Aplikasi dan Kunci Klien Anda.
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 'package:home_widget/home_widget.dart';
import 'dart:async';
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());
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:home_widget/home_widget.dart';
import 'dart:async';
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());
}
﻿
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';
import 'package:home_widget/home_widget.dart';
import 'dart:async';

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

class Message {
  final String title;
  final String content;

  Message(this.title, this.content);
}

class _HomePageState extends State<HomePage> {
  Message? message;

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

  Future<void> fetchMessage() async {
    final QueryBuilder<ParseObject> query =
        QueryBuilder<ParseObject>(ParseObject('Message'));

    final ParseResponse apiResponse = await query.query();

    if (apiResponse.success && apiResponse.results != null) {
      final data = apiResponse.results!.first;
      final title = data.get<String>('title') ?? '';
      final content = data.get<String>('content') ?? '';
      setState(() {
        message = Message(title, content);
      });
      updateHomeWidget(title, content);
    } else {
      print('Error fetching data: ${apiResponse.error?.message}');
    }
  }

  Future<void> updateHomeWidget(String title, String content) async {
    await HomeWidget.saveWidgetData<String>('title', title);
    await HomeWidget.saveWidgetData<String>('content', content);
    await HomeWidget.updateWidget(
        name: 'HomeWidgetProvider', // Name of your HomeWidgetProvider
        iOSName: 'HomeWidget');     // Used in iOS
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Widget App'),
      ),
      body: Center(
        child: message == null
            ? CircularProgressIndicator()
            : Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    message!.title,
                    style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                  ),
                  SizedBox(height: 10),
                  Text(
                    message!.content,
                    style: TextStyle(fontSize: 18),
                  ),
                  SizedBox(height: 20),
                  ElevatedButton(
                    onPressed: fetchMessage,
                    child: Text('Refresh Message'),
                  ),
                ],
              ),
      ),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:home_widget/home_widget.dart';
import 'dart:async';

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

class Message {
  final String title;
  final String content;

  Message(this.title, this.content);
}

class _HomePageState extends State<HomePage> {
  Message? message;

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

  Future<void> fetchMessage() async {
    final QueryBuilder<ParseObject> query =
        QueryBuilder<ParseObject>(ParseObject('Message'));

    final ParseResponse apiResponse = await query.query();

    if (apiResponse.success && apiResponse.results != null) {
      final data = apiResponse.results!.first;
      final title = data.get<String>('title') ?? '';
      final content = data.get<String>('content') ?? '';
      setState(() {
        message = Message(title, content);
      });
      updateHomeWidget(title, content);
    } else {
      print('Error fetching data: ${apiResponse.error?.message}');
    }
  }

  Future<void> updateHomeWidget(String title, String content) async {
    await HomeWidget.saveWidgetData<String>('title', title);
    await HomeWidget.saveWidgetData<String>('content', content);
    await HomeWidget.updateWidget(
        name: 'HomeWidgetProvider', // Name of your HomeWidgetProvider
        iOSName: 'HomeWidget');     // Used in iOS
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Widget App'),
      ),
      body: Center(
        child: message == null
            ? CircularProgressIndicator()
            : Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    message!.title,
                    style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                  ),
                  SizedBox(height: 10),
                  Text(
                    message!.content,
                    style: TextStyle(fontSize: 18),
                  ),
                  SizedBox(height: 20),
                  ElevatedButton(
                    onPressed: fetchMessage,
                    child: Text('Refresh Message'),
                  ),
                ],
              ),
      ),
    );
  }
}
﻿
Penjelasan
Kelas Pesan: Sebuah kelas model sederhana untuk menyimpan data pesan.
fetchMessage(): Mengambil data dari Kelas Pesan di Back4App dan memperbarui variabel pesan.
updateHomeWidget(): Menyimpan data yang diambil ke widget layar beranda menggunakan HomeWidget.saveWidgetData dan memicu pembaruan menggunakan HomeWidget.updateWidget.
build(): Menampilkan data pesan dan tombol untuk menyegarkan pesan.
Langkah 5 – Menyiapkan Widget Layar Beranda
5.1. Pengaturan Android
5.1.1. Buat Tata Letak Widget
Buat file tata letak XML baru di android/app/src/main/res/layout/ bernama home_widget.xml:
XML
<!-- android/app/src/main/res/layout/home_widget.xml -->
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <TextView
        android:id="@+id/widget_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Title"
        android:textSize="18sp"
        android:layout_gravity="center_horizontal|top"
        android:paddingTop="16dp"/>

    <TextView
        android:id="@+id/widget_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Content"
        android:textSize="14sp"
        android:layout_gravity="center"
        android:paddingTop="8dp"/>

</FrameLayout>
<!-- android/app/src/main/res/layout/home_widget.xml -->
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <TextView
        android:id="@+id/widget_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Title"
        android:textSize="18sp"
        android:layout_gravity="center_horizontal|top"
        android:paddingTop="16dp"/>

    <TextView
        android:id="@+id/widget_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Content"
        android:textSize="14sp"
        android:layout_gravity="center"
        android:paddingTop="8dp"/>

</FrameLayout>
﻿
5.1.2. Buat Penyedia Widget
Buat kelas Java baru di android/app/src/main/java/your/package/name/ bernama HomeWidgetProvider.java:
Java
// android/app/src/main/java/your/package/name/HomeWidgetProvider.java
package your.package.name;

import android.appwidget.AppWidgetManager;
import android.appwidget.AppWidgetProvider;
import android.content.Context;

public class HomeWidgetProvider extends AppWidgetProvider {
    @Override
    public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds) {
        // The HomeWidget package handles the update
    }
}
// android/app/src/main/java/your/package/name/HomeWidgetProvider.java
package your.package.name;

import android.appwidget.AppWidgetManager;
import android.appwidget.AppWidgetProvider;
import android.content.Context;

public class HomeWidgetProvider extends AppWidgetProvider {
    @Override
    public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds) {
        // The HomeWidget package handles the update
    }
}
﻿
Ganti your.package.name dengan nama paket Anda yang sebenarnya.
5.1.3. Perbarui Android Manifest
Tambahkan penyedia widget ke AndroidManifest.xml:
XML
<!-- Add inside the <application> tag -->
<receiver android:name=".HomeWidgetProvider">
    <intent-filter>
        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
    </intent-filter>

    <meta-data android:name="android.appwidget.provider"
        android:resource="@xml/home_widget_info"/>
</receiver>
<!-- Add inside the <application> tag -->
<receiver android:name=".HomeWidgetProvider">
    <intent-filter>
        <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
    </intent-filter>

    <meta-data android:name="android.appwidget.provider"
        android:resource="@xml/home_widget_info"/>
</receiver>
﻿
5.1.4. Buat Widget Info XML
Buat file XML baru di android/app/src/main/res/xml/ bernama home_widget_info.xml:
XML
<!-- android/app/src/main/res/xml/home_widget_info.xml -->
<?xml version="1.0" encoding="utf-8"?>
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:initialLayout="@layout/home_widget"
    android:minWidth="180dp"
    android:minHeight="110dp"
    android:updatePeriodMillis="0"
    android:resizeMode="horizontal|vertical"
    android:widgetCategory="home_screen">
</appwidget-provider>
<!-- android/app/src/main/res/xml/home_widget_info.xml -->
<?xml version="1.0" encoding="utf-8"?>
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:initialLayout="@layout/home_widget"
    android:minWidth="180dp"
    android:minHeight="110dp"
    android:updatePeriodMillis="0"
    android:resizeMode="horizontal|vertical"
    android:widgetCategory="home_screen">
</appwidget-provider>
﻿
5.2. Pengaturan iOS
5.2.1. Buat Ekstensi Widget
Buka proyek Flutter Anda di Xcode dengan membuka ios/Runner.xcworkspace.
Klik File > New > Target.
Pilih Widget Extension dan klik Next.
Masukkan HomeWidget sebagai nama produk dan pastikan Include Configuration Intent tidak dicentang.
Klik Finish dan Activate skema.
5.2.2. Perbarui Kode Widget
Di dalam HomeWidget ekstensi, buka HomeWidget.swift dan modifikasi:
Swift
import WidgetKit
import SwiftUI

struct Provider: TimelineProvider {
    func placeholder(in context: Context) -> SimpleEntry {
        SimpleEntry(date: Date(), title: "Title", content: "Content")
    }

    func getSnapshot(in context: Context, completion: @escaping (SimpleEntry) -> ()) {
        let entry = SimpleEntry(date: Date(), title: "Title", content: "Content")
        completion(entry)
    }

    func getTimeline(in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
        var entries: [SimpleEntry] = []

        let sharedDefaults = UserDefaults(suiteName: "YOUR_GROUP_ID")
        let title = sharedDefaults?.string(forKey: "title") ?? "Title"
        let content = sharedDefaults?.string(forKey: "content") ?? "Content"

        let entryDate = Date()
        let entry = SimpleEntry(date: entryDate, title: title, content: content)
        entries.append(entry)

        let timeline = Timeline(entries: entries, policy: .never)
        completion(timeline)
    }
}

struct SimpleEntry: TimelineEntry {
    let date: Date
    let title: String
    let content: String
}

struct HomeWidgetEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        VStack {
            Text(entry.title)
                .font(.headline)
            Text(entry.content)
                .font(.body)
        }
    }
}

@main
struct HomeWidget: Widget {
    let kind: String = "HomeWidget"

    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            HomeWidgetEntryView(entry: entry)
        }
        .configurationDisplayName("Home Widget")
        .description("This is a home screen widget.")
    }
}
import WidgetKit
import SwiftUI

struct Provider: TimelineProvider {
    func placeholder(in context: Context) -> SimpleEntry {
        SimpleEntry(date: Date(), title: "Title", content: "Content")
    }

    func getSnapshot(in context: Context, completion: @escaping (SimpleEntry) -> ()) {
        let entry = SimpleEntry(date: Date(), title: "Title", content: "Content")
        completion(entry)
    }

    func getTimeline(in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
        var entries: [SimpleEntry] = []

        let sharedDefaults = UserDefaults(suiteName: "YOUR_GROUP_ID")
        let title = sharedDefaults?.string(forKey: "title") ?? "Title"
        let content = sharedDefaults?.string(forKey: "content") ?? "Content"

        let entryDate = Date()
        let entry = SimpleEntry(date: entryDate, title: title, content: content)
        entries.append(entry)

        let timeline = Timeline(entries: entries, policy: .never)
        completion(timeline)
    }
}

struct SimpleEntry: TimelineEntry {
    let date: Date
    let title: String
    let content: String
}

struct HomeWidgetEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        VStack {
            Text(entry.title)
                .font(.headline)
            Text(entry.content)
                .font(.body)
        }
    }
}

@main
struct HomeWidget: Widget {
    let kind: String = "HomeWidget"

    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            HomeWidgetEntryView(entry: entry)
        }
        .configurationDisplayName("Home Widget")
        .description("This is a home screen widget.")
    }
}
﻿
Ganti YOUR_GROUP_ID dengan pengidentifikasi Grup Aplikasi Anda (misalnya, group.com.example.homeWidgetApp).
5.2.3. Atur Grup Aplikasi
Di Xcode, pilih proyek Anda dan pergi ke Signing & Capabilities.
Tambahkan "App Groups" ke target aplikasi utama dan ekstensi widget.
Buat Grup Aplikasi baru (misalnya, group.com.example.homeWidgetApp).
Pastikan kedua target memiliki Grup Aplikasi yang sama diaktifkan.
5.3. Perbarui Kode Flutter untuk Konfigurasi Spesifik Platform
Di updateHomeWidget() metode Anda di home_page.dart, perbarui nama widget:
Dart
await HomeWidget.updateWidget(
    name: 'HomeWidgetProvider', // For Android, the class name of your AppWidgetProvider
    iOSName: 'HomeWidget',      // For iOS, the name of your Widget Extension
);
await HomeWidget.updateWidget(
    name: 'HomeWidgetProvider', // For Android, the class name of your AppWidgetProvider
    iOSName: 'HomeWidget',      // For iOS, the name of your Widget Extension
);
﻿
Langkah 6 – Menjalankan Aplikasi dan Menguji Widget
6.1. Jalankan Aplikasi
Di terminal Anda, jalankan:
Bash
flutter run
flutter run
﻿
6.2. Tambahkan Widget ke Layar Utama Anda
Android
Tekan lama pada layar utama dan pilih "Widgets".
Temukan aplikasi Anda di daftar widget.
Seret dan jatuhkan widget ke layar utama Anda.
iOS
Masuk ke mode jiggle dengan menekan lama pada layar utama.
Ketuk tombol "+" di sudut kiri atas.
Cari widget Anda berdasarkan nama.
Tambahkan widget ke layar utama Anda.
6.3. Pembaruan Data Uji
Ketuk "Refresh Message" tombol di aplikasi Anda untuk mengambil data baru dari Back4App.
Widget di layar beranda Anda harus diperbarui dengan data baru.
Kesimpulan
Dalam tutorial ini, Anda belajar bagaimana cara membuat widget layar beranda di Flutter menggunakan paket home_widget dan mengintegrasikannya dengan Back4App untuk menampilkan data dinamis. Ini memungkinkan Anda memberikan informasi terkini kepada pengguna langsung di layar beranda mereka, meningkatkan keterlibatan dan pengalaman pengguna.
Langkah Selanjutnya
Data Dinamis: Terapkan pembaruan data waktu nyata menggunakan Live Queries dari Back4App.
Interaktivitas: Tambahkan aksi klik pada widget Anda untuk membuka halaman tertentu di aplikasi Anda.
Kustomisasi: Gaya widget Anda agar sesuai dengan tema dan desain aplikasi Anda.
Sumber Daya Tambahan
﻿Dokumentasi Back4App﻿
﻿Paket home_widget di pub.dev﻿
﻿Panduan Parse SDK untuk Flutter﻿
﻿Dokumentasi Resmi Flutter﻿
Selamat Berkoding!
Diperbarui 24 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Panduan Lengkap untuk Autentikasi Pihak Ketiga di Flutter dengan Parse di Back4App
BERIKUTNYA
Cara Mengimplementasikan Pintasan Keyboard di Flutter dengan CallbackShortcuts dan Back4App