[flutter] 플러터 Wrap을 사용하여 웹 서비스와의 연동 방법

07 Dec 2023

flutter

플러터(Flutter)는 Google에서 개발한 모바일 앱 개발 프레임워크로, 다양한 플랫폼에서 동작하는 앱을 빠르고 효율적으로 개발할 수 있습니다. 이번 글에서는 플러터의 Wrap 위젯을 사용하여 웹 서비스와의 연동 방법에 대해 알아보겠습니다.

1. Wrap 위젯 소개

Wrap 위젯은 다른 위젯들을 자유롭게 감쌀 수 있는 유연한 레이아웃 위젯입니다. Wrap 위젯은 각각의 자식 위젯을 줄바꿈하여 적절하게 배치할 수 있습니다. 이를 통해 다양한 크기와 형태의 위젯들을 유연하게 배치할 수 있으며, 디바이스의 화면 크기에 맞게 자동으로 조절됩니다.

2. 웹 서비스와의 연동 방법

플러터를 사용하여 웹 서비스와의 연동을 위해서는 http 패키지를 사용하여 HTTP 요청을 보내고 응답을 받아야 합니다. 아래는 플러터의 http 패키지를 이용하여 GET 요청을 보내고 응답을 받는 예제 코드입니다.

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

class WebServiceIntegration extends StatefulWidget {
  @override
  _WebServiceIntegrationState createState() => _WebServiceIntegrationState();
}

class _WebServiceIntegrationState extends State<WebServiceIntegration> {
  String data = '';

  Future<String> fetchData() async {
    var response = await http.get('https://api.example.com/data');
    if (response.statusCode == 200) {
      setState(() {
        data = response.body;
      });
    } else {
      setState(() {
        data = 'Error fetching data from web service';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Web Service Integration'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Data from Web Service:',
            ),
            SizedBox(height: 16),
            Text(
              data,
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 16),
            RaisedButton(
              child: Text('Fetch Data'),
              onPressed: fetchData,
            ),
          ],
        ),
      ),
    );
  }
}

위 예제 코드에서는 http.get() 함수를 사용하여 웹 서비스로 GET 요청을 보내고, 응답을 받아와서 화면에 표시합니다. 이때, 비동기 처리를 위해 async와 await 키워드를 사용하였습니다. http 패키지는 서버에서 받은 데이터를 response.body에서 확인할 수 있습니다.

3. Wrap 위젯과 웹 서비스 연동 예제

이제 Wrap 위젯과 웹 서비스 연동을 함께 사용하는 예제를 살펴보겠습니다.

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

class WrapAndWebServiceIntegration extends StatefulWidget {
  @override
  _WrapAndWebServiceIntegrationState createState() =>
      _WrapAndWebServiceIntegrationState();
}

class _WrapAndWebServiceIntegrationState
    extends State<WrapAndWebServiceIntegration> {
  List<String> data = [];

  Future<List<String>> fetchData() async {
    var response = await http.get('https://api.example.com/data');
    if (response.statusCode == 200) {
      List<dynamic> json = jsonDecode(response.body);
      List<String> newData = [];
      for (var item in json) {
        newData.add(item['name']);
      }
      setState(() {
        data = newData;
      });
      return newData;
    } else {
      setState(() {
        data = ['Error fetching data from web service'];
      });
      return [];
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Wrap and Web Service Integration'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Wrap(
              children: data.map((item) => _buildItem(item)).toList(),
            ),
            SizedBox(height: 16),
            RaisedButton(
              child: Text('Fetch Data'),
              onPressed: fetchData,
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildItem(String item) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Chip(
        label: Text(item),
      ),
    );
  }
}

위 예제 코드에서는 Wrap 위젯을 사용하여 웹 서비스에서 받은 데이터를 동적으로 출력합니다. fetchData() 함수에서는 GET 요청을 보내고 응답을 받아와서 데이터를 파싱하고 Wrap 위젯으로 랩핑한 후 화면에 출력합니다. 이때, jsonDecode() 함수를 사용하여 JSON 형식의 데이터를 디코딩합니다.

4. 마무리

이제 플러터의 Wrap 위젯을 사용하여 웹 서비스와의 연동 방법에 대해 알아보았습니다. Wrap 위젯은 다양한 크기와 형태의 위젯들을 유연하게 배치할 수 있게 해주며, http 패키지를 사용하여 웹 서비스와 통신하는 방법을 배웠습니다. 이를 응용하여 플러터 앱에서 다양한 웹 서비스와의 연동을 구현할 수 있습니다.

더 자세한 내용은 Flutter Documentation을 참고하시기 바랍니다.

참고: 이 문서는 Markdown 형식으로 작성되었습니다.