Flutter Riverpod 튜토리얼 : 카운터 앱

첫 번째 Riverpod 프로젝트를 설정하는 데 도움이되는 단계별 지침

Riverpod

모든 사람들이 다른 것을 추천하기 때문에 Flutter에 대한 상태 관리 솔루션을 선택하기가 어렵습니다. 사실, 상태 관리 옵션을 작동하도록 만들 수 있습니다. 나는 Riverpod가 최고라고 주장하기 위해 여기에 온 것이 아니지만 당신은 여기에 있으므로 최소한 Riverpod에 관심이 있어야합니다. 제 목표는 당신이 시작하고 실행하는 것을 돕는 것입니다.

Riverpod와 Provider는 구문이 무거워서 배우기가 어렵습니다. 이 튜토리얼은 독단적 인 입장을 취합니다. Riverpod를 사용할 수있는 모든 방법에 대해 설명하는 대신 Riverpod를 한 가지 방식으로 만 사용하는 방법을 알려줍니다.이 방법은 광범위한 사용 사례에서 반복 할 수 있습니다. Riverpod를 사용하는 방법을 마스터했다면 특정 사용 사례에 더 잘 어울리는 다른 옵션으로 나아갈 수 있습니다. 저는이 방법이 어디서부터 시작해야할지 모르는 초보자에게 가장 유익 할 것이라고 믿습니다.

카운터 앱은 자주 사용되는 예제이지만 이해할 수있을만큼 간단하지만 상태 관리의 일부 원칙을 보여줄만큼 충분히 복잡하기 때문에 유용합니다. Bloc Library 가 해당 라이브러리 사용 방법을 가르치기 위해 일련의 앱 빌드 튜토리얼을 사용하는 방식이 정말 마음에 듭니다 . 이 기사는 같은 맥락에서 처음입니다. 두 번째는 타이머 앱 입니다.

실제로 단계별로 수행하면이 자습서를 최대한 활용할 수 있습니다. 시작하자.

This tutorial is up to date for:
Flutter 1.22
  Dart 2.10
  hooks_riverpod 0.11.1

새 Flutter 프로젝트를 시작하고 이름을 my_counter_app으로 지정 합니다.

그런 다음 pubspec.yaml에 다음 두 가지 종속성을 추가합니다 .

dependencies:
  flutter_hooks: ^0.14.0
  hooks_riverpod: ^0.11.1

  • 이 튜토리얼이 그 의견을 보여주는 첫 번째 장소입니다. 다른 Riverpod 옵션 ( riverpodflutter_riverpod)이 있지만 hooks_riverpod멋진 구문과 가장 광범위한 옵션이 있으므로이 옵션을 사용할 것입니다.
  • flutter_hookshooks_riverpod내부적으로 사용하지만 내 보내지 않는 별도의 패키지입니다 . 나중에 사용할 것이므로 여기에도 추가해야합니다.

상태 관리의 목적은 UI에서 상태와 논리를 분리하여 프로젝트를보다 쉽게 ​​유지 관리 할 수 ​​있도록하는 것입니다. 새로운 Flutter 프로젝트를 생성 할 때 생성되는 카운터 앱에는 상태 및 로직이 모두 UI 위젯과 혼합되어 있습니다.

main.dart 를 다음 코드로 바꿉니다 .

참고 :

  • 이것은 Flutter가 생성 한 것과 거의 동일한 기본 카운터 앱이지만 모든 상태와 로직이 제거되었습니다.
  • MyHomeWidgetA는 StatelessWidget대신의이 StatefulWidget.
macOS에서 실행되는 카운터 앱

플로팅 작업 버튼의 onPressed콜백이 아무 작업도 하지 않기 때문에 아무 일도 일어나지 않습니다.

모델 클래스 추가

모델 클래스는 앱 일부의 상태를 나타냅니다. 이 경우 카운터의 상태를 나타냅니다. 이 상태를 사용하여 화면 중앙에 카운터의 현재 값을 표시합니다.

lib에 counter.dart 라는 새 파일을 만듭니다 .

다음 코드를 추가하십시오.

