[flutter] Flutter Riverpod에서 계획 관리 앱 만들기
개요
이 튜토리얼에서는 Flutter 및 Riverpod 패키지를 사용하여 간단한 계획 관리 앱을 만드는 방법에 대해 알아보겠습니다. Riverpod은 Flutter 앱에서 상태 관리를 쉽게 할 수 있도록 도와주는 패키지입니다.
필요한 패키지 설치
먼저, pubspec.yaml 파일에 아래와 같이 riverpod 패키지를 추가합니다.
dependencies:
flutter:
sdk: flutter
riverpod: ^1.0.3
그 후, 터미널에서 아래 명령어를 사용하여 패키지를 설치합니다.
flutter pub get
앱 디자인 및 레이아웃
앱의 디자인 및 레이아웃을 만들기 위해 lib/main.dart 파일을 엽니다. 여기에는 계획을 입력하고 표시하는 화면을 구현할 것입니다.
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
final planListProvider = StateProvider<List<String>>((ref) => []);
void main() {
runApp(ProviderScope(child: MyApp()));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Plan Manager'),
),
body: PlanList(),
floatingActionButton: AddPlanButton(),
),
);
}
}
class PlanList extends ConsumerWidget {
@override
Widget build(BuildContext context, ScopedReader watch) {
final planList = watch(planListProvider);
return ListView.builder(
itemCount: planList.state.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(planList.state[index]),
);
},
);
}
}
class AddPlanButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return FloatingActionButton(
onPressed: () {
context.read(planListProvider).state = [...context.read(planListProvider).state, 'New Plan'];
},
child: Icon(Icons.add),
);
}
}
결과
위의 코드를 실행하면 간단한 계획 관리 앱이 만들어집니다. 사용자는 플로팅 액션 버튼을 통해 새로운 계획을 추가하고, 해당 목록이 화면에 표시됩니다.
이제 Riverpod를 사용하여 상태 관리를 쉽게 할 수 있게 되었습니다. 이러한 방식으로 앱을 확장하여 더 다양하고 복잡한 기능을 추가할 수 있습니다.