flutter json 데이터 가져오기

 

1. JSON 파일 추가 및 등록: JSON 파일을 assets 폴더에 추가하고 pubspec.yaml 파일에 등록합니다.

 

{
  "users": [
    {
      "id": 1,
      "username": "Anna",
      "email": "anna@gmail.com"
    },
    {
      "id": 2,
      "username": "David",
      "email": "david@gmail.com"
    },
    {
      "id": 3,
      "username": "brian",
      "email": "brian@gmail.com"
    },
    {
      "id": 4,
      "username": "roky",
      "email": "roky@gmail.com"
    },
    {
      "id": 5,
      "username": "sam",
      "email": "sam@gmail.com"
    },
    {
      "id": 6,
      "username": "dead",
      "email": "dead@gmail.com"
    }
  ]
}

 

2. JSON 파일 읽기 및 파싱

 

dart:convert와 flutter/services.dart 패키지를 사용하여 JSON 파일을 읽고 파싱합니다.

 

static Future loadJson() async {
    final String response = await rootBundle.loadString("lib/users.json");
    final data = await json.decode(response);
    return data['users'];
  }

  Future userList = loadJson();

 

3. 위젯에 데이터 노출하기

Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("test title"),
        ),
        body: Container(
          child: FutureBuilder(
            future: userList,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return ListView.builder(
                  itemCount: snapshot.data.length,
                    itemBuilder: (context, index) {
                      return Container(
                        padding: const EdgeInsets.all(10),
                        child: Text(
                            "${snapshot.data[index]["id"]}: ${snapshot.data[index]["username"]}"
                        ),
                      );
                    }
                );
              } else if (snapshot.hasError) {
                return const Center(
                  child: Text("Error"),
                );
              } else {
                return const Center(
                    child: CircularProgressIndicator(
                        strokeWidth: 2,
                    )
                );
              }
            },
          ),
        )
    )

결과물