Flutter + Dart/Flutter + Dart 공부

json 파일을 .dart에 변수로 가져오기

GREEN나무 2025. 5. 19. 16:25
728x90

.dart 파일에서 외부 JSON 파일(예: schedule_items_30.json)을 읽어 배열 변수(

List<Map<String, dynamic>>> schedule_item()

) 로 가져오는 기본 방법.


✅ 1. pubspec.yaml에 assets 등록

flutter:
  assets:
    - assets/schedule_items_30.json

🔸 assets/ 폴더에 schedule_items_30.json 파일을 넣어야 함. 경로가 다르면 수정하기.


✅ 2. Dart 코드 작성 (예: load_schedule.dart)

import 'dart:convert';
import 'package:flutter/services.dart' show rootBundle;

Future<List<Map<String, dynamic>>> loadScheduleItems() async {
  final String jsonString = await rootBundle.loadString('assets/schedule_items_30.json');
  final List<dynamic> jsonList = json.decode(jsonString);

  // 각 항목을 Map<String, dynamic>으로 변환
  return jsonList.cast<Map<String, dynamic>>();
}

✅ 3. 사용하는 화면에서 불러오기

예: initState()나 FutureBuilder로 처리

late Future<List<Map<String, dynamic>>> scheduleItemsFuture;

@override
void initState() {
  super.initState();
  scheduleItemsFuture = loadScheduleItems();
}

// 예시 UI 코드
@override
Widget build(BuildContext context) {
  return FutureBuilder<List<Map<String, dynamic>>>(
    future: scheduleItemsFuture,
    builder: (context, snapshot) {
      if (snapshot.connectionState == ConnectionState.waiting) {
        return const CircularProgressIndicator();
      } else if (snapshot.hasError) {
        return Text('오류 발생: ${snapshot.error}');
      } else {
        final scheduleItems = snapshot.data!;
        return ListView.builder(
          itemCount: scheduleItems.length,
          itemBuilder: (context, index) {
            final item = scheduleItems[index];
            return ListTile(
              leading: Text(item['emoji']),
              title: Text(item['name']),
              subtitle: Text(item['place']),
            );
          },
        );
      }
    },
  );
}