Как создать виджеты на главном экране в Flutter с помощью HomeWidget и Back4App

31min
Введение
Виджеты на главном экране позволяют пользователям получать информацию в реальном времени из вашего приложения прямо на главном экране их устройства без открытия приложения. С помощью Flutter создание этих виджетов требует некоторого кода, специфичного для платформы. Однако пакет home_widget устраняет этот разрыв, позволяя обмениваться данными между вашим приложением Flutter и виджетами на главном экране с использованием кода Dart.
В этом учебном пособии вы узнаете, как создать виджет на главном экране в Flutter, используя пакет home_widget и интегрировать его с Back4App — бэкендом как сервисом, работающим на Parse Server. К концу этого учебного пособия у вас будет приложение Flutter, которое отображает данные из Back4App в виджете на главном экране.
Предварительные требования
Чтобы завершить это учебное пособие, вам потребуется:
Flutter SDK установлен на вашем компьютере. Вы можете следовать за официальным руководством по установке Flutter для вашей операционной системы.
Базовые знания Flutter и Dart. Если вы новичок в Flutter, рассмотрите возможность изучения документации Flutter для ознакомления с основами.
IDE или текстовый редактор такой как Visual Studio Code или Android Studio.
Аккаунт Back4App. Зарегистрируйтесь для получения бесплатного аккаунта на Back4App.
Parse Server SDK для Flutter добавлен в ваш проект. Вы можете узнать, как его настроить, следуя за Руководством по Flutter SDK от Back4App.
Настройка, специфичная для платформы для виджетов на главном экране Android и iOS.
Шаг 1 – Настройка проекта Flutter
1.1. Создайте новый проект Flutter
Откройте терминал и выполните:
Bash
flutter create home_widget_app
flutter create home_widget_app
﻿
Перейдите в каталог проекта:
Bash
cd home_widget_app
cd home_widget_app
﻿
1.2. Добавить зависимости
Откройте pubspec.yaml и добавьте следующие зависимости:
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
﻿
Запустите flutter pub get для установки пакетов.
Шаг 2 – Настройка Back4App
2.1. Создайте новое приложение Back4App
Войдите в вашу панель управления Back4App.
Нажмите на "Создать новое приложение".
Введите имя для вашего приложения, например, "HomeWidgetApp", и нажмите "Создать".
2.2. Настройте модель данных
В вашей панели управления приложением перейдите в раздел "База данных".
Нажмите на "Создать класс".
В модальном окне:
Выберите "Пользовательский".
Введите "Сообщение" в качестве имени класса.
Нажмите "Создать класс".
2.3. Добавить столбцы в класс
В классе "Сообщение" нажмите на "+" для добавления нового столбца.
Добавьте следующие столбцы:
название: Тип Строка
содержимое: Тип Строка
Добавьте несколько образцов данных в класс "Сообщение". Например:
2.4. Получить учетные данные приложения
Перейдите в Настройки приложения > Безопасность и ключи.
Запишите ваш Идентификатор приложения и Ключ клиента.
Шаг 3 – Инициализация Parse в вашем приложении Flutter
Откройте lib/main.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';
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());
}
﻿
Замените 'YOUR_APPLICATION_ID' и 'YOUR_CLIENT_KEY' на ваши реальные учетные данные Back4App.
Шаг 4 – Получение данных из Back4App
Создайте новый файл 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'),
                  ),
                ],
              ),
      ),
    );
  }
}
﻿
Объяснение
Класс сообщения: Простая модель класса для хранения данных сообщения.
fetchMessage(): Извлекает данные из класса Message в Back4App и обновляет переменную message.
updateHomeWidget(): Сохраняет извлеченные данные в виджет домашнего экрана с помощью HomeWidget.saveWidgetData, и инициирует обновление с помощью HomeWidget.updateWidget.
build(): Отображает данные сообщения и кнопку для обновления сообщения.
Шаг 5 – Настройка виджета домашнего экрана
5.1. Настройка Android
5.1.1. Создание макета виджета
Создайте новый XML файл макета в android/app/src/main/res/layout/ с именем 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. Создание провайдера виджета
Создайте новый класс Java в android/app/src/main/java/your/package/name/ с именем 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
    }
}
﻿
Замените your.package.name на ваше фактическое имя пакета.
5.1.3. Обновите Android Manifest
Добавьте провайдер виджетов в ваш 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. Создайте XML для информации о виджете
Создайте новый XML файл в android/app/src/main/res/xml/ с именем 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. Настройка iOS
5.2.1. Создание расширения виджета
Откройте ваш проект Flutter в Xcode, открыв ios/Runner.xcworkspace.
Нажмите File > New > Target.
Выберите Widget Extension и нажмите Next.
Введите HomeWidget в качестве имени продукта и убедитесь, что Include Configuration Intent не отмечено.
Нажмите Finish и Activate схему.
5.2.2. Обновите код виджета
В расширении HomeWidget откройте HomeWidget.swift и измените его:
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.")
    }
}
﻿
Замените YOUR_GROUP_ID на идентификатор вашей группы приложений (например, group.com.example.homeWidgetApp).
5.2.3. Настройка групп приложений
В Xcode выберите ваш проект и перейдите в Signing & Capabilities.
Добавьте "App Groups" как для основной цели приложения, так и для расширения виджета.
Создайте новую группу приложений (например, group.com.example.homeWidgetApp).
Убедитесь, что обе цели имеют включенную одну и ту же группу приложений.
5.3. Обновите код Flutter для конфигураций, специфичных для платформы
В вашем updateHomeWidget() методе в home_page.dart, обновите имена виджетов:
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
);
﻿
Шаг 6 – Запуск приложения и тестирование виджета
6.1. Запустите приложение
В вашем терминале выполните:
Bash
flutter run
flutter run
﻿
6.2. Добавьте виджет на главный экран
Android
Долгим нажатием на главном экране выберите "Виджеты".
Найдите ваше приложение в списке виджетов.
Перетащите виджет на главный экран.
iOS
Введите режим дрожания, долго нажав на главном экране.
Нажмите на "+" кнопку в верхнем левом углу.
Найдите ваш виджет по имени.
Добавьте виджет на главный экран.
6.3. Обновления тестовых данных
Нажмите на "Обновить сообщение" кнопку в вашем приложении, чтобы получить новые данные из Back4App.
Виджет на вашем домашнем экране должен обновиться с новыми данными.
Заключение
В этом учебном пособии вы узнали, как создать виджет на домашнем экране в Flutter, используя пакет home_widget и интегрировать его с Back4App для отображения динамических данных. Это позволяет предоставлять пользователям актуальную информацию прямо на их домашних экранах, что повышает вовлеченность и пользовательский опыт.
Следующие шаги
Динамические данные: Реализуйте обновления данных в реальном времени с помощью Live Queries от Back4App.
Интерактивность: Добавьте действия по клику к вашему виджету, чтобы открывать определенные страницы в вашем приложении.
Настройка: Настройте ваш виджет, чтобы он соответствовал теме и дизайну вашего приложения.
Дополнительные ресурсы
﻿Документация Back4App﻿
﻿Пакет home_widget на pub.dev﻿
﻿Руководство по Parse SDK для Flutter﻿
﻿Официальная документация Flutter﻿
Счастливого кодирования!
Обновлено 23 Jan 2025
Помогла ли вам эта страница?
Полный гид по аутентификации третьих сторон в Flutter с Parse на Back4App
Как реализовать сочетания клавиш в Flutter с помощью CallbackShortcuts и Back4App