Flutter에서 GetX 아키텍트로 앱을 만드는 방법.

오늘 기사에서는 GetX 아키텍트로 Flutter 앱을 만드는 방법에 대한 단계를 공유할 것입니다. 시작하자.

GetX란?

GetX는 Flutter를 위한 가볍고 강력한 솔루션입니다. 이 솔루션은 고속 상태 관리와 지능형 종속성 주입 및 경로 관리를 결합합니다.

왜 GetX를 선택해야 할까요?

Flutter가 이미 프레임워크라면 Flutter에서 교차 앱 개발을 위해 마이크로 프레임워크(GetX)를 선택해야 하는 이유는 무엇입니까? GetX가 제공하는 몇 가지 이점은 다음과 같습니다.

성능

GetX는 고성능과 최소한의 리소스 소비를 제공합니다. GetX는 Streams 또는 ChangeNotifier를 사용하지 않습니다.

디커플링

비즈니스 로직은 UI와 분리되며 종속성도 GetX 바인딩을 사용하여 분리할 수 있습니다.

국제화

GetX는 다양한 언어를 지원하는 응용 프로그램을 작성할 수 있도록 i18n을 즉시 제공합니다.

상태 관리

GetX는 직관적인 상태 관리 기능입니다. GetX의 상태 관리는 상용구가 거의 또는 전혀 없이 달성될 수 있습니다.

경로 관리

GetX는 Flutter 애플리케이션 내에서 탐색하기 위한 API를 제공합니다. 이 API는 간단하고 필요한 코드가 적습니다.

종속성 관리

GetX는 보기 컨트롤러와 같은 Flutter 애플리케이션의 종속성을 관리하는 스마트한 방법을 제공합니다. GetX는 현재 사용하지 않는 컨트롤러를 메모리에서 자동으로 제거합니다.

확인

GetX는 Flutter 애플리케이션에서 입력 유효성 검사를 수행하기 위한 유효성 검사 방법을 제공하므로 유효성 검사를 위해 추가 패키지를 설치할 필요가 없습니다.

저장

GetX는 각 작업에서 데이터를 디스크에 백업하는 메모리에 빠르고 가볍고 동기식 키-값을 제공합니다. 전적으로 Dart로 작성되었으며 핵심 GetX 패키지와 쉽게 통합됩니다.

테마 변경

GetX를 사용하는 동안 "GetMaterialApp"위젯보다 더 높은 수준의 위젯을 사용할 필요가 없으며 테마를 변경하기 위해 "ThemeProvider"위젯을 사용할 필요도 없습니다.

1 단계

새 Flutter 프로젝트를 시작합니다.

flutter create your_project_name

2 단계

pubspec.yaml에 GetX 패키지 추가

3단계

아래 이미지와 같이 앱 구조를 만드세요.



페이지당 3개의 파일이 있습니다. 컨트롤러, 바인딩 및 페이지/뷰.

제어 장치
GetxController 클래스는 모든 논리를 처리하고 필드를 관찰 가능하게 만듭니다.

//home_controller.dart

import 'package:get/get.dart';
class HomeController extends GetxController {
}

제본
바인딩은 보기 페이지에서 직접 호출하지 않고도 컨트롤러, 리포지토리, API 및 기타 필요한 항목을 초기화하는 데 사용할 수 있습니다.

//home_binding.dart

import 'package:flutter_getx/app/modules/home_controller.dart';
import 'package:get/get.dart';

class HomeBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut(() => HomeController());
  }
}

페이지보기
이 페이지를 사용하여 앱에 디자인을 표시합니다.

//home_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_getx/app/modules/home_controller.dart';
import 'package:get/get.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetBuilder<HomeController>(
      builder: (controller) => Scaffold(
        appBar: AppBar(
          title: const Text('Home'),
        ),
        body: const Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

4단계

한 화면에서 다른 화면으로 이동하기 전에 GetX에서는 경로가 필요합니다. 그럼 경로를 만들어 봅시다.

//app_routes.dart

class AppRoutes {
  static const home = '/home';
}

//app_pages.dart

import 'package:flutter_getx/app/modules/home_binding.dart';
import 'package:flutter_getx/app/modules/home_page.dart';
import 'package:flutter_getx/app/routes/app_routes.dart';
import 'package:get/get.dart';

class AppPages {
  static final List<GetPage> pages = [
    GetPage(
      name: AppRoutes.home,
      page: () => HomePage(),
      binding: HomeBinding(),
    ),
  ];
}

5단계

이제 main.dart에서 GetMaterialApp으로 MaterialApp 위젯을 변경하고 페이지를 초기화하십시오.

//main.dart

import 'package:flutter/material.dart';
import 'package:flutter_getx/app/modules/home_binding.dart';
import 'package:flutter_getx/app/modules/home_page.dart';
import 'package:flutter_getx/app/routes/app_pages.dart';
import 'package:get/get.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 GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      initialBinding: HomeBinding(),
      home: HomePage(),
      getPages: AppPages.pages,
    );
  }
}

이제 모든 작업이 완료되어 앱을 실행합니다.

결론

Flutter GetX에서 앱을 만드는 방법을 보여주는 간단한 단계별 가이드입니다. 이해를 돕기 위해 아래 링크를 클릭하시면 제가 GetX에서 만든 숏무비 앱도 확인하실 수 있습니다.

링크: https://github.com/socialmad/movie-app

이 기사가 마음에 드셨으면 합니다.
이 기사의 후원자: UniqueApps