Flutter 앱 설계를위한 초보자 가이드

FilledStacks의 "stacked"패키지 사용 방법

초보자는 따라야 할 간단한 모델이 필요합니다.

이 기사를 다시 읽고 있다면 하단 요약 섹션으로 스크롤 하십시오.

Flutter는 원하는 것을 할 수있는 많은 자유를 제공합니다. 하지만 때로는 그 자유가 결점이 될 수 있습니다. 이는 상태 관리 및 앱 아키텍처의 경우 확실히 사실입니다.

저는 앱 아키텍처에 대해 Flutter 커뮤니티를 교육하는 작업에 대해 FilledStacks (Dane Mackier)와 Reso Coder (Matt Rešetár) 의 팬입니다 . FilledStacks는 특히 초보자가 액세스 할 수있는 구조화 앱 모델을 설계했습니다. 하지만 튜토리얼은 긴 편이되는 경향이 있으며 아키텍처도 시간이 지남에 따라 발전했습니다. 이로 인해 새로 온 사람이 무슨 일이 일어나고 있는지 이해하기가 다소 어렵습니다.

이 기사의 목표는 앱을 설계하는 방법에 대한 높은 수준의 이해를 제공하고 FilledStacks 의 스택 패키지 를 사용하여이를 수행하기위한 매우 실용적인 지침을 제공하는 것입니다 .

아키텍처 개요

FilledStacks는 MVVM 스타일 아키텍처 사용을 제안합니다 . 보기는 일반적으로 앱의 한 화면에 대한 위젯 레이아웃입니다. 하지만 논리 나 상태는 포함되어 있지 않습니다. 이는 View에 대한 특정 세부 정보를 알지 못하는 View Model에 포함되어 있습니다. 대부분의 앱은 데이터를 저장하고 액세스해야하며 이는 서비스에 의해 처리됩니다. 서비스는 세부 정보를 추상화하는 Dart 클래스 일 뿐이므로보기 모델이 어떻게 수행되는지에 대해 걱정할 필요가 없습니다.

앱의 모든 화면에 대해 새로운보기 모델을 만듭니다. 그러나 서비스는 전 세계적으로 액세스 할 수 있으므로 동일하게 유지됩니다. 다중 화면 앱은 다음과 같이 구성됩니다.

실제로 파일은 다음과 같이 구성 될 수 있습니다.

하지만 다른 조직을 자유롭게 사용할 수 있습니다. FilledStacks는 core폴더에 뷰 모델을 넣는 것을 좋아 합니다 (적어도 원래 튜토리얼에서는). 나는 그것들을 사용하는 뷰에 가깝게 유지하는 것을 선호한다고 생각하지만 일반적으로 내가 만드는 모든 새로운 앱에 대해 마음을 바꿉니다. 이에 대한 더 많은 생각을 위해이 기사 를 읽으십시오 . 나중에 필요할 때 변경할 수 있습니다. 파일을 이동하고 가져 오기 경로를 변경하기 만하면됩니다.

이제 위의 아키텍처를 구현하기위한 쉬운 예제를 살펴 보겠습니다. 뷰를 만드는 방법과 관련된 뷰 모델을 보여 드리겠습니다.

예제를 읽는 것보다 실제로 직접 예제를 통해 작업하는 것이 좋습니다. 이것은 개념을 더 잘 이해하는 데 도움이 될 것입니다.

시작하기

새 프로젝트를 시작하십시오. 원하는대로 부르세요. 공급자 아키텍처 패키지와 함께 MVVM 스타일 아키텍처를 사용하기 시작하도록 수정할 기본 카운터 앱이 제공됩니다.

에서 pubspec.yaml , 추가 스택 패키지를 :

dependencies:
  stacked: ^1.6.0

이 예에서는 위에서 보여준 전체 폴더 구조를 만들지 않을 것이지만 원하는 경우 할 수 있습니다.

모델보기

에서 lib/폴더라는 새로운 파일을 생성 counter_viewmodel.dart을 . 그런 다음 다음 코드를 붙여 넣습니다.

클래스는 extends ChangeNotifier를 통해 notifyListeners()메서드 를 제공합니다 . 뷰는 리스너가 될 것이므로이 메서드는 변경 사항이있을 때마다 Stacked 패키지가 UI를 다시 빌드하는 데 사용하는 것입니다. ChangeNotifierFlutter의 일부 foundation이므로 뷰 모델 의 stacked또는 provider패키지 에 실제로 종속성이 없습니다 .

전망

counter_screen.dartlib/ 폴더에 새 파일을 만듭니다 . 카운터 화면의 UI 위젯 레이아웃입니다.

다음 코드를 붙여 넣으십시오.

build()방법 의 상단에서 ViewModelBuilder. 이것은 CounterViewModel위젯 트리에 제공하는 것입니다. 상태가 뷰 모델에 있기 때문에 StatefulWidget. 따라서 당신은 볼 수 CounterScreen입니다 StatelessWidget. counter뷰 모델에서 값을 가져옵니다 . 버튼을 누르면 increment()뷰 모델 이 호출 되고 새 counter값으로 다시 빌드가 트리거됩니다 .

우리는 여전히 main.dart 를 정리해야 합니다 . 다음 코드로 바꿉니다.

지금 앱을 실행하면 기본 카운터 앱과 똑같이 작동해야합니다.

