데이터통신하여 UI 그리기(1)에 이어서 마지막으로 UI에 데이터를 나타내보자.
4. UI에 데이터를 나타내기
1) 모델 클래스 만들기
이제 클라이언트 앱 내에서 사용하기 편리한 형태의 객체로 데이터를 가공해야 한다. 모델 클래스 부터 만들어보자.
구글에 JSON to Dart 로 검색해보면 JSON 파일을 한번에 Dart의 클래스로 변환해주는 사이트가 정말 많다.
나는 https://javiercbk.github.io/json_to_dart/ 이 사이트를 사용한다!
class Store {
String? addr;
String? code;
String? createdAt;
double? lat;
double? lng;
String? name;
String? remainStat;
String? stockAt;
String? type;
Store(
{this.addr,
this.code,
this.createdAt,
this.lat,
this.lng,
this.name,
this.remainStat,
this.stockAt,
this.type});
Store.fromJson(Map<String, dynamic> json) {
addr = json['addr'];
code = json['code'];
createdAt = json['created_at'];
lat = json['lat'];
lng = json['lng'];
name = json['name'];
remainStat = json['remain_stat'];
stockAt = json['stock_at'];
type = json['type'];
}
}- 직렬화, 역직렬화까지 한 결과물이 바로 생긴다 ㅎ
- 나는 여기선 toJson은 하지 않을 거라 삭제했다.
- 참고로 fromJson을 통해 JSON 키에서 값을 가져와 Store 클래스의 각 필드에 할당되었다.
2) JSON 각 요소를 객체로 변환해주기
우리가 가져올 데이터는 리스트에 담아 보여줘야한다. 따라서 store 객체로 변환하고 리스트에 담는 작업이 먼저 필요하다.
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final List<Store> stores =[];// stores 리스트 생성
@override
void initState() {
super.initState();
fetch();
}
Future fetch() async {
var response = await http.get(Uri.parse('http://example.com'));
final jsonResult = jsonDecode(response.body);
final jsonStores = jsonResult['stores'];
setState(() {
jsonStores.forEach((e) {
stores.add(Store.fromJson(e));
});
});
}
//ui 코드 생략
@override
Widget build(BuildContext context) {...}- stores라는 리스트를 생성한다.
- 이제 우리가 원하는 데이터가 담겨있는 jsonStores의 각 요소들을 forEach문을 통해 순회하면서 stores 리스트에 담을 것이다.
- 그런데! Store.fromJson(e)를 호출하여 JSON의 각 요소(e)를 Store 객체로 변환을 먼저 하고 변환된 Store 객체를 stores 리스트에 담는다.
- 서버에서 받아온 Json 데이터는 dart 객체인 store 객체로 변환이 필요하다. 그 후에 리스트에 저장하는 것이다!
3) 데이터를 UI에 보여주기
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('데이터통신 연습'),),
body: ListView(
children: stores.map((e) =>
ListTile(
title: Text(e.name ?? ''),
subtitle: Text(e.addr ?? ''),
trailing: Text(e.remainStat ?? 'soldout'),
)
).toList(),
)-
우리가 원하는 데이터는 이제 stores 리스트에 담겨있다.
-
map을 통해 각 요소들을 ListTile 형태로 변환시켰다.
-
Store 객체의 각 필드는 e라는 형태가 되었다. 이제 e.name 처럼 효율적으로 여러 항목을 표시할 수 있게 되었다.
-
map 메서드의 반환 값은 Iterable이기 때문에, toList를 호출하여 List로 변환한다.
(즉, toList를 사용하지 않는다면 ListView에 바로 stores.map(...)을 전달할 수 없고, Iterable 타입이므로 List로 변환해야만 한다)
결과화면
데이터통신은 성공이다! 데이터를 보여주는 작업은 거의 이런 식으로 이루어진다고 한다. 이제 마음껏 UI를 꾸며주면 된다 😆
