Di più
Come creare widget per la schermata principale in Flutter con HomeWidget e Back4App?

31min
Introduzione
I widget della schermata principale consentono agli utenti di accedere a informazioni in tempo reale dalla tua app direttamente sulla schermata principale del loro dispositivo senza aprire l'app. Con Flutter, la creazione di questi widget richiede un po' di codice specifico per la piattaforma. Tuttavia, il home_widget pacchetto colma questa lacuna abilitando lo scambio di dati tra la tua app Flutter e i widget della schermata principale utilizzando codice Dart.
In questo tutorial, imparerai a creare un widget della schermata principale in Flutter utilizzando il home_widget pacchetto e integrarlo con Back4App—un backend-as-a-service alimentato da Parse Server. Alla fine di questo tutorial, avrai un'app Flutter che visualizza i dati da Back4App in un widget della schermata principale.
Prerequisiti
Per completare questo tutorial, avrai bisogno di:
Flutter SDK installato sul tuo computer. Puoi seguire la guida ufficiale all'installazione di Flutter per il tuo sistema operativo.
Conoscenze di base di Flutter e Dart. Se sei nuovo a Flutter, considera di rivedere la documentazione di Flutter per familiarizzare con le basi.
Un IDE o editor di testo come Visual Studio Code o Android Studio.
Un account Back4App. Registrati per un account gratuito su Back4App.
Parse Server SDK per Flutter aggiunto al tuo progetto. Puoi imparare come configurarlo seguendo la Guida SDK Flutter di Back4App.
Configurazione specifica della piattaforma per i widget della schermata principale di Android e iOS.
Passo 1 – Configurazione del Progetto Flutter
1.1. Crea un Nuovo Progetto Flutter
Apri il tuo terminale e esegui:
Bash
flutter create home_widget_app
flutter create home_widget_app
﻿
Naviga nella directory del progetto:
Bash
cd home_widget_app
cd home_widget_app
﻿
1.2. Aggiungi Dipendenze
Apri pubspec.yaml e aggiungi le seguenti dipendenze:
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
﻿
Esegui flutter pub get per installare i pacchetti.
Passo 2 – Configurazione di Back4App
2.1. Crea una Nuova Applicazione Back4App
Accedi al tuo dashboard di Back4App.
Clicca su "Crea nuova App".
Inserisci un nome per la tua applicazione, ad esempio, "HomeWidgetApp", e clicca su "Crea".
2.2. Configura il Modello di Dati
Nel tuo cruscotto dell'applicazione, vai alla "Database" sezione.
Clicca su "Crea una classe".
Nella finestra modale:
Seleziona "Personalizzato".
Inserisci "Messaggio" come nome della classe.
Clicca "Crea classe".
2.3. Aggiungi colonne alla classe
Nella classe "Messaggio" clicca su "+" per aggiungere una nuova colonna.
Aggiungi le seguenti colonne:
titolo: Tipo Stringa
contenuto: Tipo Stringa
Aggiungi alcuni dati di esempio alla "Messaggio" classe. Ad esempio:
2.4. Ottieni le credenziali dell'applicazione
Naviga su Impostazioni App > Sicurezza e Chiavi.
Annota il tuo ID Applicazione e Chiave Client.
Passaggio 3 – Inizializzazione di Parse nella tua app Flutter
Apri lib/main.dart e modificalo come segue:
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());
}
﻿
Sostituisci 'YOUR_APPLICATION_ID' e 'YOUR_CLIENT_KEY' con le tue credenziali effettive di Back4App.
Passaggio 4 – Recupero dei dati da Back4App
Crea un nuovo file 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'),
                  ),
                ],
              ),
      ),
    );
  }
}
﻿
Spiegazione
Classe Messaggio: Una semplice classe modello per contenere i dati del messaggio.
fetchMessage(): Recupera i dati dalla Classe Messaggio in Back4App e aggiorna la variabile messaggio.
updateHomeWidget(): Salva i dati recuperati nel widget della schermata principale utilizzando HomeWidget.saveWidgetData e attiva un aggiornamento utilizzando HomeWidget.updateWidget.
build(): Visualizza i dati del messaggio e un pulsante per aggiornare il messaggio.
Passo 5 – Configurazione del Widget della Schermata Principale
5.1. Configurazione Android
5.1.1. Crea il Layout del Widget
Crea un nuovo file di layout XML in android/app/src/main/res/layout/ chiamato 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. Crea il Provider del Widget
Crea una nuova classe Java in android/app/src/main/java/your/package/name/ chiamata 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
    }
}
﻿
Sostituisci your.package.name con il tuo nome pacchetto reale.
5.1.3. Aggiorna Android Manifest
Aggiungi il provider del widget al tuo 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. Crea Widget Info XML
Crea un nuovo file XML in android/app/src/main/res/xml/ chiamato 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. Configurazione iOS
5.2.1. Crea un'estensione Widget
Apri il tuo progetto Flutter in Xcode aprendo ios/Runner.xcworkspace.
Clicca File > Nuovo > Target.
Scegli Widget Extension e clicca Avanti.
Inserisci HomeWidget come nome del prodotto e assicurati che Includi Configurazione Intent non sia selezionato.
Clicca Fine e Attiva lo schema.
5.2.2. Aggiorna il codice del Widget
Nell'estensione HomeWidget apri HomeWidget.swift e modificalo:
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.")
    }
}
﻿
Sostituisci YOUR_GROUP_ID con il tuo identificatore del gruppo app (ad es., group.com.example.homeWidgetApp).
5.2.3. Configura i Gruppi App
In Xcode, seleziona il tuo progetto e vai a Signing & Capabilities.
Aggiungi "App Groups" sia al tuo target principale dell'app che all'estensione del widget.
Crea un nuovo Gruppo App (ad es., group.com.example.homeWidgetApp).
Assicurati che entrambi i target abbiano lo stesso Gruppo App abilitato.
5.3. Aggiorna il Codice Flutter per Configurazioni Specifiche della Piattaforma
Nel tuo updateHomeWidget() metodo in home_page.dart, aggiorna i nomi dei 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
);
﻿
Passo 6 – Eseguire l'App e Testare il Widget
6.1. Esegui l'App
Nel tuo terminale, esegui:
Bash
flutter run
flutter run
﻿
6.2. Aggiungi il Widget alla Tua Home Screen
Android
Tieni premuto sulla home screen e seleziona "Widgets".
Trova la tua app nell'elenco dei widget.
Trascina e rilascia il widget sulla tua home screen.
iOS
Entra in modalità jiggle tenendo premuto sulla home screen.
Tocca il "+" pulsante nell'angolo in alto a sinistra.
Cerca il tuo widget per nome.
Aggiungi il widget alla tua home screen.
6.3. Aggiornamenti dei Dati di Test
Tocca il "Pulsante di Aggiornamento" nella tua app per recuperare nuovi dati da Back4App.
Il widget sulla tua schermata principale dovrebbe aggiornarsi con i nuovi dati.
Conclusione
In questo tutorial, hai imparato come creare un widget per la schermata principale in Flutter utilizzando il home_widget pacchetto e integrandolo con Back4App per visualizzare dati dinamici. Questo ti consente di fornire agli utenti informazioni aggiornate direttamente sulle loro schermate principali, migliorando il coinvolgimento e l'esperienza dell'utente.
Prossimi Passi
Dati Dinamici: Implementa aggiornamenti dei dati in tempo reale utilizzando le Live Queries di Back4App.
Interattività: Aggiungi azioni di clic al tuo widget per aprire pagine specifiche nella tua app.
Personalizzazione: Stila il tuo widget per adattarlo al tema e al design della tua app.
Risorse Aggiuntive
﻿Documentazione di Back4App﻿
﻿Pacchetto home_widget su pub.dev﻿
﻿Guida al Parse SDK per Flutter﻿
﻿Documentazione Ufficiale di Flutter﻿
Buon Codice!
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Guida completa all'autenticazione di terze parti in Flutter con Parse su Back4App
AVANTI IL PROSSIMO
Come implementare le scorciatoie da tastiera in Flutter con CallbackShortcuts e Back4App?