버튼을 누르면 예상대로 카운터가 증가합니다.

공급자 아키텍처 패키지의 이점

지금까지 a 및 a를 사용하여 일반 오래된 Provider 패키지로 모든 작업을 수행 할 수있었습니다 . 그러나 일반적인 요구 사항은 네트워크 또는 데이터베이스에서 일부 초기 데이터를 가져 오는 것입니다. 뷰 모델은 이러한 초기화 작업을 수행하는 메서드를 노출 할 수 있습니다.ChangeNotifierProviderConsumer

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

이제 웹 API 서비스에서 일부 초기 데이터를 가져 오는 방법이 있음을 알 수 있습니다. 여기서 서비스를 만드는 것에 대해 이야기하지 않을 것이므로 하단에 가짜 코드를 포함했습니다. 이 문서 에서 실제 서비스를 만드는 방법에 대해 자세히 알아볼 수 있습니다 .

Flutter 앱에서 작업을 수행 할 서비스 만들기

Stacked 패키지의 마법은 뷰 모델이 준비되었을 때 일부 초기화 코드를 실행할 수 ViewModelBuilder있는 onModelReady콜백이 있다는 것입니다.

에서 counter_screen.dart , 다음과 같은 주장을하는 추가 ViewModelBuilder:

onModelReady: (model) => model.loadData(),

요약

다음은 새 프로젝트에서 설정하는 방법에 대한 간단한 알림이 필요한 경우에 대한 치트 시트입니다.

의존

스택 패키지 종속성을 pubspect.yaml에 추가합니다 .

dependencies:
  stacked: ^1.6.0

라는 새 파일 my_screen_viewmodel.dart을 만들고 다음을 확장하는 Dart 클래스를 추가합니다 ChangeNotifier.

import 'package:flutter/foundation.dart';
class MyScreenViewModel extends ChangeNotifier {
  int _someValue = 0;
  int get someValue => _someValue;
Future loadData() async {
    // do initialization...
    notifyListeners();
  }
void doSomething() {
    // do something...
    notifyListeners();
  }
}

라는 새 파일 my_screen.dart을 만들고 해당 화면에 대한 일반 위젯 레이아웃을 만듭니다 .

위젯 트리 ViewModelBuilder상단에를 추가하십시오 MyScreen. 가장 쉬운 방법은 바로 가기를 사용하여 상단 위젯을 새 위젯으로 감싸는 것입니다. 하지만를 child사용 하는 대신 매개 변수 =>에서 최상위 위젯을 반환하는 데 사용 합니다 builder.

import 'package:stacked/stacked.dart';
class MyScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ViewModelBuilder<MyScreenViewModel>.reactive(
      viewModelBuilder: () => MyScreenViewModel(),
      onModelReady: (model) => model.loadData(),
      builder: (context, model, child) => MyTopWidget(
          
        // your widget tree
),
    );
  }
}
  • model.someValue
  • model.doSomething()

Stacked 패키지를 계속 사용할 때 직면하게 될 다른 요구 사항이 있습니다. 문서 에서 다른 옵션에 대해 읽을 수 있습니다 . 위의 설명은 시작하기에 충분할 것입니다.

체크 아웃 할 수있는 몇 가지 옵션이 더 있습니다. 나는 그것들이 스택 아키텍처보다 더 복잡하다는 것을 발견했지만 여전히 추가 할 좋은 것이 있습니다.

최신 정보

Flutter에 대한 경험이 커지면서 몇 가지 다른 상태 관리 옵션을 시도했습니다. 제가 지금 실험하고있는 것은 Riverpod입니다. 여기에 초보자를위한 기사를 작성했습니다.

Flutter Riverpod 튜토리얼 : 카운터 앱

기본적으로이 기사에서 설명한 것과 동일한 솔루션입니다. 주된 차이점은 상태 ChangeNotifier가 변경 가능한 데이터 인 a 대신 변경 불가능한 데이터를 사용한다는 것 입니다. 지금까지 저는 Riverpod를 좋아합니다.

Suggested posts

좋은 습관을 만들고 유지하는 방법

장기적인 습관을 유지하기위한 생산성 팁

좋은 습관을 만들고 유지하는 방법

두 아이의 엄마가 된 후 일을 끝내기가 더 어려워졌습니다. 나는 한 작업에서 다음 작업으로 뛰어 들었고 하루가 끝날 때까지 아무것도하지 않았을 때 실망했습니다.

양자 컴퓨팅 Pt를위한 프로그래밍. 1 : NumPy

이제 양자 컴퓨팅이면의 물리학을 배우기 시작 했으므로 "이봐, 실제로 양자 컴퓨터를 사용하려면 실제로 양자 장치를 손으로 만들어야합니까?"라고 궁금해 할 것입니다. 답은 양자 컴퓨터를 컴퓨터라고 부르는 이유가 있습니다. 프로그래밍이 가능합니다! 이 시리즈에서는 수학 개념을 시뮬레이션하고 양자 컴퓨터에서 실행하는 소프트웨어를 구축하는 방법을 배우게됩니다. 깨끗하고 현대적이며 라이브러리가 풍부한 언어이기 때문에 Python을 사용하여 코드를 작성할 것입니다.

Related posts

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

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

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

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

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

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

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

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

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

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

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

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

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