JSON 및 Flutter로 간단한 시간표 앱 만들기

이 기사에서는 로컬 JSON 파일에서 약속 목록을 읽고 목록에 표시하는 간단한 Flutter 앱을 빌드할 것입니다. 이것은 다음과 같은 Flutter 앱에서 사용할 수 있는 몇 가지 개념을 이해하는 데 유용합니다.

로컬 저장소에서 파일 읽기

JSON 파일 구문 분석

Dart 클래스 목록에 대한 JSON 파일 모델링

FutureBuilder로 목록 만들기

최종 결과는 다음과 같습니다

코딩하자

이 GitHub 저장소simple-flutter-timetable에서 모든 코드를 찾을 수 있으며 주요 부분은 다음과 같습니다.

assets/json/timetable.json: "저장소"를 나타내는 시간표가 있는 파일 json, DB 또는 API 결과 이미지;

lib/model/appointment.dart: JSON 개체를 Dart 클래스로 변환할 수 있는 모델입니다.

lib/pages/home_page.dart: JSON을 읽고 구문 분석하기 위한 모든 호출이 있는 앱의 기본 화면입니다.

lib/ui/appointment.list.dart: JSON에서 클래스 목록을 읽고 화면에 표시하기 위한 listview;

이 게시물에서는 가장 중요한 부분만 설명하겠습니다. 저장소의 코드를 따라가면 코드가 무엇을 하는지 이해하기가 매우 쉽기 때문입니다.

우선 Flutter에게 timetable.json 파일을 사용할 수 있다고 알려야 하고 그렇게 하려면 해당 행을 pubspec.yaml 파일에 넣어야 합니다.

  assets:
    - assets/json/timetable.json

그런 다음 정보를 나타내는 Dart 클래스를 제공해야 합니다. 이 경우에는 이 데이터로 약속을 만듭니다.

{
    "day": "2021-05-24",
    "time": "09:00 -> 11:00",
    "type": "relax",
    "title": "Yoga class"
}

Dart 클래스는 이것입니다

class Appointment {
  final String day;
  final String time;
  final String type;
  final String title;

  Appointment({required this.day, 
      required this.time, 
      required this.type, 
      required this.title});

  //This is the function that lets you to convert the 
  //  JSON representation of the Appointment in its Dart class
  factory Appointment.fromJson(Map<String, dynamic> json) {
    return new Appointment(
      day: json['day'] as String,
      time: json['time'] as String,
      type: json['type'] as String,
      title: json['title'] as String
    );
  }
}

파일을 읽고 home_page.dart에서 이 두 함수를 사용하여 콘텐츠를 구문 분석할 수 있습니다.

Future<String> getJsonStringFromFile() async {
    return await DefaultAssetBundle.of(context)
              .loadString('assets/json/timetable.json');
}

List<Appointment> parseJson(String response) {
  final parsed =
      json.decode(response.toString()).cast<Map<String, dynamic>>();
  return parsed.map<Appointment>((json) => new Appointment.fromJson(json)).toList();
}

이 경우 getJsonStringFromFile 함수는 메모리 액세스가 시간이 걸릴 수 있는 작업이므로 파일 읽기가 "가까운 미래"에 발생할 것이기 때문에 비동기로 선언되었습니다. UI를 "고정"하지 않고 비동기 코드를 활용하기 위해 FutureBuilder도 추가되었습니다. 이 위젯은 데이터가 비동기에서 오는 UI의 일부를 표시해야 할 때 매우 유용한 위젯입니다. 데이터가 도착하는 동안 자리 표시자 위젯을 제공할 수 있습니다. 데이터가 도착하면 최종 UI를 디자인할 수 있습니다.

new FutureBuilder(
  future: getJsonStringFromFile(),
  builder: (context, snapshot) {
    if (!snapshot.hasData) {
      //Placeholder widget because the data hasn't arrived yet
      return new Center(
        child: new CircularProgressIndicator(),
      );
    } else {
      List<Appointment> appointments = parseJson(snapshot.data.toString());
      return new AppointmentList(
        appointments: appointments,
      );
    }
  },
),

UI를 사용자 지정하기 위해 클래스의 유형 필드를 사용하여 단일 행에 사용자 지정 아이콘을 표시하고 사용자가 다양한 약속 유형을 쉽게 구분할 수 있도록 했습니다.

그것을 개선하는 방법

앱을 개선하기 위해 할 수 있는 개선 사항이 많이 있습니다. 이제 몇 가지 영감을 주기 위해 그 중 일부를 나열할 수 있습니다.

인터넷의 사용자 정의 URL에서 JSON 파일 읽기: 이 방법을 사용하면 로컬 저장소에 있는 JSON으로 제한되지 않으므로 JSON 파일을 업데이트해야 하는 경우 앱을 업데이트할 필요가 없습니다. , 하지만 앱이 업데이트된 파일을 읽기 때문에 JSON 파일만 업데이트하면 됩니다.

위치, 분할 시작 및 종료 시간과 같은 단일 약속에 대한 추가 정보를 추가하고 약속에 대한 설명 또는 메모를 삽입합니다.

모든 정보를 표시하는 약속 세부 사항 페이지를 만듭니다.

사용자가 목록의 내용을 필터링하도록 허용: 예를 들어 약속 유형 또는 날짜별로 필터를 추가할 수 있습니다. 약속 목록이 매우 긴 경우 매우 편리할 수 있습니다.

Uplabs , Behance 또는 Pinterest 과 같은 사이트에서 단일 행의 모양과 느낌을 더 사용자 정의할 수 있습니다. 이를 개선하기 위한 많은 UI 디자인을 찾을 수 있습니다.

이 GitHub 저장소에서 모든 앱 코드를 찾을 수 있습니다. iOS 및 웹에서.

안녕, 알베르토