Flutter의 Future 사용법

Flutter 애플리케이션에서 비동기 작업을 처리하기 위해 Future를 사용하는 것은 매우 중요한 기술입니다. Future는 비동기 작업의 결과를 나타내는 객체로, 비동기 작업이 완료될 때 결과를 제공합니다. 이번 글에서는 Flutter에서 Future를 사용하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. Future의 기본 개념

Future는 비동기 작업이 완료되었을 때 값을 반환하거나 오류를 던지는 객체입니다. Dart에서는 Future를 사용하여 비동기 작업을 처리할 수 있습니다. Future는 비동기 작업이 완료될 때까지 기다린 후 결과를 반환합니다.

2. Future 생성

Future를 생성하는 가장 간단한 방법은 Future.delayed 메서드를 사용하는 것입니다. 이 메서드는 일정 시간 후에 완료되는 Future를 생성합니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FutureExample(),
    );
  }
}

class FutureExample extends StatefulWidget {
  @override
  _FutureExampleState createState() => _FutureExampleState();
}

class _FutureExampleState extends State<FutureExample> {
  Future<String> fetchData() {
    return Future.delayed(Duration(seconds: 2), () {
      return 'Hello, Future!';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Future Example')),
      body: Center(
        child: FutureBuilder<String>(
          future: fetchData(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return CircularProgressIndicator();
            } else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            } else {
              return Text('Result: ${snapshot.data}');
            }
          },
        ),
      ),
    );
  }
}

 

위 코드는 Future.delayed를 사용하여 2초 후에 문자열을 반환하는 Future를 생성하고, FutureBuilder를 사용하여 Future의 상태에 따라 UI를 업데이트하는 예제입니다.

3. async 및 await 사용

async 및 await 키워드를 사용하면 Future를 보다 간단하게 사용할 수 있습니다. async 키워드는 함수가 비동기 작업을 수행함을 나타내며, await 키워드는 비동기 작업이 완료될 때까지 기다립니다.

 

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AsyncAwaitExample(),
    );
  }
}

class AsyncAwaitExample extends StatefulWidget {
  @override
  _AsyncAwaitExampleState createState() => _AsyncAwaitExampleState();
}

class _AsyncAwaitExampleState extends State<AsyncAwaitExample> {
  String _message = 'Loading...';

  @override
  void initState() {
    super.initState();
    fetchData();
  }

  Future<void> fetchData() async {
    String data = await Future.delayed(Duration(seconds: 2), () {
      return 'Hello, async/await!';
    });

    setState(() {
      _message = data;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Async/Await Example')),
      body: Center(
        child: Text(_message),
      ),
    );
  }
}

 

위 코드는 async 및 await 키워드를 사용하여 2초 후에 문자열을 반환하고, 이를 화면에 표시하는 예제입니다. await 키워드를 사용하여 Future가 완료될 때까지 기다린 후 결과를 받아 setState를 호출하여 UI를 업데이트합니다.

 

반응형

 

 

4. 네트워크 요청 처리

비동기 프로그래밍은 네트워크 요청을 처리할 때 매우 유용합니다. http 패키지를 사용하여 비동기 네트워크 요청을 수행하는 예제를 살펴보겠습니다.

 

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: NetworkExample(),
    );
  }
}

class NetworkExample extends StatefulWidget {
  @override
  _NetworkExampleState createState() => _NetworkExampleState();
}

class _NetworkExampleState extends State<NetworkExample> {
  Future<Map<String, dynamic>> fetchData() async {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));

    if (response.statusCode == 200) {
      return json.decode(response.body);
    } else {
      throw Exception('Failed to load data');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Network Example')),
      body: Center(
        child: FutureBuilder<Map<String, dynamic>>(
          future: fetchData(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return CircularProgressIndicator();
            } else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            } else {
              return Text('Title: ${snapshot.data!['title']}');
            }
          },
        ),
      ),
    );
  }
}

 

위 코드는 http.get 메서드를 사용하여 네트워크 요청을 수행하고, 서버로부터 받은 데이터를 화면에 표시하는 예제입니다. await 키워드를 사용하여 네트워크 요청이 완료될 때까지 기다린 후, FutureBuilder를 사용하여 결과를 UI에 반영합니다.

 

 

 

728x90

 

5. Future.wait 사용

Future.wait를 사용하여 여러 비동기 작업을 병렬로 수행하고, 모든 작업이 완료될 때까지 기다리는 예제를 살펴보겠습니다.

 

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FutureWaitExample(),
    );
  }
}

class FutureWaitExample extends StatefulWidget {
  @override
  _FutureWaitExampleState createState() => _FutureWaitExampleState();
}

class _FutureWaitExampleState extends State<FutureWaitExample> {
  Future<List<String>> fetchData() async {
    final results = await Future.wait([
      Future.delayed(Duration(seconds: 2), () => 'Result 1'),
      Future.delayed(Duration(seconds: 3), () => 'Result 2'),
    ]);
    return results;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Future.wait Example')),
      body: Center(
        child: FutureBuilder<List<String>>(
          future: fetchData(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return CircularProgressIndicator();
            } else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            } else {
              return Text('Results: ${snapshot.data!.join(', ')}');
            }
          },
        ),
      ),
    );
  }
}

 

위 코드는 Future.wait를 사용하여 두 개의 비동기 작업을 병렬로 수행하고, 모든 작업이 완료된 후 결과를 화면에 표시하는 예제입니다. Future.wait는 모든 Future가 완료될 때까지 기다린 후 결과를 리스트로 반환합니다.

6. 에러 처리

비동기 작업에서 발생할 수 있는 에러를 처리하는 방법을 살펴보겠습니다. try-catch 구문을 사용하여 에러를 처리할 수 있습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ErrorHandlingExample(),
    );
  }
}

class ErrorHandlingExample extends StatefulWidget {
  @override
  _ErrorHandlingExampleState createState() => _ErrorHandlingExampleState();
}

class _ErrorHandlingExampleState extends State<ErrorHandlingExample> {
  Future<String> fetchData() async {
    try {
      throw Exception('An error occurred');
    } catch (e) {
      return Future.error(e);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Error Handling Example')),
      body: Center(
        child: FutureBuilder<String>(
          future: fetchData(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return CircularProgressIndicator();
            } else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            } else {
              return Text('Result: ${snapshot.data}');
            }
          },
        ),
      ),
    );
  }
}

 

위 코드는 try-catch 구문을 사용하여 비동기 작업 중에 발생할 수 있는 에러를 처리하는 예제입니다. Future.error를 사용하여 에러를 Future로 반환하고, FutureBuilder를 사용하여 에러를 UI에 표시합니다.

결론

Flutter 애플리케이션에서 Future를 사용하면 네트워크 요청, 파일 입출력 등의 비동기 작업을 효율적으로 처리할 수 있습니다. Future, async/await, Future.wait를 사용하여 다양한 비동기 작업을 구현하는 방법을 통해 비동기 프로그래밍을 효과적으로 활용할 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 Future를 효율적으로 사용해보세요. Future를 통해 애플리케이션의 성능을 향상시키고, 사용자 경험을 개선할 수 있습니다.