class CounterModel {
  const CounterModel(this.count);
  final int count;
}

  • 이 모델 객체는 정수에 대한 래퍼 일뿐입니다. 실제로 정수를 직접 사용할 수 있습니다. 이것이 공식 Riverpod Counter 앱 예제 가하는 일입니다. 그러나이 튜토리얼은 더 복잡한 상태의 앱을 포함하여 다양한 앱에서 따라야 할 패턴을 보여줍니다.
  • 그 주 count입니다 final. 이것은 불변 상태를 만들기위한 핵심입니다. 여기서도이 기사는 그 의견을 보여주고 있습니다. 불변의 상태는 좋은 것입니다. 이 기사 를 읽고 이유를 확인하십시오. 상태가 변경 될 때마다 완전히 새로운 CounterModel개체를 만듭니다. 추가 작업처럼 들릴 수 있지만 변경 가능한 상태의 내부 값을 변경하여 발생할 수있는 미묘한 오류를 방지합니다.
  • 또한 생성자는 const불변성을 강제하는 것 외에도 최적화 된 컴파일 시간 상수를 선언 할 수 있습니다.

CounterModel상태를 나타내는 클래스를 만들었습니다 . 이제 상태 를 관리 하기 위한 클래스 , 특히 현재 값을 저장하고 사용자가 + 버튼을 누를 때 증가 시키는 클래스가 필요 합니다.

counter.dart 상단에 다음 코드를 추가합니다 .

import 'package:hooks_riverpod/hooks_riverpod.dart';
class CounterNotifier extends StateNotifier<CounterModel> {
  CounterNotifier() : super(_initialValue);
static const _initialValue = CounterModel(0);
void increment() {
    state = CounterModel(state.count + 1);
  } 
}

  • 여기에서도이 기사는 불변성이 좋은 것이라는 의견을 계속 따르고 있습니다. A StateNotifier에는 state현재 상태를 보유 하는 단일 내부 변수 인 CounterModel. 의 값을 변경할 수 state있지만 CounterModel그 자체는 변경할 수 없습니다. 즉, CounterModel.count새 개체를 만들지 않고 변경할 수 없습니다 .
  • CounterModel에서은 StateNotifier<CounterModel>의 형태를 결정한다 state.
  • 생성자에 state초기 값을 전달하여을 초기화해야합니다 super. 위의 코드는 값으로 카운터를 초기화합니다 0.
  • 외부 클래스는 내부 값이의 마지막 인스턴스보다 하나 큰 의 새 인스턴스 increment로 바꾸기 위해 호출 할 수 있습니다 .stateCountModelcountCountModel
  • state변경 되면 StateNotifier청취중인 모든 객체에 알립니다.

앱에서 Riverpod를 사용하려면 전체 앱을 ProviderScope위젯 으로 래핑해야합니다 .

에서 main.dart 의 Riverpod 가져 오기를 추가 :

import 'package:hooks_riverpod/hooks_riverpod.dart';

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

컴파일러가 현재 불평하고 있음을 알 수 있습니다.

Evaluation of this constant expression throws an exception.

const MyApp({Key key}) : super(key: key);

글로벌 공급자 만들기

에서 main.dart 다음과 같은 최상위 변수를 추가 :

final provider = StateNotifierProvider((ref) => CounterNotifier());

import 'counter.dart';

  • provider은 전역 상수 이므로 어디에서나 액세스 할 수 있습니다 (Provider와 같은 빌드 컨텍스트가 필요하지 않음). 일반적으로 프로그래밍에서 전역 변수를 사용해서는 안된다고 들었습니다. 한 가지 이유는 코드베이스의 다른 부분이 변수를 변경할 수있을 때 미묘한 버그를 쉽게 얻을 수 있기 때문입니다. 이 전역 변수는 불변이므로 변경할 위험이 없습니다. 전역 변수 (및 상수)에주의해야하는 또 다른 이유는 종속성 문제를 만드는 것입니다. 사용되는 UI에 가깝게 유지하여 문제가되지 않도록합니다.
  • 다양한 종류의 제공자들이 많이 있습니다. StateNotifierProvider상태가 StateNotifier클래스 ( CounterNotifier) 에 있기 때문에를 사용하고 있습니다 . 이전과 마찬가지로이 기사는 불필요한 모든 제공 업체가 사용자를 혼란스럽게하지 않도록하기 위해 독자적인 방식으로 계속됩니다. 에 익숙해 StateNotifierProvider지면 다른 제공자 유형 중 일부를 조사 할 수 있습니다. 하지만 대부분은 필요하지 않을 것입니다.

