[flutter] Flutter Riverpod에서 텔레비전 프로그램 편성표 앱 만들기

14 Dec 2023

flutter

이 블로그 포스트에서는 Flutter와 Riverpod를 이용하여 텔레비전 프로그램 편성표를 표시하는 간단한 앱을 만드는 방법을 알아보겠습니다. Riverpod는 상태 관리를 위한 강력한 라이브러리로, Flutter 앱의 상태 관리를 쉽게 할 수 있도록 도와줍니다.

시작하기 전에

이 프로젝트를 시작하기 전에 Flutter와 Riverpod가 설치된 개발 환경을 갖추고 있어야 합니다. Flutter 및 Riverpod에 대한 기본적인 지식이 있다면 이 프로젝트를 따라 진행하는 데 문제가 없을 것입니다.

프로젝트 설정

프로젝트를 생성하고 Riverpod를 사용할 수 있도록 설정합니다.

먼저 새로운 Flutter 프로젝트를 생성합니다.

flutter create tv_schedule_app

그런 다음, pubspec.yaml 파일에 다음과 같이 Riverpod 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^1.0.4

의존성을 추가한 후, 터미널에서 다음 명령어를 실행하여 패키지를 업데이트합니다.

flutter pub get

이제 프로젝트가 설정되었으니, 원하는 기능들을 추가해 나아가면 됩니다.

텔레비전 프로그램 편성표 표시하기

텔레비전 프로그램 편성표를 표시하기 위해 상태 관리 및 외부 데이터 소스가 필요합니다. 이 예제에서는 Riverpod와 가짜 API를 사용하여 가상의 텔레비전 프로그램 편성표를 표시하는 방법을 알아보겠습니다.

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

final tvScheduleProvider = FutureProvider<List<TvProgram>>((ref) {
  // 가짜 API를 통해 텔레비전 프로그램 편성표 데이터를 가져옴
  return fetchTvSchedule();
});

Future<List<TvProgram>> fetchTvSchedule() async {
  // 실제 텔레비전 프로그램 편성표 데이터를 가져오는 비동기 작업 수행
  // ...
  // 가져온 데이터를 가공하여 List<TvProgram>으로 반환
}

class TvScheduleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('텔레비전 프로그램 편성표'),
      ),
      body: Consumer(builder: (context, watch, child) {
        final tvSchedule = watch(tvScheduleProvider);
        return tvSchedule.when(
          loading: () => CircularProgressIndicator(),
          error: (error, stackTrace) => Text('에러 발생: $error'),
          data: (programs) => ListView.builder(
            itemCount: programs.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(programs[index].title),
                subtitle: Text(programs[index].time),
              );
            },
          ),
        );
      }),
    );
  }
}

void main() {
  runApp(
    ProviderScope(
      child: TvScheduleApp(),
    ),
  );
}

위의 예시 코드는 Riverpod를 사용하여 가짜 API에서 텔레비전 프로그램 편성표 데이터를 가져와 화면에 표시하는 간단한 Flutter 앱입니다.

마무리

이제 Riverpod를 사용하여 텔레비전 프로그램 편성표를 표시하는 간단한 Flutter 앱을 만드는 방법을 알아보았습니다. Riverpod를 사용하면 복잡한 상태 관리를 쉽게 처리할 수 있고, 앱의 확장성과 유지보수성을 향상시킬 수 있습니다.

더 많은 기능을 추가하거나 UI를 개선하여 실제 앱을 개발하는 과정에서 Riverpod의 강력한 기능을 더욱 활용해보시기 바랍니다!