플러터(Flutter)의 데이터 작업 part 1

플러터(Flutter)는 개발자가 고성능 크로스 플랫폼 앱을 쉽게 만들 수 있는 인기 있는 모바일 앱 개발 프레임워크입니다. 플러터(Flutter)의 주요 기능 중 하나는 API를 비롯한 다양한 소스의 데이터를 사용하는 기능입니다. 이 튜토리얼에서는 플러터(Flutter)의 API에서 데이터를 가져오는 과정을 안내합니다.

플러터(Flutter)의 API에서 데이터를 가져오는 방법: 단계별 가이드

1단계: 플러터(Flutter) 프로젝트 설정

API에서 데이터 가져오기를 시작하려면 먼저 플러터(Flutter) 프로젝트를 설정해야 합니다. Android Studio 또는 좋아하는 IDE를 열고 새 플러터(Flutter) 프로젝트를 만듭니다. 프로젝트가 설정되면 앱 빌드를 시작할 수 있습니다.

2단계: API 선택

웹에서 사용할 수 있는 많은 API가 있지만 이 자습서에서는 Star Wars API(SWAPI)를 사용합니다. SWAPI는 캐릭터, 행성 및 우주선을 포함하여 스타워즈 세계에 대한 풍부한 데이터를 제공합니다. API를 사용하려면 API 키에 가입해야 합니다.

3단계: 프로젝트에 http 패키지 추가

API에 HTTP 요청을 하려면 http 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음 종속성을 추가하여 이를 수행할 수 있습니다.

dependencies: http: ^0.12.0+2

4단계: API에 HTTP 요청 수행

http 패키지가 설치되면 get() 메서드를 사용하여 API에 HTTP 요청을 할 수 있습니다. 예를 들면 다음과 같습니다.

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

void getData() async {

var url = 'https://swapi.dev/api/people/';

var response = await http.get(Uri.parse(url));

print(response.body);

}

이 예에서는 SWAPI의 /people/ 엔드포인트에 대한 GET 요청을 만들고 있습니다. 응답은 콘솔에 출력하는 문자열로 반환됩니다.

5단계: JSON 응답 구문 분석

API의 응답은 JSON 형식이므로 앱에서 사용하려면 Dart 개체로 구문 분석해야 합니다. 플러터(Flutter)는 내장 JSON 디코딩 라이브러리를 제공하므로 응답을 Dart 객체로 쉽게 변환할 수 있습니다. 예를 들면 다음과 같습니다.

import 'dart:convert';

class Person {

final String name;

final String  height;

final String  mass;

Person({

required this.name,

required this.height,

required this.mass,

});

factory Person.fromJson(Map <String, dynamic> json) {

return Person(

name: json ['name'],

height: json ['height'],

mass: json ['mass'],

); } }

void getData() async {

var url = 'https://swapi.dev/api/people/1';

var response = await http.get(Uri.parse(url));

var json = jsonDecode(response.body);

var person = Person.fromJson(json);

print(person.name);

}

이 예에서는 이름, 높이 및 질량 속성을 사용하여 Person 클래스를 정의합니다. 또한 JSON 개체를 가져와 Person 인스턴스를 반환하는 팩토리 메서드인 fromJson()을 정의하고 있습니다. 마지막으로 http 및 jsonDecode() 메서드를 사용하여 HTTP 요청을 만들고 JSON 응답을 Person 개체로 디코딩합니다.

6단계: 앱에 데이터 표시

가져온 데이터를 파싱 하여 이제 앱에 표시할 수 있습니다. 사용자에게 친숙한 형식으로 데이터를 표시하는 위젯을 생성하여 이를 수행할 수 있습니다. 예를 들면 다음과 같습니다.

import 'package:flutter/material.dart';

