Created
June 11, 2022 06:46
-
-
Save koboolean/ce5bfe5a89e1e0ef7c9b3817952e3c36 to your computer and use it in GitHub Desktop.
flutter bucketlist Provider
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
import 'main.dart'; | |
/// Bucket 담당 | |
class BucketService extends ChangeNotifier { | |
List<Bucket> bucketList = [ | |
]; | |
/// bucket 추가 | |
void createBucket(String job) { | |
bucketList.add(Bucket(job, false)); | |
notifyListeners(); // 갱신 = Consumer<BucketService>의 builder 부분만 새로고침 | |
} | |
/// bucket 수정 | |
void updateBucket(Bucket bucket, int index) { | |
bucketList[index] = bucket; | |
notifyListeners(); | |
} | |
/// bucket 삭제 | |
void deleteBucket(int index) { | |
bucketList.removeAt(index); | |
notifyListeners(); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:bucketlist_provider/bucket_service.dart'; | |
import 'package:flutter/cupertino.dart'; | |
import 'package:flutter/material.dart'; | |
import 'package:provider/provider.dart'; | |
void main() { | |
runApp( | |
// MyApp의 최상단에 Provider를 이용해 감싼 후 모든 위젯에서 사용할 수 있도록 만들어 준다. | |
MultiProvider( | |
providers: [ | |
ChangeNotifierProvider(create: (context) => BucketService()), | |
], | |
child: const MyApp(), | |
), | |
); | |
} | |
class MyApp extends StatelessWidget { | |
const MyApp({Key? key}) : super(key: key); | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
debugShowCheckedModeBanner: false, | |
home: HomePage(), | |
); | |
} | |
} | |
/// 버킷 클래스 | |
class Bucket { | |
String job; // 할 일 | |
bool isDone; // 완료 여부 | |
Bucket(this.job, this.isDone); // 생성자 | |
} | |
/// 홈 페이지 | |
class HomePage extends StatelessWidget { | |
const HomePage({Key? key}) : super(key: key); | |
@override | |
Widget build(BuildContext context) { | |
return Consumer<BucketService>( | |
builder: (context, bucketService, child) { | |
List<Bucket> bucketList = bucketService.bucketList; // bucketService로 부터 bucketList 가져오기 | |
return Scaffold( | |
appBar: AppBar( | |
title: Text("버킷 리스트"), | |
), | |
body: bucketList.isEmpty | |
? Center(child: Text("버킷 리스트를 작성해 주세요.")) | |
: ListView.builder( | |
itemCount: bucketList.length, // bucketList 개수 만큼 보여주기 | |
itemBuilder: (context, index) { | |
var bucket = bucketList[index]; // index에 해당하는 bucket 가져오기 | |
return ListTile( | |
// 버킷 리스트 할 일 | |
title: Text( | |
bucket.job, | |
style: TextStyle( | |
fontSize: 24, | |
color: bucket.isDone ? Colors.grey : Colors.black, | |
decoration: bucket.isDone | |
? TextDecoration.lineThrough | |
: TextDecoration.none, | |
), | |
), | |
// 삭제 아이콘 버튼 | |
trailing: IconButton( | |
icon: Icon(CupertinoIcons.delete), | |
onPressed: () { | |
bucketService.deleteBucket(index); | |
}, | |
), | |
onTap: () { | |
bucket.isDone = !bucket.isDone; | |
bucketService.updateBucket(bucket, index); | |
}, | |
); | |
}, | |
), | |
floatingActionButton: FloatingActionButton( | |
child: Icon(Icons.add), | |
onPressed: () { | |
// + 버튼 클릭시 버킷 생성 페이지로 이동 | |
Navigator.push( | |
context, | |
MaterialPageRoute(builder: (_) => CreatePage()), | |
); | |
}, | |
), | |
); | |
} | |
); | |
} | |
} | |
/// 버킷 생성 페이지 | |
class CreatePage extends StatefulWidget { | |
const CreatePage({Key? key}) : super(key: key); | |
@override | |
State<CreatePage> createState() => _CreatePageState(); | |
} | |
class _CreatePageState extends State<CreatePage> { | |
// TextField의 값을 가져올 때 사용합니다. | |
TextEditingController textController = TextEditingController(); | |
// 경고 메세지 | |
String? error; | |
@override | |
Widget build(BuildContext context) { | |
return Scaffold( | |
appBar: AppBar( | |
title: Text("버킷리스트 작성"), | |
// 뒤로가기 버튼 | |
leading: IconButton( | |
icon: Icon(CupertinoIcons.chevron_back), | |
onPressed: () { | |
Navigator.pop(context); | |
}, | |
), | |
), | |
body: Padding( | |
padding: const EdgeInsets.all(16), | |
child: Column( | |
children: [ | |
// 텍스트 입력창 | |
TextField( | |
controller: textController, | |
autofocus: true, | |
decoration: InputDecoration( | |
hintText: "하고 싶은 일을 입력하세요", | |
errorText: error, | |
), | |
), | |
SizedBox(height: 32), | |
// 추가하기 버튼 | |
SizedBox( | |
width: double.infinity, | |
height: 48, | |
child: ElevatedButton( | |
child: Text( | |
"추가하기", | |
style: TextStyle( | |
fontSize: 18, | |
), | |
), | |
onPressed: () { | |
// 추가하기 버튼 클릭시 | |
String job = textController.text; | |
if (job.isEmpty) { | |
setState(() { | |
error = "내용을 입력해주세요."; // 내용이 없는 경우 에러 메세지 | |
}); | |
} else { | |
setState(() { | |
error = null; // 내용이 있는 경우 에러 메세지 숨기기 | |
}); | |
// BucketService 가져오기 | |
BucketService bucketService = context.read<BucketService>(); | |
bucketService.createBucket(job); | |
Navigator.pop(context); // 화면을 종료합니다. | |
} | |
}, | |
), | |
), | |
], | |
), | |
), | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment