[flutter] Flutter Riverpod에서 플랜트 관리 앱 만들기
플랜트를 사랑하는 사람들을 위한 플랜트 관리 앱을 Flutter와 Riverpod로 만들어보겠습니다. 이 앱에서는 플랜트 목록을 표시하고 각 플랜트의 정보를 수정하는 기능을 제공할 것입니다.
필요한 패키지 설치
먼저 pubspec.yaml 파일에 다음과 같이 riverpod 패키지를 추가합니다:
dependencies:
flutter:
sdk: flutter
riverpod: ^1.0.0
그리고 터미널에서 다음 명령어를 실행하여 패키지를 설치합니다:
flutter pub get
Riverpod로 상태 관리하기
Riverpod를 사용하여 앱의 상태를 관리할 때, Provider를 사용합니다. Provider를 활용하여 플랜트 목록의 상태를 관리하고, 각 플랜트의 정보를 수정할 수 있도록 할 것입니다.
다음은 간단한 Provider의 예시입니다:
final plantListProvider = StateNotifierProvider<PlantList, List<Plant>>((ref) {
return PlantList();
});
플랜트 목록 화면 만들기
이제 플랜트 목록을 표시하는 화면을 만들어봅시다. ListView.builder를 사용하여 각 플랜트 아이템을 동적으로 표시할 수 있습니다. 플랜트를 누르면 해당 플랜트의 정보를 수정할 수 있는 화면으로 이동하도록 할 것입니다.
class PlantListScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
final plantList = context.read(plantListProvider);
return Scaffold(
appBar: AppBar(
title: Text('My Plants'),
),
body: ListView.builder(
itemCount: plantList.length,
itemBuilder: (context, index) {
final plant = plantList[index];
return ListTile(
title: Text(plant.name),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PlantDetailScreen(plant),
),
);
},
);
},
),
);
}
}
플랜트 정보 수정 화면 만들기
각 플랜트의 정보를 수정할 수 있는 화면을 만들어봅시다. 사용자가 플랜트의 이름, 관리 방법, 물 주기 등을 수정할 수 있는 폼을 구성할 것입니다.
class PlantDetailScreen extends StatelessWidget {
final Plant plant;
PlantDetailScreen(this.plant);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Plant Details'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Name: ${plant.name}'),
TextFormField(
initialValue: plant.name,
onChanged: (value) {
context.read(plantListProvider.notifier).updateName(plant, value);
},
),
// 나머지 입력 폼 구성
],
),
),
);
}
}
위와 같이 Flutter와 Riverpod를 활용하여 플랜트 관리 앱을 만들 수 있습니다. 상태 관리와 화면 구성에 더 많은 기능을 추가하여 플랜트를 효과적으로 관리할 수 있도록 확장할 수 있습니다.
이제 여러분의 플랜트 관리 앱을 만들어보세요!🌿