Flutter 프로젝트를 구성하는 방법

단순한 Hello World 또는 TODO 앱 이외의 프로그램이나 앱을 작성하려고 할 때 대부분의 초보자가 직면하는 일반적인 문제는 개발 및 발전의 용이성을 수용하기 위해 다른 코드를 적절하게 구성하는 방법입니다.

프로젝트를 적절하게 구성하는 방법을 설계할 때 작용하는 또 다른 요소는 사용하는 아키텍처 스타일입니다. 블록 또는 공급자를 사용하여 빌드된 애플리케이션은 프로젝트 구조가 다른 경향이 있습니다.

모두에게 맞는 하나의 크기는 없지만 내가 찾은 가장 좋은 접근 방식은 다양한 공통 프로젝트 구조를 샘플링하고 필요에 가장 적합한 구조로 발전시키는 것입니다.

Flutter 프로젝트를 구성하는 방법

이 기사에서는 Flutter 애플리케이션을 구성하는 방법을 다룰 것입니다.


프로젝트 구조는 서로 다른 종류의 파일을 포함하는 4개의 주요 하위 폴더로 구성됩니다.

모델

조회수

서비스

명령

추가 폴더에는 페이지와 화면 간에 공유되는 단추, 토스트와 같은 위젯인 구성 요소가 포함된 구성 요소가 포함됩니다.

모델

Models 폴더에는 자체 다트 파일에 각각의 애플리케이션 모델이 포함되어 있습니다. 일부 모델은 ChangeNotifier를 확장하고 사용자가 로그인하면 화면에 사용자 이름을 추가하는 것과 같이 변경 사항을 앱 아래로 전파하는 데 사용됩니다. 사용자 모델의 예 아래에 나와 있습니다.

class User {
  String? id;
  String? firstname;
  String? lastname;
  String? mobile;
  String? email;

  User(
      {this.id,
      this.firstname,
      this.lastname,
     });
  User.fromJson(Map<String, dynamic> json)
      : id = json["id"],
        firstname = json["firstname"],
        email = json["email"],
        mobile = json["phone"],
        lastname = json["lastname"],

앱 상태가 변경될 때 애플리케이션의 다양한 수신기에 변경 알림을 제공하기 위해 다른 공급자와 함께 사용되는 앱 모델 클래스도 생성됩니다.

class AppModel extends ChangeNotifier {
  String? _accessToken;
  bool _isFreshInstall = true;
  User? _user;

  String? get accessToken => _accessToken;
  bool get isFreshInstall => _isFreshInstall;
  User? get user => _user;

  set setUser(User user) {
    _user = user;
    notifyListeners();
  }

  set isFreshInstall(bool fresh) {
    _isFreshInstall = fresh;
    notifyListeners();
  }

  set accessToken(String? token) {
    _accessToken = token;
    notifyListeners();
  }

  @override
  void notifyListeners() {
    super.notifyListeners();
  }
}

견해

보기에는 애플리케이션의 다양한 페이지 또는 화면이 포함됩니다. 보기에는 관련 보기가 함께 포함된 하위 폴더도 포함될 수 있습니다.

서비스

세 번째 폴더는 API를 호출하거나 HTTP 또는 백그라운드 위치 서비스와 같은 외부 네트워크와 상호 작용하는 파일을 포함하는 Services입니다. 이 폴더의 파일은 요청 생성과 엄격하게 관련됩니다.

다음은 서비스의 모습입니다.

class UserService{

User getUser() async {
// Makes http calls here
}

}

명령

명령은 주로 서비스와 상호 작용하는 방법입니다. 보기는 작업을 수행하기 위해 서비스를 호출할 수 있는 명령을 호출합니다. 다른 명령 클래스가 단순히 확장되는 기본 명령이 생성되어 다양한 명령 간에 공통 모델 및 서비스를 쉽게 공유할 수 있습니다.

다음은 BaseCommand 클래스의 모습입니다.

BuildContext? _mainContext;
BuildContext get mainContext => _mainContext!;
bool get hasContext => _mainContext != null;

void setContext(BuildContext c) {
  _mainContext = c;
}

class BaseAppCommand {
  UserService get userService => getProvided();
  AppService get appService => getProvided();

  AppModel get appModel => getProvided();

  T getProvided<T>() {
    assert(_mainContext != null,
        "You must call setcontext(buildcontext before call commands");
    return _mainContext!.read<T>();
  }
}

부트스트랩 명령은 사용자가 기록하거나 상태 또는 앱 구성을 시작하는 것과 같은 앱 요구 사항을 구성하거나 확인하기 위해 다른 용도로도 사용됩니다.

class BootStrapCommand extends BaseAppCommand {
  Future<void> run(BuildContext context) async {
    if (Commands.hasContext == false) {
      Commands.setContext(context);
    }
    print("Bootstrapping app....");
    await appService.init();
    appModel.accessToken = await appService.accessToken() ?? null;
    var futures = await Future.wait<dynamic>([
      appService.accessToken(),
      appService.init(),
    ]);
    appModel.accessToken = futures.first as String? ?? null;

    if (appModel.accessToken != null) {
      appService.setAccessToken(appModel.accessToken!);
    }
    appModel.isFreshInstall = appService.isAppFreshInstall;
    appModel.setUser = appService.user();
  }
}

이 기사에서 저는 Flutter 애플리케이션을 구조화하는 방법을 추출하려고 했습니다.