[Flutter] 리버포드 블러셔 패치.

29918 단어 FlutterDartRiverpodtech

배경.


Riverpod를 상태 관리 플러그인으로 사용합니다.거의 쓸 수 있을 뻔했는데 (나이가 들어서인지 아니면 원래 기억력이 없어서) 세부 사항이 기억이 안 나요.그래서 이번 리버포드와 관련된 일람표를 만들고 싶습니다.테스트의 실현으로 Riverpod의 각 Provider에서 Fluter 템플릿의 상향 계수 응용을 실현하였다.간단하지만 참고할 만하다고 생각해요.각 Provider의 마지막 원본 파일에서 비행할 수 있습니다.
아는 사람을 위한 싸구려 티켓이기 때문에 더 자세한 설명을'책'으로 내놓고 싶다.

구현 환경


Riverpod에 파괴적인 변경이 발생했습니다. 발견되면 연락 주세요.대체로 주의하다
(추기)2021/11/05, 1.0.0 나왔습니다!나는 그것에 근거하여 수정했다.
flutter_riverpod: ^1.0.0
[√] Flutter (Channel stable, 2.5.3, on Microsoft Windows [Version 10.0.19043.1288], locale ja-JP)
[√] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[√] Android Studio (version 2020.3)

미리 준비하다


flutter pub add flutter_riverpod
main.dart
import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() {
-  runApp(const MyApp());
+  runApp(ProviderScope(child: const MyApp()));
}

Provider


Provider 상수

  • 정의
    • Provider<String> _provider =
    Provider((ref) => 'You have pushed the button this many times:');
Provider<String> _provider =
    Provider((ref) => ref.watch(anotherProider).state * 2);
  • 표시 
    • ref.watch(_provider)

  • 수정
    할 수 없다

  • 사용 용도
    상수에 쓰다.또한 다른 Provider의 값을 받아서 값을 표시할 수도 있습니다.
    • 출처

    State Provider 변수

  • 정의
    • StateProvider<int> _stateProvider = StateProvider((ref) => 0);
  • 표시 
    • ref.watch(_stateProvider)
  • 변경 사항
    뭘 써야 되지? 
    • ref.read(_stateProvider.state).state++;
ref.read(_stateProvider.state).state = ref.read(_stateProvider) + 1;
ref.read(_stateProvider.state).update((state) => state + 1);

ref.read(_stateProvider.notifier).state++;
ref.read(_stateProvider.notifier).state = ref.read(_stateProvider) + 1;
ref.read(_stateProvider.notifier).update((state) => state + 1);
  • 용도
    riverpod의 Provider에서 기본입니다.int 관리 클래스 등의 값입니다.
    • 출처

    StateNotifier 변수 + 메서드

  • 정의
    • class CounterNotifier extends StateNotifier<int> {
  CounterNotifier() : super(0);

  void countUp() {
    state++;
  }
}
final _provider =
    StateNotifierProvider<CounterNotifier, int>((ref) => CounterNotifier());
  • 표시 
    • Text(
  '${ref.watch(_provider)}',
  style: Theme.of(context).textTheme.headline4,
),
  • 변경
    • ref.watch(_provider.notifier).countUp(),
  • 용도
    방법이 있기 때문에 MVM 모델처럼 사용하는 방법이 있습니다.(개인적으로는 VM이 하나의 학급으로 독립하는 것이 좋다)
    • 출처

    ChangeNotifierProvider

  • 정의
    • class Counter extends ChangeNotifier {
  int _counter = 0;
  get counter => _counter;

  void countUp() {
    _counter++;
    notifyListeners();
  }
}

final _provider = ChangeNotifierProvider((ref) => Counter());
  • 표시 
    • ref.watch(_provider).counter
  • 변경
    • ref.watch(_provider).countUp()
  • 용도
    ChangeNotifier 좋아하시는 분?개인적으로는 notify Listeners()를 쓰는 것을 잊어버려서 잘 못한다.
    • 출처

    FutureProvier Future 사용

  • 정의
    • final _provider = FutureProvider<int>((ref) async {
  final prefs = await SharedPreferences.getInstance();
  return prefs.getInt(KEY) ?? 0;
});
  • 표시
    Widget 반환
    • ref.watch(_provider).when(
      data: (data) => Text(
        '${ref.watch(_provider).value}',
        style: Theme.of(context).textTheme.headline4,
      ),
      loading: () => const CircularProgressIndicator(),
      error: (error, stack) => Text('error'),
),
  • 변경
    • onPressed: () async {
  final prefs = await SharedPreferences.getInstance();
  int currentValue = prefs.getInt(KEY) ?? 0;
  prefs.setInt(KEY, currentValue + 1);
  ref.refresh(_provider);
},
  • 용도
    퓨처형을 사용하기 때문에 Shared Preferences뿐만 아니라 웹API와 파일 읽기 등을 사용하는 경우도 많다.
    • 출처

    StreamProvider Stream 사용

  • 정의
    • StreamController<int> streamController = StreamController();

final _provider = StreamProvider<int>((ref) {
  if (streamController.hasListener) {
    streamController = StreamController();
  }
  return streamController.stream;
});
  • 표시
    Widget 반환
    • ref.watch(_provider).when(
data: (data) => Text(
'${ref.watch(_provider).value}',
style: Theme.of(context).textTheme.headline4,
),
loading: () => const CircularProgressIndicator(),
error: (error, stack) => Text('${error}'),
),
  • 변경
    • onPressed: () { 
  count++; 
  streamController.sink.add(count); 
},
  • 용도
    나는 Firestore에서 snaptshots를 사용하는 경우가 가장 쓸 수 있다고 생각한다.
    • 출처

    표시된 Widget


    Consumer


    일반적인 Widget은 무릎 위 (이 경우 Text) 로 둘러싸인 Widget에 접근할 수 있습니다.Stateless Widget 또는 Stateful Widget의 Widget에서riverpod를 사용하고 싶을 때 사용합니다.
        Consumer( 
      builder: (context, ref, child) => Text( 
	'${ref.watch(_stateProvider).state}', 
	style: Theme.of(context).textTheme.headline4, 
      ), 
    )
    출처

    ConsumerWidget


    StatelessWidget의 riverpod 버전입니다.riverpod를 전면적으로 사용하기 때문에 모든 Widget을 Consuumer로 둘러싸는 것이 어려운 상황에서 사용합니다.또는 riverpod 전용 Widget을 만드는 데 사용됩니다.
    class MyHomePage extends ConsumerWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
  	return Text(ref.watch(_provider));
  }
}
    출처

    하면, 만약, 만약...


    트위터에 잔소리를 하거나 블로그에 링크를 붙일 수 있다면 정말 기쁠 거예요!그리고 잘못된 지적과 사용용도에 대한 생각이 있으면 댓글로 남겨주세요!

    더 자세히 공부하기 위해서.


    부정행위 신청서를 전제로 하기 때문에 꼴찌 시 상태 관리 대상을 int로 한다.어떤 사람들은 데이터 클래스를 대상으로 웹API와Firestore에서 얻은 데이터를 리버포드로 처리하려고 한다.이 경우 다음 Udemy 워크숍을 사용하십시오.Riverpod의 기초부터 MVM모델의 응용까지 물론 웹API와Firestore에서 나온 데이터도 처리한다.꼭 들어주세요.
    쿠폰 코드도 있으니 사용하세요.
    Flutter x Riverpod x MVM으로 구현된 간단한 디자인
    https://zenn.dev/sakusin/articles/a00aa8af321f54
    코드캠프 9일차.
    Lua의 간단한 오류 처리 실례

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage