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']),
);
},
);
}
},
);
}