Как использовать Flutter Completers с бэкендом на Back4app

11min
Введение
Фьючерсы и Потоки — это то, что нужно для любых асинхронных операций. Однако иногда этого недостаточно. Если вам нужен более продвинутый контроль над Фьючерсами, то используйте Completer. Это инструмент, с помощью которого вы можете программно завершить Фьючерс. Таким образом, это обеспечивает лучший контроль над асинхронными операциями. Этот учебник поможет вам разобраться в использовании Flutter Completers в приложении, которое взаимодействует с бэкендом на Back4app.

К концу этого учебника вы научитесь использовать Completers в приложении Flutter для управления асинхронными задачами и интеграции этих задач с предоставляемым сервисом бэкенда от Back4app. Мы собираемся создать очень простое приложение, которое получает данные от Back4app бэкенда, используя Completer для управления потоком приложения.
Предварительные требования
Чтобы завершить этот учебник, вам потребуется:
Аккаунт на Back4app. Зарегистрируйтесь для получения бесплатного аккаунта на Back4app.com.
Настроенная среда разработки Flutter на вашем локальном компьютере. Следуйте руководству по установке Flutter, если вы еще не настроили её.
Базовые знания Dart и асинхронного программирования в Flutter. Если вам нужно освежить знания, ознакомьтесь с Руководством по асинхронному программированию Flutter.
Шаг 1 – Настройка вашего Back4app бэкенда
Сначала давайте настроим простой бэкенд на Back4app, с которым будет взаимодействовать наше Flutter приложение.
Войдите в свою учетную запись Back4app и создайте новый проект.
Настройте новый класс Parse с именем Task, который будет хранить задачи, которые наше Flutter приложение будет извлекать. Добавьте следующие столбцы в класс Task :
name (String): Имя задачи.
status (Boolean): Статус задачи (выполнена или нет).
Добавьте несколько тестовых задач в базу данных Back4app для тестирования. Например:
Задача 1: name = "Завершить учебник по Flutter", status = true
Задача 2: name = "Начать новый проект", status = false
Ваш бэкенд Back4app теперь готов к доступу из приложения Flutter.
Шаг 2 – Создание проекта Flutter
Далее мы создадим новый проект Flutter.
Откройте терминал или командную строку.
Выполните следующую команду, чтобы создать новый проект Flutter:
Bash
flutter create completer_demo
flutter create completer_demo
﻿
Перейдите в каталог проекта:
Bash
cd completer_demo
cd completer_demo
﻿
    2. Откройте проект в вашем предпочтительном редакторе кода (например, VS Code, Android Studio).
Шаг 3 – Добавление Parse SDK и настройка приложения
Теперь давайте добавим необходимые зависимости для взаимодействия с Back4app.
Откройте pubspec.yaml и добавьте следующие зависимости:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^3.0.0
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^3.0.0
﻿
     2. Запустите flutter pub get для установки зависимостей.
     3. В lib/main.dart, импортируйте Parse SDK:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';
import 'dart:async';
﻿
    4. Инициализируйте Parse в функции main:
Dart
void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APP_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, autoSendSessionId: true);

  runApp(MyApp());
}
void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APP_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, autoSendSessionId: true);

  runApp(MyApp());
}
﻿
Замените 'YOUR_APP_ID' и 'YOUR_CLIENT_KEY' на ваши реальные учетные данные Back4app.
Шаг 4 – Использование Completers для асинхронного получения данных
Теперь давайте используем Completer для получения данных из бэкенда Back4app и контроля, когда данные будут доступны для использования в пользовательском интерфейсе.
В lib/main.dart, создайте новый класс, который будет получать задачи из Back4app, используя Completer:
Dart
class TaskManager {
  final Completer<List<ParseObject>> _completer = Completer();

  Future<List<ParseObject>> get tasks => _completer.future;

  TaskManager() {
    _fetchTasks();
  }

  void _fetchTasks() async {
    QueryBuilder<ParseObject> query = QueryBuilder<ParseObject>(ParseObject('Task'));
    final ParseResponse response = await query.query();

    if (response.success && response.results != null) {
      _completer.complete(response.results);
    } else {
      _completer.completeError('Failed to load tasks');
    }
  }
}
class TaskManager {
  final Completer<List<ParseObject>> _completer = Completer();

  Future<List<ParseObject>> get tasks => _completer.future;

  TaskManager() {
    _fetchTasks();
  }

  void _fetchTasks() async {
    QueryBuilder<ParseObject> query = QueryBuilder<ParseObject>(ParseObject('Task'));
    final ParseResponse response = await query.query();

    if (response.success && response.results != null) {
      _completer.complete(response.results);
    } else {
      _completer.completeError('Failed to load tasks');
    }
  }
}
﻿
Этот класс инициализирует Completer, начинает извлечение данных и завершает Completer, когда данные становятся доступными.
    2. В виджете MyApp, используйте TaskManager, чтобы извлечь и отобразить задачи:
Dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Completer Demo')),
        body: FutureBuilder<List<ParseObject>>(
          future: TaskManager().tasks,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return Center(child: CircularProgressIndicator());
            } else if (snapshot.hasError) {
              return Center(child: Text('Error: ${snapshot.error}'));
            } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
              return Center(child: Text('No tasks found.'));
            } else {
              return ListView.builder(
                itemCount: snapshot.data!.length,
                itemBuilder: (context, index) {
                  final task = snapshot.data![index];
                  return ListTile(
                    title: Text(task.get<String>('name') ?? 'No name'),
                    subtitle: Text('Completed: ${task.get<bool>('status') ? 'Yes' : 'No'}'),
                  );
                },
              );
            }
          },
        ),
      ),
    );
  }
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Completer Demo')),
        body: FutureBuilder<List<ParseObject>>(
          future: TaskManager().tasks,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return Center(child: CircularProgressIndicator());
            } else if (snapshot.hasError) {
              return Center(child: Text('Error: ${snapshot.error}'));
            } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
              return Center(child: Text('No tasks found.'));
            } else {
              return ListView.builder(
                itemCount: snapshot.data!.length,
                itemBuilder: (context, index) {
                  final task = snapshot.data![index];
                  return ListTile(
                    title: Text(task.get<String>('name') ?? 'No name'),
                    subtitle: Text('Completed: ${task.get<bool>('status') ? 'Yes' : 'No'}'),
                  );
                },
              );
            }
          },
        ),
      ),
    );
  }
}
﻿
    3. Запустите ваше приложение Flutter:
Вы должны увидеть список задач, извлеченных из вашего бэкенда Back4app, с их именами и статусом завершения.
Заключение
В этом уроке вы узнали, как использовать Flutter Completers для управления асинхронными операциями и контроля потока извлечения данных в вашем приложении. Интегрировавшись с Back4app, вы создали простой, но мощный бэкенд для вашего приложения Flutter, позволяющий вам динамически извлекать и отображать данные. Этот подход можно расширить для обработки более сложных сценариев, таких как аутентификация пользователей, манипуляция данными и многое другое.
Для получения дополнительной информации о том, как использовать Flutter с Back4app, ознакомьтесь с документацией Back4app по Flutter. Удачного кодирования!
Обновлено 23 Jan 2025
Помогла ли вам эта страница?
Как интегрировать генеративный ИИ в ваше Flutter-приложение с использованием Firebase Vertex AI
Как оптимизировать асинхронные операции в Flutter с помощью Future.wait и Back4app