Flutter 스터디 32 웹 상의 Json 데이터 파싱해서 플러터 앱에 출력하기

[Flutter / 플러터] 웹상에 있는 Json 데이터 실패 없이 끌어와서 보여주기

 

기본 코드 2개

//main.dart

import 'package:flutter/material.dart';

import 'json_parse.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          primarySwatch: Colors.blue
      ),
      home: JsonParse(),
    );
  }
}

//json_parse.dart

import 'package:flutter/material.dart';

class JsonParse extends StatefulWidget {
  const JsonParse({Key? key}) : super(key: key);

  @override
  State<JsonParse> createState() => _JsonParseState();
}

class _JsonParseState extends State<JsonParse> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('User'),
      ),
    );
  }
}

 

json 더미 데이터용

https://jsonplaceholder.typicode.com/

 

 

json 데이터 사용하기 위해선 decode/encode할 클래스 필요

- fromJson 메서드를 이용해 json 데이터를 dart object로 변환 

- toJson 메서드로는 dart object를 josn 데이터로 변환

 

 

model을 빠르고 쉽게 생성하기 위해서 quicktype 이용

https://app.quicktype.io/

 

> 언어 선택 반드시 Dart

> Name은 클래스 이름을 뜻함

> 노란형광펜이 칠해진 곳에 Json 데이터를 붙여넣으면 자동으로 클래스 생성

 

 

웹상에 있는 json 데이터를 파싱해서 사용해야하므로 http 패키지 설치

 

파일생성 후 코드

//service.dart

import 'package:http/http.dart';

class Services{
  static const String url = 'https://jsonplaceholder.typicode.com/users';
}

> static 쓰는 이유 : 변하지 않는 주소의 값이나 설정 정보와 같은 데이터에 접근하는데 있어서 매번 메모리에 로딩해서 값을 읽는것보다 일종의 전역변수와 같은 개념을 통해서 접근을 하는 것이 비용 줄이고, 효율 높이기

 

 

static Future<List<User>> getInfo() async{
    try{
      final response = await http.get(Uri.parse(url));
      if(response.statusCode == 200){
        final List<User> user = userFromJson(response.body);
        return user;
      }else{
        Fluttertoast.showToast(msg: 'Error occurred. Please try again');
      }
    }catch(e){
      Fluttertoast.showToast(msg: e.toString());
    }
  }

> 미래의 어느 시점에 User를 통해서 전달되는 데이터를 다루어야함으로 Future, List 타입

 

//json_parse.dart

List<User> _user = <User>[];
bool loading = false;

@override
void initState() {
  // TODO: implement initState
  super.initState();
  Service.getInfo().then((value){
    setState(() {
      _user = value;
      loading = true;
    });
  });
}

 

 

json 데이터를 리스트뷰 형태로 화면에 출력

//json_parse.dart

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('User'),
    ),
    body: ListView.builder(
      itemCount: _user.length,
      itemBuilder: (context, index) {
        User user = _user[index];
        return ListTile(
          leading: const Icon(
            Icons.account_circle_rounded,
            color: Colors.blue,
          ),
          trailing: IconButton(
            onPressed: () {
              showDialog(
                context: context,
                builder: (context) {
                  return AlertDialog(
                    title: Text(user.name),
                    content: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Text(user.phone),
                        TextButton(
                          onPressed: (){
                            Navigator.pop(context);
                          },
                          child: const Text('Close'),
                        ),
                      ],
                    ),
                  );
                },
              );
            },
            icon: const Icon(
              Icons.phone_android_outlined,
              color: Colors.red,
            ),
          ),
          title: Text(user.name),
          subtitle: Text(user.email),
        );
      },
    ),
  );
}

 

끝