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

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

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) 앱에서 사용할 수 있습니다.