Flutter의 스택 상태 관리

몇 달 전 나는 그와 그의 팀이 상태 관리에 MVVM 접근 방식을 사용하는 상태 관리 시스템에 대한 YouTube 비디오를 보았고 그것을 시도하기로 결정했습니다. 이제 나는 Flutter 블록 배경에서 왔기 때문에 상용구 코드와 설정이 적은 무언가가 필요했다고 말해야 합니다. 그리고 나는 i가 완전히 감명받았다라고 말해야 한다! 스택 패키지 리뷰나 기본 인트로로 받아도 되지만 둘 다 좋습니다!!

이제 다음 명령을 실행하여 새로운 Flutter 프로젝트를 생성해 보겠습니다.

flutter create flutter_stacked

그러면 새로운 Flutter 프로젝트가 프로비저닝됩니다. 그런 다음 pub.dev에서 스택 패키지를 설치합니다. 작성 당시 현재 버전은 2.3.9이지만 최신 버전here을 볼 수 있습니다. 개인적으로 나는 아래 명령을 사용하여 패키지를 설치하는 것을 좋아합니다.

flutter pub add *package name*

이렇게 하면 프로젝트에 최신 호환 버전이 설치됩니다. 완료되면 모든 새로운 Flutter 앱과 함께 제공되는 악명 높은 기본 카운터 앱을 얻게 됩니다. 우리는 동일한 카운터 앱을 수행하지만 스택 패키지를 사용합니다. 따라서 기본 코드를 제거하고 상태 비저장 CounterApp 위젯을 생성하여 시작하겠습니다. 우리는 이것으로 남을 것입니다

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const CounterApp(),
    );
  }
}

class CounterApp extends StatelessWidget {
  const CounterApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold();
  }
}

이것은 우리에게 하얀 화면을 줄 것입니다. 엄청난! 따라서 가장 먼저 할 일은 뷰모델을 만드는 것입니다. viewmodel은 모든 상태 및 상태 수정이 저장되는 클래스입니다. 따라서 RAM을 사용하고 상태 저장 위젯을 사용하는 대신 위젯에 해당하는 뷰모델을 생성하기만 하면 됩니다. 프로덕션 앱에서 기능에 대한 폴더를 생성한 다음 viewmodel 폴더와 view 폴더를 생성할 수 있지만 main.dart 파일에서 모든 작업을 수행합니다. 따라서 뷰모델을 생성하는 것은 다음과 같습니다.

import 'package:stacked/stacked.dart';

class CounterViewModel extends BaseViewModel {
    int counter = 0;
}

뷰모델은 BaseViewModel을 확장하고(다른 목적을 위한 다른 유형의 뷰모델이 있으며 패키지 문서를 확인할 수 있음) 카운터 속성을 초기화하고 0으로 설정합니다. 다음 단계는 뷰모델을 CounterApp에 연결하는 것입니다. 위젯. 이 작업을 수행하는 몇 가지 방법이 있지만 내가 가장 좋아하는 방법은 다음과 같습니다....

class CounterApp extends StatelessWidget {
  const CounterApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ViewModelBuilder<CounterViewModel>.reactive(
      viewModelBuilder: () => CounterViewModel(),
      builder: (context, CounterViewModel viewModel, child) {
        return const Scaffold();
      }
    );
  }
}

따라서 첫 번째 단계는 상태 변경 시 위젯을 다시 빌드하는 작업을 처리하는 viewmodelBuilder.reactive 위젯 생성자로 스캐폴드를 래핑하는 것입니다. 여기에는 viewModel을 반환하는 함수를 반환하는 viewModelBuilder 속성과 컨텍스트, viemodel의 인스턴스 및 세 번째 하위 매개 변수를 사용하는 빌더 함수가 있습니다.
다음 단계는 카운터 변수를 표시하는 텍스트 위젯 자식이 있는 중앙 위젯을 만드는 것입니다.

  @override
  Widget build(BuildContext context) {
    return ViewModelBuilder<CounterViewModel>.reactive(
        viewModelBuilder: () => CounterViewModel(),
        builder: (context, CounterViewModel viewModel, child) {
          return Scaffold(
            body: Center(
              child: Text(viewModel.counter.toString()),
            ),
          );
        });
  }

viewmodel 인스턴스는 카운터 변수를 노출하고 텍스트 위젯에 표시합니다. 다음 단계는 클릭하는 동안 카운터를 증가시키는 부동 작업 버튼을 만드는 것입니다.

return Scaffold(
   floatingActionButton: FloatingActionButton(
                onPressed: () => viewModel.incrementCounter(),
                child: const Icon(Icons.add)),
        body: Center(
          child: Text(viewModel.counter.toString()),
   ),
);

부동 작업 버튼은 CounterViewModel에서 아직 만들지 않은 incrementCounter 함수를 호출합니다. 이제 만들어 보겠습니다.

class CounterViewModel extends BaseViewModel {
  int counter = 0;

  void incrementCounter() {
    counter++;
    notifyListeners();
  }
}

우리가 볼 수 있듯이 incrementCounter 함수는 카운터 변수를 증가시키고 notifyListeners()를 호출합니다. 이는 공급자 패키지를 사용하는 개발자에게 친숙해 보일 것입니다. 이 버튼을 클릭하면 카운터 변수가 증가하고 위젯에서 다시 빌드됩니다. 전체 코드는 다음과 같습니다.

import 'package:flutter/material.dart';
import 'package:stacked/stacked.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const CounterApp(),
    );
  }
}

class CounterApp extends StatelessWidget {
  const CounterApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ViewModelBuilder<CounterViewModel>.reactive(
        viewModelBuilder: () => CounterViewModel(),
        builder: (context, CounterViewModel viewModel, child) {
          return Scaffold(
            floatingActionButton: FloatingActionButton(
                onPressed: () => viewModel.incrementCounter(),
                child: const Icon(Icons.add)),
            body: Center(
              child: Text(viewModel.counter.toString()),
            ),
          );
        });
  }
}

class CounterViewModel extends BaseViewModel {
  int counter = 0;

  void incrementCounter() {
    counter++;
    notifyListeners();
  }
}

우리는 코드를 줄이고 상용구 코드를 제거했을 뿐만 아니라 매우 간단하고 이해하기 쉬운 상태 관리 플랫폼을 갖게 되었습니다. 스택 패키지는 능동적으로 유지 관리되며 정기적으로 업데이트됩니다. 사용 사례에 맞는 함수와 클래스가 너무 많아 확인할 수 있습니다here. 나는 어떤 식으로든 그들과 관련이 없지만 모든 경험 수준의 Flutter 개발자에게 강력히 추천합니다. 건배와 행복한 코딩!