flutter 코드모음 - 로컬에서 json 읽어오기

json 파일을 읽어 오는 코드

서버에서는 아직이고...로컬에서 읽어 오기

import 'package:flutter/material.dart';

import 'package:flutter/services.dart';

import 'dart:convert';

void main() {

  runApp(const MyApp());

}

class MyApp extends StatelessWidget {

  const MyApp({super.key});

  @override

  Widget build(BuildContext context) {

    return MaterialApp(home: const MyHomePage());

  }

}

class MyHomePage extends StatefulWidget {

  const MyHomePage({super.key});

  @override

  State<MyHomePage> createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

  Future<String> loadjson() async {

    return await rootBundle.loadString('res/list.json');

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: FutureBuilder(

        future: loadjson(),

        builder: (context, snapshot) {

          switch (snapshot.connectionState) {

            case ConnectionState.none:

              return Center(child: CircularProgressIndicator());

            case ConnectionState.active:

              return Center(child: Text('active'));

            case ConnectionState.waiting:

              return Center(child: Text('waiting'));

            case ConnectionState.done:

              if (snapshot.hasError) {

                return Text('Error: ${snapshot.error}');

              }

              Map<String, dynamic> lists = jsonDecode(snapshot.data!);

              return ListView.builder(

                itemCount: lists['questions'].length,

                itemBuilder: (context, index) {

                  return InkWell(

                    child: SizedBox(

                      height: 50,

                      child: Card(

                        child: Text(

                          lists['questions'][index]['title'].toString(),

                        ),

                      ),

                    ),

                    onTap: () {},

                  );

                },

              );

          }

        },

      ),

    );

  }

}

 

 

rootBundle.loadString() 이란?

 

Flutter 앱 개발 중 에셋(assets) 폴더에 저장된 JSON 파일을 읽어와 앱에서 활용해야 하는 경우가 많습니다. 이때 rootBundle.loadString() 코드를 사용하면 간단하게 JSON 파일의 내용을 문자열(String) 형태로 불러올 수 있습니다. .

rootBundle.loadString('res/list.json') 코드는 Flutter 앱의 에셋 폴더에 저장된 res/list.json 파일의 내용을 문자열 형태로 불러오는 코드입니다. rootBundle은 앱의 에셋에 접근하기 위한 객체이며, 이를 통해 앱에 포함된 모든 에셋 파일에 접근할 수 있습니다.

rootBundle.loadString() 코드 사용

1. 앱 데이터 초기화 및 설정 정보 읽기: 앱 내에 저장된 JSON 데이터를 파싱하여 앱의 데이터를 초기화하거나 설정 정보를 읽어올 때 유용합니다.
2. 도움말 및 약관 표시: 앱 내에 저장된 텍스트 파일을 읽어와 앱의 도움말이나 약관 등을 표시할 때 활용할 수 있습니다.
3. 데이터베이스 쿼리: 앱 내에 저장된 데이터베이스에 쿼리문을 보내기 위해 사용할 수 있습니다.

 

코드 사용법 및 예시
rootBundle.loadString() 코드는 비동기적으로 파일을 읽어오므로, async와 await 키워드를 함께 사용해야 합니다. 다음은 res/list.json 파일을 읽어와 콘솔에 출력하는 간단한 예시 코드입니다.

import 'package:flutter/services.dart';

Future<void> loadJson() async {
  try {
    String jsonString = await rootBundle.loadString('res/list.json');
    print(jsonString); // JSON 파일 내용 출력
  } catch (e) {
    print('JSON 파일 로드 실패: $e');
  }
}
위 코드에서 rootBundle.loadString('res/list.json')은 res/list.json 파일의 내용을 문자열 형태로 반환하며, await 키워드를 통해 파일 로드가 완료될 때까지 기다립니다. try-catch 구문을 사용하여 파일 로드 실패 시 예외 처리를 하는 것이 좋습니다.

추가 정보
rootBundle.loadString()은 Flutter 프레임워크 내에서만 사용 가능합니다.
에셋 파일의 경로를 정확하게 지정해야 합니다.
JSON 파일의 내용을 Dart 객체로 변환하려면 dart:convert 라이브러리의 json.decode() 함수를 사용해야 합니다.
결론
rootBundle.loadString() 코드를 사용하면 Flutter 앱에서 에셋 폴더에 저장된 JSON 파일을 간편하게 읽어올 수 있습니다. 이를 통해 앱의 데이터를 초기화하거나 설정 정보를 읽어오는 등 다양한 작업을 수행할 수 있습니다.