class PersonWidget extends StatelessWidget {

final Person person;

const PersonWidget({required this.person});

@override

Widget build(BuildContext context) {

return ListTile(

title: Text(person.name),

subtitle: Text('Height: ${person.heigth} I Mass: ${person.mass}'),

leading: CircleAvatar(

child: Text(person.name [0]),

),);}}

이 예제에서는 Person 객체를 매개변수로 사용하는 PersonWidget을 정의합니다. 이 위젯은 ListTile 위젯을 사용하여 사용자에게 친숙한 형식으로 사람의 이름, 키 및 질량을 표시합니다. 또한 CircleAvatar 위젯을 사용하여 사람의 이니셜을 선행 아이콘으로 표시합니다.

위젯을 만든 후에는 가져온 데이터를 매개변수로 전달하여 앱에서 사용할 수 있습니다. 예를 들어:

class MyApp extends StatelessWidget {

final String apiUrl = 'https://swapi.dev/api/people';

final HttpClient httpClient = HttpClient();

@override Widget build(BuildContext context) {

return MaterialApp(

title: 'Star Wars Characters',

home: Scaffold(

appBar: AppBar(

title: Text('Star Wars Characters'),

),

body: FutureBuilder <List <Person>>(

future: fetchPeople(httpClient, apiUrl),

builder: (context, snapshot) {

if (snapshot.hasData) {

return ListView.builder(

itemCount: snapshot.data!. length,

itemBuilder: (context, index) {

return PersonWidget(person: snapshot.data! [index]);

}, );

} else if (snapshot.hasError) {

return Center( child: Text('Error: ${snapshot.error}'),

); }

return Center(

child: CircularProgressIndicator(),

); }, ), ), ); } }

이 예에서는 FutureBuilder 위젯을 사용하여 PersonWidget의 목록을 비동기식으로 빌드합니다. 또한 builder 메서드의 snapshot 매개변수를 사용하여 Future의 다양한 상태를 처리하고 있습니다. Future가 hasData 상태에 있을 때 ListView.builder 위젯을 사용하여 PersonWidget 목록을 표시합니다. 각 사람에 대해 새 PersonWidget을 만들고 사람 개체를 매개 변수로 전달합니다. Future가 hasError 상태이면 오류 메시지가 표시됩니다. 그리고 Future가 여전히 로드 중일 때 진행률 표시기를 표시합니다. 적절한 위젯을 사용하고 Future의 다양한 상태를 처리하면 가져온 데이터를 사용자 친화적이고 직관적인 방식으로 플러터(Flutter) 앱에 쉽게 표시할 수 있습니다.

7단계: 오류 처리

API에서 데이터를 가져올 때 오류를 적절하게 처리하는 것이 중요합니다. HTTP 요청은 네트워크 연결 오류 또는 유효하지 않은 API 키와 같은 여러 가지 이유로 실패할 수 있습니다. 플러터(Flutter)에서 오류를 처리하기 위해 try-catch 블록을 사용할 수 있습니다. 예를 들면 다음과 같습니다.

void getData() async {

var url = 'https://swapi.dev/api/people/1';

try {

var response = await http.get(Uri.parse(url));

var json = jsonDecode(response.body);

var person = Person.fromJson(json); print(person.name);

} catch (e) {

print(e);

}

}

이 예에서는 HTTP 요청을 할 때 발생할 수 있는 예외를 포착하기 위해 try-catch 블록을 사용하고 있습니다. 예외가 발생하면 오류 메시지를 콘솔에 출력합니다.

결론:

이 튜토리얼에서는 플러터(Flutter)의 API에서 데이터를 가져오는 기본 사항을 다뤘습니다. 플러터(Flutter) 프로젝트 설정, API 선택, HTTP 요청, JSON 응답 구문 분석, 데이터를 사용자에게 친숙한 형식으로 표시 및 오류 처리 프로세스를 살펴보았습니다. 이 지식이 있으면 모든 API에서 데이터를 가져와 플러터(Flutter) 앱에서 사용할 수 있습니다.