MyHomePage현재 StatelessWidget. 변경 StatelessWidget에 대한 HookWidget그래서 같은 :

class MyHomePage extends HookWidget {
  // ...
}

import 'package:flutter_hooks/flutter_hooks.dart';

  • 이렇게하면 useProvider다음 단계에서 방법 을 사용할 수 있습니다 .

카운터 상태 값이 변경 될 때마다 해당 변경 사항을 반영하도록 UI를 다시 작성하려고합니다. 그러기 위해서는 변화에 귀를 기울여야합니다.

( 문 바로 앞)의 build메서드 내부에 다음 줄을 추가합니다 .MyHomePagereturn

final counterModel = useProvider(provider.state);

  • useProvider메서드 provider.state는의 현재 인스턴스 인의 변경 사항을 수신합니다 CounterModel.
  • 이것은 또한에 state저장 하고있는에 대한 참조를 제공합니다 counterModel.

새로운 상태 표시

Text카운터 값에 대한 위젯은 현재 단지 문자열 리터럴을 사용하고 '0'지금 그대로 분명 지금까지 업데이트되지 않도록. 해당 Text위젯을 다음 위젯으로 바꿉니다 .

Text(
  '${counterModel.count}',
  style: Theme.of(context).textTheme.headline4,
),

  • counterModel.count상태의 현재 정수 값을 포함 하므로 빌드 메서드가 호출되면 UI에 새 값이 표시됩니다.

상태 업데이트

사용자가 + 버튼을 누르면 상태 관리 클래스 ( CounterNotifier) 에서 increment 메소드를 호출하려고합니다 .

에서 main.dart 의 교체 onPressed에서 매개 변수를 FloatingActionButton다음과 :

onPressed: () {
  context.read(provider).increment();
},

  • Riverpod를 사용하고 있으므로 BuildContext( context)에 read메서드가 있습니다. 이 read메서드는 전체 앱을 래핑 한 위젯 인 에서 provider( StateNotifierProvider제공하는 CounterNotifier)을 찾습니다 ProviderScope.
  • 달리 useProviderread방법은 당신은 당신의 상태 관리 클래스 (에 대한 참조를 가져옵니다 CounterNotifier상태의 변화를 듣고없이). 이것이 중요한 이유는 리스닝으로 CounterNotifier인해 build상태가 변경 될 때마다 메서드가 다시 실행되기 때문입니다. 플로팅 작업 버튼은 어떤 식 으로든 시각적으로 변경되지 않으므로 다시 빌드하는 것은 낭비입니다. 즉, 현재 build방법은 이미 useProvider. 즉,이 build메서드의 모든 위젯 (플로팅 작업 버튼 포함)이 어쨌든 다시 빌드됩니다. 다음 단계에서 수정합니다.

현재 MyHomePage위젯은 다음과 같습니다.

모든 것이 단일 build메서드 안에 있으므로 상태가 변경 될 때마다 모두 다시 빌드됩니다. 그러나 실제로 다시 빌드해야하는 유일한 것은 단일 Text위젯입니다. 즉, 해당 Text위젯을 자체 위젯으로 추출 할 수 있습니다 .

다음 과 같이 main.dart 하단에 새 위젯을 만듭니다 .

참고 :

  • 이 위젯은 확장 HookWidget하고 사용 useProvider하여 상태 변경을 수신하고에 대한 참조를 가져옵니다 CounterModel.
  • print위젯의 build메서드가 호출 될 때마다 볼 수 있도록 문을 추가했습니다 .

참고 :

  • 이 위젯은 더 이상 상태 변경을 수신 할 필요가 없으므로을 호출하지 않습니다 useProvider. 즉, StatelessWidget대신 일반을 사용할 수 있습니다 HookWidget.
  • CounterTextWidget이전 Text위젯을 대체합니다 .
  • 사용은 context.read여전히 당신이에 대한 참조를 얻을 수 CounterNotifier클래스의 increment방법을하지만 상태 변경을 수신하지 않습니다. 이제 재 구축을 트리거하는 build방법에는 아무것도 없습니다 MyHomePage.
  • printbuild메서드는 처음에 한 번만 호출되고 카운터 상태가 변경 될 때 호출되지 않음 을 알 수 있도록 문을 추가했습니다 .

