Comment créer des widgets d'écran d'accueil dans Flutter avec HomeWidget et Back4App

31min
Introduction
Les widgets de l'écran d'accueil permettent aux utilisateurs d'accéder à des informations en temps réel de votre application directement sur l'écran d'accueil de leur appareil sans ouvrir l'application. Avec Flutter, la création de ces widgets nécessite un certain code spécifique à la plateforme. Cependant, le home_widget package comble cette lacune en permettant l'échange de données entre votre application Flutter et les widgets de l'écran d'accueil en utilisant du code Dart.
Dans ce tutoriel, vous apprendrez à créer un widget d'écran d'accueil dans Flutter en utilisant le home_widget package et à l'intégrer avec Back4App—un backend en tant que service alimenté par Parse Server. À la fin de ce tutoriel, vous aurez une application Flutter qui affiche des données de Back4App dans un widget d'écran d'accueil.
Prérequis
Pour compléter ce tutoriel, vous aurez besoin de :
Flutter SDK installé sur votre machine. Vous pouvez suivre le guide d'installation officiel de Flutter pour votre système d'exploitation.
Connaissances de base en Flutter et Dart. Si vous êtes nouveau sur Flutter, envisagez de consulter la documentation Flutter pour vous familiariser avec les bases.
Un IDE ou éditeur de texte tel que Visual Studio Code ou Android Studio.
Un compte Back4App. Inscrivez-vous pour un compte gratuit sur Back4App.
Parse Server SDK pour Flutter ajouté à votre projet. Vous pouvez apprendre à le configurer en suivant le Guide SDK Flutter de Back4App.
Configuration spécifique à la plateforme pour les widgets d'écran d'accueil Android et iOS.
Étape 1 – Configuration du projet Flutter
1.1. Créer un nouveau projet Flutter
Ouvrez votre terminal et exécutez :
Bash
flutter create home_widget_app
flutter create home_widget_app
﻿
Naviguez vers le répertoire du projet :
Bash
cd home_widget_app
cd home_widget_app
﻿
1.2. Ajouter des dépendances
Ouvrez pubspec.yaml et ajoutez les dépendances suivantes :
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
﻿
Exécutez flutter pub get pour installer les paquets.
Étape 2 – Configuration de Back4App
2.1. Créer une nouvelle application Back4App
Connectez-vous à votre tableau de bord Back4App.
Cliquez sur "Créer une nouvelle application".
Entrez un nom pour votre application, par exemple, "HomeWidgetApp", et cliquez sur "Créer".
2.2. Configurer le modèle de données
Dans le tableau de bord de votre application, accédez à la "Base de données" section.
Cliquez sur "Créer une classe".
Dans la fenêtre modale:
Sélectionnez "Personnalisé".
Entrez "Message" comme nom de la classe.
Cliquez sur "Créer la classe".
2.3. Ajouter des colonnes à la classe
Dans la classe "Message" , cliquez sur "+" pour ajouter une nouvelle colonne.
Ajoutez les colonnes suivantes:
titre: Type Chaîne
contenu: Type Chaîne
Ajoutez quelques données d'exemple à la "Message" classe. Par exemple:
2.4. Obtenir les identifiants de l'application
Accédez à Paramètres de l'application > Sécurité et clés.
Notez votre ID d'application et votre Clé client.
Étape 3 – Initialisation de Parse dans votre application Flutter
Ouvrez lib/main.dart et modifiez-le comme suit :
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());
}
﻿
Remplacez 'YOUR_APPLICATION_ID' et 'YOUR_CLIENT_KEY' par vos véritables identifiants Back4App.
Étape 4 – Récupération des données depuis Back4App
Créer un nouveau fichier 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'),
                  ),
                ],
              ),
      ),
    );
  }
}
﻿
Explication
Classe de Message: Une classe modèle simple pour contenir les données du message.
fetchMessage(): Récupère les données de la Message classe dans Back4App et met à jour la variable message.
updateHomeWidget(): Enregistre les données récupérées dans le widget de l'écran d'accueil en utilisant HomeWidget.saveWidgetData et déclenche une mise à jour en utilisant HomeWidget.updateWidget.
build(): Affiche les données du message et un bouton pour rafraîchir le message.
Étape 5 – Configuration du Widget de l'Écran d'Accueil
5.1. Configuration Android
5.1.1. Créer la mise en page du widget
Créez un nouveau fichier de mise en page XML dans android/app/src/main/res/layout/ nommé 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. Créer le fournisseur de widget
Créez une nouvelle classe Java dans android/app/src/main/java/your/package/name/ nommée 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
    }
}
﻿
Remplacez your.package.name par votre nom de package réel.
5.1.3. Mettre à jour le manifeste Android
Ajoutez le fournisseur de widget à votre 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. Créer le fichier d'informations du widget XML
Créez un nouveau fichier XML dans android/app/src/main/res/xml/ nommé 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. Configuration iOS
5.2.1. Créer une extension de widget
Ouvrez votre projet Flutter dans Xcode en ouvrant ios/Runner.xcworkspace.
Cliquez sur Fichier > Nouveau > Cible.
Choisissez Extension de widget et cliquez sur Suivant.
Entrez HomeWidget comme nom du produit et assurez-vous que Inclure l'intention de configuration est décoché.
Cliquez sur Terminer et Activez le schéma.
5.2.2. Mettre à jour le code du widget
Dans l'extension HomeWidget , ouvrez HomeWidget.swift et modifiez-le :
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.")
    }
}
﻿
Remplacez YOUR_GROUP_ID par l'identifiant de votre groupe d'applications (par exemple, group.com.example.homeWidgetApp).
5.2.3. Configurer les groupes d'applications
Dans Xcode, sélectionnez votre projet et allez à Signing & Capabilities.
Ajoutez "App Groups" à la fois à votre cible d'application principale et à l'extension de widget.
Créez un nouveau groupe d'applications (par exemple, group.com.example.homeWidgetApp).
Assurez-vous que les deux cibles ont le même groupe d'applications activé.
5.3. Mettre à jour le code Flutter pour les configurations spécifiques à la plateforme
Dans votre updateHomeWidget() méthode dans home_page.dart, mettez à jour les noms des widgets:
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
);
﻿
Étape 6 – Exécution de l'application et test du widget
6.1. Exécuter l'application
Dans votre terminal, exécutez :
Bash
flutter run
flutter run
﻿
6.2. Ajouter le widget à votre écran d'accueil
Android
Appuyez longuement sur l'écran d'accueil et sélectionnez "Widgets".
Trouvez votre application dans la liste des widgets.
Faites glisser et déposez le widget sur votre écran d'accueil.
iOS
Entrez le mode jiggle en appuyant longuement sur l'écran d'accueil.
Appuyez sur le "+" bouton dans le coin supérieur gauche.
Recherchez votre widget par nom.
Ajoutez le widget à votre écran d'accueil.
6.3. Mises à jour des données de test
Appuyez sur le "Bouton de rafraîchissement" dans votre application pour récupérer de nouvelles données depuis Back4App.
Le widget sur votre écran d'accueil devrait se mettre à jour avec les nouvelles données.
Conclusion
Dans ce tutoriel, vous avez appris à créer un widget d'écran d'accueil dans Flutter en utilisant le home_widget package et à l'intégrer avec Back4App pour afficher des données dynamiques. Cela vous permet de fournir aux utilisateurs des informations à jour directement sur leurs écrans d'accueil, améliorant ainsi l'engagement et l'expérience utilisateur.
Prochaines étapes
Données dynamiques: Implémentez des mises à jour de données en temps réel en utilisant les requêtes en direct de Back4App.
Interactivité: Ajoutez des actions de clic à votre widget pour ouvrir des pages spécifiques dans votre application.
Personnalisation: Stylisez votre widget pour qu'il corresponde au thème et au design de votre application.
Ressources supplémentaires
﻿Documentation de Back4App﻿
﻿Package home_widget sur pub.dev﻿
﻿Guide du SDK Parse pour Flutter﻿
﻿Documentation officielle de Flutter﻿
Bon codage !
Mis à jour 23 Jan 2025
Cette page vous a-t-elle aidée?
Guide complet de l'authentification tierce en Flutter avec Parse sur Back4App
Comment implémenter des raccourcis clavier dans Flutter avec CallbackShortcuts et Back4App