[flutter] Flutter Riverpod에서 집 밖에 나오지 않기 앱 만들기
많은 사람들이 COVID-19 팬데믹으로 인해 집에 머물러야 하는 상황에 처해 있습니다. 여기서는 Flutter와 Riverpod를 사용하여 집을 나가지 않는 것을 장려하는 간단한 모바일 애플리케이션을 만드는 방법에 대해 설명하겠습니다.
1. 프로젝트 설정
우선 터미널을 열고 프로젝트 디렉토리를 만들고 다음 명령어를 실행하여 새로운 Flutter 프로젝트를 생성합니다.
flutter create stay_home_app
2. Riverpod 라이브러리 추가
pubspec.yaml 파일을 열고 다음과 같이 riverpod 라이브러리를 추가합니다.
dependencies:
flutter:
sdk: flutter
riverpod: ^0.14.0+3
그런 다음 터미널에서 다음 명령어를 실행하여 패키지를 설치합니다.
flutter pub get
3. 홈 페이지 디자인
lib 폴더 내의 main.dart 파일을 열고 다음과 같이 홈 페이지를 디자인합니다.
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
void main() {
runApp(ProviderScope(child: MyApp()));
}
final stayingAtHomeProvider = StateProvider((ref) => true);
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Stay Home App'),
),
body: Center(
child: Consumer(
builder: (context, watch, _) {
final stayingAtHome = watch(stayingAtHomeProvider).state;
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Are you staying at home?'),
SizedBox(height: 20),
Switch(
value: stayingAtHome,
onChanged: (value) {
context.read(stayingAtHomeProvider).state = value;
},
),
],
);
},
),
),
),
);
}
}
4. 앱 실행
이제 시뮬레이터 또는 실제 기기에서 앱을 실행해보고, 스위치를 토글하여 ‘집에 있음’ 또는 ‘집을 나감’ 상태를 변경해보세요.
집에서 나가지 않기를 장려하는 간단한 Flutter 앱을 만드는 방법에 대해 알아보았습니다. 이는 Riverpod를 활용하여 상태를 관리하고 사용자가 집에 있음을 선택하도록 하는 기본적인 예제입니다.
더 많은 기능을 추가하여 사용자가 집 밖으로 나가려고 할 때 경고 메시지를 표시하거나, 현재 위치를 기반으로 주변의 COVID-19 백신 접종 센터 정보를 제공하는 등 여러 가지 방법으로 이 프로젝트를 확장할 수 있습니다.