[flutter] 플러터 Wrap을 사용하여 앱의 네트워크 통신 기능을 구현하는 방법

07 Dec 2023

flutter

이번에는 Flutter 앱에서 Wrap을 사용하여 네트워크 통신 기능을 구현하는 방법에 대해 알아보겠습니다. Wrap은 자식 위젯을 화면을 벗어나지 않게 하고 여러 줄에 걸쳐 배치할 수 있는 유용한 위젯입니다. 이를 통해 우리는 네트워크로부터 받아온 데이터를 동적으로 화면에 표시할 수 있습니다.

단계 1: 패키지 추가하기

먼저, pubspec.yaml 파일에서 http 패키지를 추가해야 합니다. 이 패키지를 사용하여 네트워크 통신을 수행할 것입니다. 다음과 같이 dependencies 부분에 http 패키지를 추가해주세요:

dependencies:
  flutter:
    sdk: flutter
  http: ^0.12.0+2

이후, 터미널에서 flutter pub get 명령을 실행하여 패키지를 다운로드하세요.

단계 2: 네트워크 요청과 응답 처리하기

이제 우리는 http 패키지를 사용하여 네트워크 요청과 응답을 처리할 수 있습니다. 예를 들어, GitHub API에서 사용자의 프로필 이미지를 가져오는 코드를 작성해보겠습니다.

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

class ProfileImageService {
  Future<String?> getProfileImage(String username) async {
    String url = 'https://api.github.com/users/$username';

    try {
      http.Response response = await http.get(Uri.parse(url));
      if (response.statusCode == 200) {
        Map<String, dynamic> data = json.decode(response.body);
        return data['avatar_url'];
      }
    } catch (error) {
      print(error);
    }

    return null;
  }
}

위의 코드에서는 getProfileImage 함수를 호출하여 사용자 이름을 전달합니다. 해당 사용자의 프로필 이미지 URL을 가져오고, 성공적으로 가져오면 해당 URL을 반환합니다.

단계 3: 화면에 데이터 표시하기

마지막으로, Wrap을 사용하여 네트워크로부터 받은 데이터를 동적으로 화면에 표시할 수 있습니다. 예를 들어, 사용자 이름 목록을 전달받아 각 사용자의 프로필 이미지를 Wrap 위젯으로 구성된 리스트로 표시하는 코드를 작성해보겠습니다.

import 'package:flutter/material.dart';

class UserListPage extends StatefulWidget {
  final List<String> usernames;

  UserListPage({required this.usernames});

  @override
  _UserListPageState createState() => _UserListPageState();
}

class _UserListPageState extends State<UserListPage> {
  List<Widget> profileImages = [];

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

  void fetchProfileImages() async {
    for (String username in widget.usernames) {
      String? imageUrl = await ProfileImageService().getProfileImage(username);
      if (imageUrl != null) {
        setState(() {
          profileImages.add(
            CircleAvatar(
              backgroundImage: NetworkImage(imageUrl),
            ),
          );
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User List'),
      ),
      body: Wrap(
        children: profileImages,
      ),
    );
  }
}

위의 코드에서는 UserListPage 위젯에서 getProfileImage 함수를 호출하여 사용자 이름 목록에 대한 프로필 이미지를 가져옵니다. 각 사용자의 프로필 이미지는 CircleAvatar 위젯을 사용하여 표시되고, Wrap 위젯을 사용하여 리스트로 렌더링됩니다.

이제 앱에서 UserListPage를 호출하고 사용자 이름 목록을 전달하면 네트워크로부터 해당 사용자들의 프로필 이미지가 표시됩니다.

결론

이처럼 Flutter의 Wrap을 사용하면 네트워크 통신 기능을 구현하고 받아온 데이터를 동적으로 화면에 표시할 수 있습니다. Wrap을 활용하여 앱의 UI를 더 유연하게 구성할 수 있으며, http 패키지를 사용하여 네트워크 요청과 응답을 손쉽게 처리할 수 있습니다.

단계 1: 패키지 추가하기

단계 2: 네트워크 요청과 응답 처리하기

단계 3: 화면에 데이터 표시하기

결론

참고 자료