더 많은
Flutter Completers를 Back4app의 백엔드와 함께 사용하는 방법

11min
소개
Future와 Stream은 모든 종류의 비동기 작업에서 가야 할 길입니다. 그러나 때때로 둘 다 충분하지 않습니다. Future에 대해 더 고급 제어를 원한다면 Completer를 사용하세요. 이는 Future를 프로그래밍 방식으로 완료할 수 있는 도구입니다. 어떤 면에서는 비동기 작업에 대한 더 나은 제어를 제공합니다. 이 튜토리얼은 Back4app에서 백엔드와 상호작용하는 애플리케이션에서 Flutter Completers를 사용하는 방법을 안내합니다.

이 튜토리얼이 끝나면 Completers를 사용하여 Flutter 애플리케이션에서 비동기 작업을 관리하고 이러한 작업을 Back4app에서 제공하는 백엔드 서비스와 통합하는 방법을 배우게 됩니다. 우리는 Completer를 사용하여 애플리케이션의 흐름을 제어하는 매우 간단한 앱을 만들 것입니다.
전제 조건
이 튜토리얼을 완료하려면 다음이 필요합니다:
Back4app 계정. Back4app.com에서 무료 계정에 가입하세요.
로컬 머신에 Flutter 개발 환경이 설정되어 있어야 합니다. 아직 설정하지 않았다면 Flutter 설치 가이드를 따르세요.
Dart 및 Flutter의 비동기 프로그래밍에 대한 기본 지식. 복습이 필요하다면 Flutter 비동기 프로그래밍 가이드를 확인하세요.
1단계 – Back4app 백엔드 설정하기
먼저, Flutter 애플리케이션이 상호작용할 간단한 백엔드를 Back4app에서 설정해 보겠습니다.
Back4app 계정에 로그인하세요 그리고 새 프로젝트를 만드세요.
새로운 Parse Class를 설정하세요 이름은 Task, Flutter 앱이 가져올 작업을 저장할 것입니다. Task 클래스에 다음 열을 추가하세요:
name (String): 작업의 이름.
status (Boolean): 작업의 상태 (완료 또는 미완료).
테스트를 위해 Back4app 데이터베이스에 몇 개의 샘플 작업을 추가하세요. 예를 들어:
작업 1: name = "Flutter 튜토리얼 완료", status = true
작업 2: name = "새 프로젝트 시작", status = false
이제 Flutter 앱에서 Back4app 백엔드에 접근할 준비가 되었습니다.
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. main 함수에서 Parse를 초기화합니다:
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 백엔드에서 데이터를 가져오고 UI에서 데이터가 사용 가능할 때를 제어해 보겠습니다.
lib/main.dart 에서, Completer를 사용하여 Back4app에서 작업을 가져오는 새 클래스를 만듭니다:
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 앱을 실행하세요:
백엔드에서 가져온 작업 목록과 해당 이름 및 완료 상태가 표시됩니다.
결론
이 튜토리얼에서는 Flutter Completers를 사용하여 비동기 작업을 관리하고 애플리케이션에서 데이터 가져오기 흐름을 제어하는 방법을 배웠습니다. Back4app과 통합하여 Flutter 앱을 위한 간단하면서도 강력한 백엔드를 생성하여 데이터를 동적으로 가져오고 표시할 수 있게 되었습니다. 이 접근 방식은 사용자 인증, 데이터 조작 등과 같은 더 복잡한 시나리오를 처리하도록 확장할 수 있습니다.
Back4app과 함께 Flutter를 사용하는 방법에 대한 자세한 내용은 Back4app Flutter 문서. 즐거운 코딩 되세요!
업데이트됨 24 Jan 2025
이 페이지가 도움이 되었습니까?
Flutter 앱에 Firebase Vertex AI를 사용하여 생성적 AI 통합하는 방법
플러터에서 Future.wait와 Back4app을 사용하여 비동기 작업 최적화하는 방법