핫 다시 시작 또는 전체 다시 시작 (단지 핫 다시로드 아님)을 수행 한 다음 + 버튼을 몇 번 누릅니다.

디버그 콘솔은 print 문의 결과를 보여줍니다.

flutter: building MyHomePage
flutter: building CounterTextWidget
flutter: building CounterTextWidget
flutter: building CounterTextWidget
flutter: building CounterTextWidget
flutter: building CounterTextWidget
flutter: building CounterTextWidget
flutter: building CounterTextWidget

이것으로이 튜토리얼을 마쳤습니다. 여기 에서 전체 소스 코드를 찾을 수 있습니다 .

추가 참고 사항

  • 당신은 가변성을 신경 쓰지 않으면 사용할 수 있습니다 ChangeNotifier대신 StateNotifier. 이 경우 사용에 ChangeNotifierProvider대신 StateNotifierProvider.
  • flutter_hooks패키지를 사용하면 TextEditingController또는 같은 컨트롤러가 필요할 때 위젯을 단순화 할 수도 있습니다 AnimationController. 그러나 그것을 사용하지 flutter_hooks않더라도 여전히 useProvider방법을 제공합니다 . 그렇지 않으면 더 자세한 Consumer위젯 을 사용해야합니다 .

이 튜토리얼이 도움이 되었다면 다음 시리즈에서 계속해서 기술을 쌓을 수 있습니다.

Flutter Riverpod 튜토리얼 : 타이머 앱
https://www.twitter.com/FlutterComm

Suggested posts

N + 1 문제 선택

모든 것은 비용이 있습니다.

N + 1 문제 선택

개발자의 경우 ORM (Object-relational mapping)을 사용하면 삶을 상당히 단순화 할 수 있지만 알아야 할 자체 캐치 세트가 있습니다. 더 심각한 문제 중 하나는 Select N + 1 문제입니다.

Vue 3 및 JavaScript로 날씨 앱 만들기

Vue 3 및 JavaScript로 날씨 앱 만들기

Vue 3는 프런트 엔드 앱을 만들 수있는 사용하기 쉬운 Vue JavaScript 프레임 워크의 최신 버전입니다. 이 기사에서는 Vue 3 및 JavaScript로 날씨 앱을 만드는 방법을 살펴 보겠습니다.

Related posts

"실용적인 프로그래머"의 5 가지 필수 사항

역대 베스트셀러 코딩 북의 요점

"실용적인 프로그래머"의 5 가지 필수 사항

Pragmatic Programmer는 1999 년에 처음 출판되었으며 이후 역대 최고의 프로그래밍 책으로 선정되었습니다. 저자 Andy Hunt와 David Thomas는 Agile Manifesto의 원저자 중 하나였으며 몇 가지 심각한 자격을 가지고 있습니다.

대규모 GraphQL 쿼리 공격으로부터 보호

공격자가 공개적으로 사용 가능한 GraphQL 인터페이스를 사용하여 사이트를 스크랩하거나 서비스 거부 공격을 실행하는 방법에 대해 알아보십시오. 이들은 4 가지 방법 중 하나로이를 수행 할 수 있습니다. 단일 대형 쿼리를 신중하게 구성하여 실행하고, 관련 데이터를 가져올 수있는 병렬 쿼리를 많이 작성하고, 일괄 요청을 사용하여 많은 쿼리를 연속적으로 실행하고, 마지막으로 많은 요청을 보냅니다.

기술 인터뷰의 사회적 구성 요소

코딩 문제는 스트레스가 많지만 스트레스에 대한 당신의 반응은 당신의 기술적 능력보다 더 크게 말합니다.

기술 인터뷰의 사회적 구성 요소

기술 업계의 직책을 위해 인터뷰 할 때 일반적으로 제안을 고려하기 전에 최소한 3 차례의 인터뷰를 거치게됩니다. 라운드는 일반적으로 다음과 같습니다. 그렇게 생각하면 잘못된 것입니다.

훌륭한 개발자의 3 가지 행동 특성

훌륭한 개발자의 3 가지 행동 특성

훌륭한 개발자를 만드는 비 기술적 인 것들 나는이 기사를 작성하는 것을 한동안 미루고 있습니다. 나는 그것을 작성할 자격이 있다고 생각하지 못했습니다. 오늘은 쓸 때라고 생각했습니다.