[flutter] Flutter Riverpod에서 여행 일정 앱 만들기

14 Dec 2023

flutter

여행 일정을 효과적으로 관리하고 공유할 수 있는 앱은 많은 이들에게 유용한 도구입니다. 이번 글에서는 Flutter와 Riverpod을 사용하여 여행 일정 관리 앱을 만들어보겠습니다.

Riverpod이란?

Riverpod은 Flutter 앱에서 의존성 관리와 상태 관리를 위한 라이브러리입니다. Provider와 비슷하지만 더 단순하고 강력한 기능을 제공합니다. Riverpod을 사용하면 Flutter 앱의 상태를 효과적으로 관리할 수 있습니다.

앱 기능 소개

우리가 만들 여행 일정 관리 앱은 다음과 같은 기능을 포함할 것입니다:

여행 일정 추가, 수정, 삭제
여행 일정 공유하기
여행 일정에 관련된 이미지 및 메모 추가

Riverpod을 사용한 여행 일정 관리 앱 만들기

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

final travelListProvider = StateProvider<List<String>>((ref) => []);

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var travelList = context.read(travelListProvider);
    return Scaffold(
      appBar: AppBar(
        title: Text('여행 일정'),
      ),
      body: ListView.builder(
        itemCount: travelList.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(travelList.state[index]),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          context.read(travelListProvider).state = ['여행지 1', '여행지 2', '여행지 3'];
        },
        tooltip: '여행 일정 추가',
        child: Icon(Icons.add),
      ),
    );
  }
}

위에서는 Riverpod을 사용하여 여행 일정을 추가하고 목록으로 보여주는 간단한 예제를 보여드렸습니다.

결론

이번 글에서는 Riverpod을 사용하여 Flutter 앱에서 여행 일정 관리 앱의 기초를 만드는 방법에 대해 알아보았습니다. Riverpod을 통해 Flutter 앱의 상태 관리를 효과적으로 할 수 있으며, 이를 응용하여 보다 다양한 기능을 갖춘 여행 일정 관리 앱을 구현할 수 있을 것입니다.

참고 자료

Riverpod 공식 문서: https://riverpod.dev/docs
Flutter 공식 문서: https://flutter.dev/docs