Más
Cómo crear widgets en la pantalla de inicio en Flutter con HomeWidget y Back4App

31min
Introducción
Los widgets de la pantalla de inicio permiten a los usuarios acceder a información en tiempo real de su aplicación directamente en la pantalla de inicio de su dispositivo sin abrir la aplicación. Con Flutter, crear estos widgets requiere algo de código específico de la plataforma. Sin embargo, el home_widget paquete cierra esta brecha al permitir el intercambio de datos entre su aplicación Flutter y los widgets de la pantalla de inicio utilizando código Dart.
En este tutorial, aprenderás cómo crear un widget de pantalla de inicio en Flutter utilizando el home_widget paquete e integrarlo con Back4App—un backend como servicio impulsado por Parse Server. Al final de este tutorial, tendrás una aplicación Flutter que muestra datos de Back4App en un widget de pantalla de inicio.
Requisitos previos
Para completar este tutorial, necesitarás:
Flutter SDK instalado en tu máquina. Puedes seguir la guía oficial de instalación de Flutter para tu sistema operativo.
Conocimientos básicos de Flutter y Dart. Si eres nuevo en Flutter, considera revisar la documentación de Flutter para familiarizarte con los conceptos básicos.
Un IDE o editor de texto como Visual Studio Code o Android Studio.
Una cuenta de Back4App. Regístrate para obtener una cuenta gratuita en Back4App.
Parse Server SDK para Flutter agregado a tu proyecto. Puedes aprender a configurarlo siguiendo la Guía del SDK de Flutter de Back4App.
Configuración específica de la plataforma para widgets de pantalla de inicio de Android e iOS.
Paso 1 – Configuración del Proyecto Flutter
1.1. Crear un Nuevo Proyecto Flutter
Abre tu terminal y ejecuta:
Bash
flutter create home_widget_app
flutter create home_widget_app
﻿
Navega al directorio del proyecto:
Bash
cd home_widget_app
cd home_widget_app
﻿
1.2. Agregar Dependencias
Abre pubspec.yaml y agrega las siguientes dependencias:
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
﻿
Ejecuta flutter pub get para instalar los paquetes.
Paso 2 – Configuración de Back4App
2.1. Crear una Nueva Aplicación en Back4App
Inicia sesión en tu panel de Back4App.
Haz clic en "Crear nueva App".
Ingresa un nombre para tu aplicación, por ejemplo, "HomeWidgetApp", y haz clic en "Crear".
2.2. Configurar el Modelo de Datos
En el panel de control de tu aplicación, navega a la "Base de datos" sección.
Haz clic en "Crear una clase".
En el modal:
Selecciona "Personalizado".
Ingresa "Mensaje" como el nombre de la clase.
Haz clic en "Crear clase".
2.3. Agregar columnas a la clase
En la "Mensaje" clase, haz clic en "+" para agregar una nueva columna.
Agrega las siguientes columnas:
título: Tipo Cadena
contenido: Tipo Cadena
Agrega algunos datos de ejemplo a la "Mensaje" clase. Por ejemplo:
2.4. Obtener credenciales de la aplicación
Navega a Configuración de la aplicación > Seguridad y claves.
Anota tu ID de aplicación y Clave de cliente.
Paso 3 – Inicializando Parse en tu aplicación Flutter
Abre lib/main.dart y modifícalo de la siguiente manera:
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());
}
﻿
Reemplaza 'YOUR_APPLICATION_ID' y 'YOUR_CLIENT_KEY' con tus credenciales reales de Back4App.
Paso 4 – Obteniendo datos de Back4App
Crea un nuevo archivo 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'),
                  ),
                ],
              ),
      ),
    );
  }
}
﻿
Explicación
Clase de Mensaje: Una clase de modelo simple para contener los datos del mensaje.
fetchMessage(): Obtiene datos de la Clase de Mensaje en Back4App y actualiza la variable de mensaje.
updateHomeWidget(): Guarda los datos obtenidos en el widget de la pantalla de inicio usando HomeWidget.saveWidgetData y desencadena una actualización usando HomeWidget.updateWidget.
build(): Muestra los datos del mensaje y un botón para actualizar el mensaje.
Paso 5 – Configuración del Widget de la Pantalla de Inicio
5.1. Configuración de Android
5.1.1. Crear el diseño del widget
Crea un nuevo archivo de diseño XML en android/app/src/main/res/layout/ llamado 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. Crear el proveedor del widget
Crea una nueva clase de Java en android/app/src/main/java/your/package/name/ llamada 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
    }
}
﻿
Reemplaza your.package.name con el nombre de tu paquete real.
5.1.3. Actualizar Android Manifest
Agrega el proveedor del widget a tu 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. Crear Widget Info XML
Crea un nuevo archivo XML en android/app/src/main/res/xml/ llamado 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. Configuración de iOS
5.2.1. Crear una Extensión de Widget
Abre tu proyecto de Flutter en Xcode abriendo ios/Runner.xcworkspace.
Haz clic en Archivo > Nuevo > Objetivo.
Elige Extensión de Widget y haz clic en Siguiente.
Ingresa HomeWidget como el nombre del producto y asegúrate de que Incluir Configuración de Intento esté desmarcado.
Haz clic en Finalizar y Activar el esquema.
5.2.2. Actualizar el Código del Widget
En la HomeWidget extensión, abre HomeWidget.swift y modifícalo:
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.")
    }
}
﻿
Reemplace YOUR_GROUP_ID con su identificador de grupo de aplicación (por ejemplo, group.com.example.homeWidgetApp).
5.2.3. Configurar Grupos de Aplicaciones
En Xcode, seleccione su proyecto y vaya a Signing & Capabilities.
Agregue "App Groups" tanto a su objetivo principal de la aplicación como a la extensión del widget.
Cree un nuevo Grupo de Aplicaciones (por ejemplo, group.com.example.homeWidgetApp).
Asegúrese de que ambos objetivos tengan habilitado el mismo Grupo de Aplicaciones.
5.3. Actualizar el Código de Flutter para Configuraciones Específicas de la Plataforma
En su updateHomeWidget() método en home_page.dart, actualice los nombres de los 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
);
﻿
Paso 6 – Ejecutando la App y Probando el Widget
6.1. Ejecutar la App
En tu terminal, ejecuta:
Bash
flutter run
flutter run
﻿
6.2. Agregar el Widget a tu Pantalla de Inicio
Android
Mantén presionada la pantalla de inicio y selecciona "Widgets".
Encuentra tu app en la lista de widgets.
Arrastra y suelta el widget en tu pantalla de inicio.
iOS
Ingresa modo de jiggle manteniendo presionada la pantalla de inicio.
Toca el "+" botón en la esquina superior izquierda.
Busca tu widget por nombre.
Agrega el widget a tu pantalla de inicio.
6.3. Actualizaciones de Datos de Prueba
Toca el "Botón de Actualizar Mensaje" en tu aplicación para obtener nuevos datos de Back4App.
El widget en tu pantalla de inicio debería actualizarse con los nuevos datos.
Conclusión
En este tutorial, aprendiste cómo crear un widget de pantalla de inicio en Flutter utilizando el home_widget paquete e integrarlo con Back4App para mostrar datos dinámicos. Esto te permite proporcionar a los usuarios información actualizada directamente en sus pantallas de inicio, mejorando el compromiso y la experiencia del usuario.
Próximos Pasos
Datos Dinámicos: Implementa actualizaciones de datos en tiempo real utilizando las Consultas en Vivo de Back4App.
Interactividad: Agrega acciones de clic a tu widget para abrir páginas específicas en tu aplicación.
Personalización: Estiliza tu widget para que coincida con el tema y diseño de tu aplicación.
Recursos Adicionales
﻿Documentación de Back4App﻿
﻿Paquete home_widget en pub.dev﻿
﻿Guía de Parse SDK para Flutter﻿
﻿Documentación Oficial de Flutter﻿
¡Feliz Codificación!
Actualizado 23 Jan 2025
¿Esta página le fue útil?
Guía Completa de Autenticación de Terceros en Flutter con Parse en Back4App
Cómo implementar atajos de teclado en Flutter con CallbackShortcuts y Back4App