Flutter/Riverpod

Flutter/Riverpod

[Flutter] StateNotifier / Riverpod 사용해서 앱 만들어보기.

https://jutole.tistory.com/68 [Flutter] StateNotifier 란? (1) 이 글은 StateNotiffier에 대해 알아가기 위해 공부한 내용을 적은 글 입니다. StateNotifier를 알아보기전에 State란 무엇인지 알아보겠습니다. What is state? Flutter는 본질적으로 선언형 프로그래밍 입니다 jutole.tistory.com 위 글에서 StateNotifier를 이론적으로 배웠다면 실습을 Riverpod을 이용해서 해 보겠습니다. 이글에서 StateNotifer 와 Riverpod을 이용해서 만들어 볼 앱 입니다. Start 앞서 앱 파일 구조는 이렇게 됩니다. 미리 파일만 만들어 주셔도 됩니다. 프로젝트 생성 플러터 프로젝트를 생성해주세요. ..

Flutter/Riverpod

Flutter) Riverpod refresh / invalidate - 6

invalidate final countProvider = StateProvider((ref) => 0); class HomePage extends ConsumerWidget { const HomePage({Key? key}) : super(key: key); @override Widget build(BuildContext context, WidgetRef ref) { print("HomePage Build"); return Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text("Hello World"), Consumer( builder: (context, ref, widget)..

Flutter/Riverpod

Flutter) Riverpod Consumer 사용하기 - 5

class MyApp extends ConsumerWidget { const MyApp({super.key}); @override Widget build(BuildContext context, WidgetRef ref) { //ref를 사용해 프로바이더 구독하기 final counter = ref.watch(counterProvider); ref.listen(counterProvider, (previousState, newState) { print("The new value is $newState"); }); return MaterialApp( home: Scaffold( appBar: AppBar(title: Text("Riverpod Study")), body: Center( child: Column..

Flutter/Riverpod

Flutter) Riverpod watch,listen,read 사용하기 - 4

이 글은 Riverpod 공식문서를 참조 하였습니다. 이전글에서 "ref" 객체를 얻어오는 방법에 대해 알아봤습니다. 이제 "ref" 객체의 사용방법에 대해 알아보겠습니다. ref 주요기능 3가지 ref.watch - 프로바이더의 값을 얻고 값의 변화를 감지합니다. - 값의 변화를 감지하면 Widget을 재빌드 하거나 해당 값을 구독하고 있는 곳에 변경된 상태값을 전달 합니다. ref.listen - 프로바이더의 상태값을 구독하거나 - 상태값이 변했을때 어떠한 행위를 취해야할 경우 사용합니다. ref.read - 프로바이더의 상태값을 얻습니다. - 이벤트 콜백함수에 사용하기 유용합니다. - 예를 들어 버튼의 onPressed 콜백 함수에서 프로바이더의 필요한 상태값을 얻기위해 사용가능합니다. 기능을 구현..

Flutter/Riverpod

Flutter) Riverpod "ref" 얻기 - 3

이 글은 Riverpod 공식문서를 참조했습니다. 이 글에서는 "ref" 객체를 얻는 방법을 설명하겠습니다. "ref" 객체 얻기 프로바이더를 읽기전에 "ref" 객체를 얻어야 합니다. "ref"는 프로바이더간에 상호작용을 도와주고 위젯이나 다른 프로바이더에서 얻을 수 있습니다. 프로바이더로 부터 "ref" 객체 얻기 모든 프로바이더는 "ref" 객체를 파라미터로 받게 됩니다. final provider = Provider((ref) { // 다른 프로바이더 객체를 얻기위해 ref를 사용합니다. // 여기서 repositoryProvider 프로바이더를 Provider 에서 읽는 것을 확인합니다. final repository = ref.watch(repositoryProvider); return Som..

Flutter/Riverpod

Flutter) Riverpod 프로바이더란? - 2

해당글은 Riverpod 공식문서를 참조하였습니다. 이전 글에서 우리는 Riverpod를 설치하고 간단하게 사용해 보았습니다. 프로바이더는 Riverpod에서 가장 중요한 부분 입니다. 이제 "Provider"에 대해 알아보도록 하겠습니다. 프로바이더는 하나의 상태조각의 압축된 객체이자 상태의 변화를 감시하는 역할을 합니다. 왜 프로바이더를 사용하나요? 상태를 프로바이더로 감싸게 되면 아래의 서술된 내용들이 가능합니다. 코드상 다양한 위치에서 상태를 쉽게 접근할 수 있습니다. 프로바이더는 Singletons, Service Locators, Dependency Injection 또는 InheritedWidgets 과 같은 디자인 패턴들을 완벽하게 대체할 수 있습니다. 다른 프로바이더 상태와 간편하게 결합..

Flutter/Riverpod

Flutter) Riverpod 상태관리 시작해보기 - 1

이 글은 Riverpod 공식문서를 참조하여 작성했습니다. Riverpod 설치하기 Riverpod에는 여러종류에 패키지가 있습니다. 패키지마다 사용 목적이 있으며, 만드는 앱의 형태에 맞게 설치하시면 됩니다. 기본적으로 flutter_riverpod 패키지를 사용합니다. 1. 패키지 추가 pubspec.yaml에 사용하고자 하는 패키지를 추가 해줍니다. 버전은 https://pub.dev/packages/flutter_riverpod/install 에서 확인해 줍니다. 작성기준 버전은 2.1.3 입니다. -pubspec.yaml 파일에 패키지를 추가합니다. dependencies: flutter: sdk: flutter flutter_riverpod: ^2.1.3 그리고 Pub get 을 합니다. 이걸..

주톨
'Flutter/Riverpod' 카테고리의 글 목록