Flutter 애플리케이션에서 GetX 패키지 시작하기
게시 됨: 2022-03-10Flutter는 진정한 크로스 플랫폼 네이티브 애플리케이션을 구축하는 가장 빠른 방법 중 하나입니다. 개발자가 사용자를 위한 진정으로 아름다운 UI 경험을 구축할 수 있는 기능을 제공합니다.
그러나 대부분의 경우 화면 탐색, 상태 관리 및 경고 표시와 같은 작업을 수행하려면 많은 상용구가 필요합니다. 이러한 상용구는 기능을 구축하고 기한을 맞추려는 개발자의 개발 효율성을 늦추는 경향이 있습니다.
Flutter 애플리케이션에서 화면으로 이동하는 데 필요한 상용구를 예로 들어 보겠습니다. AboutScreen 이라는 화면으로 이동한다고 가정해 보겠습니다. 다음을 작성해야 합니다.
Navigator.push( context, MaterialPageRoute(builder: (context) => AboutScreen()), );다음과 같은 작업을 수행하는 것이 더 효율적이고 개발자 친화적입니다.
Get.to(AboutScreen());Flutter에서 이전 페이지로 돌아가야 하는 경우 다음을 작성해야 합니다.
Navigator.pop(context);우리는 화면 사이를 탐색하는 것과 같이 일상적인 것에 대해 항상 컨텍스트 속성에 의존하고 있음을 알 수 있습니다. 대신 다음과 같이 할 수 있습니다.
Get.back();위의 예는 Flutter에서 애플리케이션 개발을 더 적은 상용구로 더 직관적이고 효율적으로 개선할 수 있는 몇 가지 방법입니다. 단순함을 선호하고 기능과 아이디어를 효율적으로 구축하고 싶다면 Flutter에서 Get 패키지가 흥미로울 것입니다.
GetX란?
Get 또는 GetX는 Flutter 애플리케이션 구축을 위한 빠르고 안정적인 초경량 프레임워크입니다.
GetX는 간단하고 실용적인 방식으로 고성능 상태 관리, 지능형 종속성 주입 및 경로 관리와 함께 기본 제공됩니다.
GetX는 상용구를 최소화하는 동시에 개발자가 응용 프로그램을 빌드하는 동안 사용할 수 있는 간단하고 직관적인 구문을 제공하는 것을 목표로 합니다. GetX의 핵심에는 다음 3가지 원칙이 있습니다.
- 성능
GetX는 가능한 한 적은 리소스를 소비하는 기능을 구현하여 애플리케이션의 성능에 중점을 둡니다. - 생산력
GetX는 개발자가 가능한 한 빨리 생산성을 높이기 위해 기능을 사용하기를 원합니다. 이는 기억하기 쉬운 구문과 관행을 사용하여 수행합니다. 예를 들어 일반적으로 개발자는 메모리에서 컨트롤러를 제거하는 데 관심을 가져야 하지만 GetX out of the box는 응용 프로그램의 컨트롤러를 모니터링하고 기본적으로 사용되지 않을 때 컨트롤러를 제거하는 스마트 관리를 제공합니다. - 조직
GetX를 사용하면 Flutter 애플리케이션에서 보기, 프레젠테이션 논리, 비즈니스 논리, 종속성 주입 및 탐색을 분리할 수 있습니다. 경로 사이를 탐색하는 데 컨텍스트가 필요하지 않으므로 탐색을 위해 위젯 트리에 의존하지 않습니다.inheritedWidgetWidget 을 통해 컨트롤러/블록에 액세스하는 데 컨텍스트가 필요하지 않으므로 보기 계층에서 프레젠테이션 논리와 비즈니스 논리를 완전히 분리할 수 있습니다. 컨트롤러/모델/블록 클래스를 다중 공급자를 통해 위젯 트리에 주입할 필요가 없습니다. 이 GetX는 자체 종속성 주입 기능을 사용하여 뷰에서 DI를 완전히 분리하기 때문입니다.
GetX의 특징
GetX에는 Flutter에서 일상적인 앱 개발에 필요한 몇 가지 기능이 있습니다. 그것들을 살펴봅시다:
상태 관리
GetX의 주요 기능 중 하나는 직관적인 상태 관리 기능입니다. GetX의 상태 관리는 상용구를 거의 또는 전혀 사용하지 않고도 달성할 수 있습니다.
경로 관리
GetX는 Flutter 애플리케이션 내 탐색을 위한 API를 제공합니다. 이 API는 간단하고 필요한 코드가 적습니다.
종속성 관리
GetX는 보기 컨트롤러와 같은 Flutter 애플리케이션의 종속성을 관리하는 현명한 방법을 제공합니다. GetX는 메모리에서 현재 사용되지 않는 모든 컨트롤러를 제거합니다. 이것은 개발자가 수동으로 수행해야 하는 작업이지만 GetX는 즉시 자동으로 수행합니다.
국제화
GetX는 i18n을 즉시 제공하여 다양한 언어를 지원하는 응용 프로그램을 작성할 수 있도록 합니다.
확인
GetX는 Flutter 애플리케이션에서 입력 유효성 검사를 수행하기 위한 유효성 검사 방법을 제공합니다. 별도의 유효성 검사 패키지를 설치할 필요가 없으므로 매우 편리합니다.
저장
GetX는 메모리에 빠르고 가벼운 동기식 키-값을 제공하여 각 작업에서 데이터를 디스크에 백업합니다. 완전히 Dart로 작성되었으며 핵심 GetX 패키지와 쉽게 통합됩니다.
GetX 시작하기
이제 GetX가 무엇인지, GetX가 제공하는 기능과 이점을 확인했으므로 애플리케이션에서 설정하는 방법을 살펴보겠습니다. 우리는 우리가 언급한 대부분의 기능을 실제로 볼 수 있는 데모 앱을 만들 것입니다. 시작하자.
완전히 새로운 Flutter 애플리케이션 만들기
Flutter CLI를 통해 완전히 새로운 Flutter 애플리케이션을 만드는 것으로 시작하겠습니다. 귀하의 머신은 이미 Flutter로 애플리케이션 개발을 위해 설정되어 있다고 가정합니다. 그래서 우리는 다음을 실행합니다.
flutter create getx_demo그러면 Flutter 애플리케이션에 필요한 기본 코드가 생성됩니다. 다음으로 선택한 편집기에서 방금 생성한 프로젝트를 엽니다(이 기사에서는 VS Code를 사용할 것입니다). 그런 다음 프로젝트를 실행하여 제대로 작동하는지 확인합니다(장치가 연결되어 있거나 에뮬레이터/시뮬레이터가 실행 중인지 확인하십시오).
응용 프로그램이 실행되면 새 Flutter 응용 프로그램을 만들 때 Flutter가 스캐폴딩하는 기본 카운터 응용 프로그램이 표시됩니다. 우리가 할 일은 동일한 카운터 애플리케이션을 구현하지만 GetX를 사용하여 앱의 상태(count 변수)를 관리하는 것입니다.
main.dart 를 지우고 다음 코드 스니펫만 남겨두고 시작하겠습니다.
# main.dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } } 지금쯤이면 MyHomePage 위젯이 더 이상 없기 때문에 애플리케이션이 손상되었을 것입니다. 수정합시다. GetX를 사용하면 상태 저장 위젯이 필요하지 않으며 UI도 비즈니스 로직에서 명확하게 분리될 수 있습니다. 그래서 우리는 lib/ 안에 두 개의 디렉토리를 만들 것입니다. 이러한 디렉토리는 다음과 같습니다.
views/ | 우리의 응용 프로그램에서 화면을 유지합니다. |
controllers/ | 우리 응용 프로그램의 화면에 대한 모든 컨트롤러를 유지합니다. |
views/ 안에 MyHomePage 위젯을 만들어 봅시다. 파일 이름은 my_home_page.dart 가 됩니다. 생성한 후 다음 코드 조각을 추가합니다.
import 'package:flutter/material.dart'; class MyHomePage extends StatelessWidget { final String title; MyHomePage({this.title}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'You have pushed the button this many times:', ), Text( '0', style: Theme.of(context).textTheme.headline4, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: null, tooltip: 'Increment', child: Icon(Icons.add), ), ); } } 이제 MyHomePage 위젯이 main.dart 에서 가져오겠습니다. import 'package:flutter/material.dart';
import './views/my_home_page.dart'; 이제 main.dart 파일은 다음과 같아야 합니다.
import 'package:flutter/material.dart'; import './views/my_home_page.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } } 지금 애플리케이션을 저장하면 모든 오류가 수정되고 앱이 실행됩니다. 그러나 버튼을 다시 클릭하면 카운터가 업데이트되지 않음을 알 수 있습니다. views/my_home_page.dart 코드를 보면 Text 위젯의 값으로 0 을 하드 코딩하고 버튼의 onPressed 핸들러에 null 을 전달한다는 것을 알 수 있습니다. 응용 프로그램이 다시 작동하도록 GetX를 혼합해 보겠습니다.
GetX 설치
pub.dev의 GetX 설치 페이지로 이동하면 GetX를 설치하기 위해 pubspec.yml 파일에 복사할 코드 줄이 표시됩니다. 이 기사를 작성하는 시점에서 GetX의 현재 버전은 3.23.1입니다. 따라서 다음 행을 복사합니다.
get: ^3.23.1 그런 다음 pubspec.yml 파일의 dependencies 섹션 아래에 붙여넣습니다. 파일을 저장하면 get이 자동으로 설치됩니다. 또는 터미널에서 수동으로 실행할 수 있습니다.
flutter pub get pubspec.yml 파일의 종속성 섹션은 다음과 같아야 합니다.
dependencies: flutter: sdk: flutter get: ^3.23.1 GetxController
GetX를 사용하면 애플리케이션의 UI를 로직과 분리할 수 있다고 언급했습니다. 애플리케이션 보기에 대한 컨트롤러 클래스를 생성하기 위해 상속할 수 있는 GetxController 클래스를 제공하여 이를 수행합니다. 현재 앱에는 하나의 보기가 있으므로 해당 보기에 대한 컨트롤러를 만듭니다. controllers/ 디렉토리로 이동하여 my_home_page_controller.dart 라는 파일을 만듭니다. 이것은 MyHomePage 보기에 대한 컨트롤러를 보유합니다.
파일을 만든 후 먼저 파일 맨 위에 다음을 추가하여 GetX 패키지를 가져옵니다.
import 'package:get/get.dart'; 그런 다음 그 안에 MyHomePageController 라는 클래스를 만들고 GetxController 클래스를 확장합니다. 파일은 다음과 같아야 합니다.
import 'package:get/get.dart'; class MyHomePageController extends GetxController {}우리가 만든 클래스에 count 상태를 추가해 보겠습니다.
final count = 0; GetX에서 변수를 관찰 가능하게 하려면 변수가 변경될 때 해당 변수에 종속된 애플리케이션의 다른 부분에 알림이 전송됩니다. 이렇게 하려면 변수 초기화에 .obs 를 추가하기만 하면 됩니다. 따라서 위의 count 변수에 대해 .obs 를 0 에 추가합니다. 따라서 위의 선언은 이제 다음과 같이 보일 것입니다.
final count = 0.obs;이것이 현재 컨트롤러 파일의 모습입니다.
import 'package:get/get.dart'; class MyHomePageController extends GetxController { final count = 0.obs; } MyHomePageController 로 마무리하기 위해 increment 메소드를 구현할 것입니다. 다음은 이를 수행하는 스니펫입니다.
increment() => count.value++; 증가시키기 위해 count 변수에 .value 를 추가해야 한다는 것을 알 수 있습니다. 변수에 .obs 를 추가하면 변수가 관찰 가능한 변수가 되고 관찰 가능한 변수의 값을 가져오려면 value 속성에서 수행해야 하기 때문에 이 작업을 수행했습니다.
그래서 우리는 컨트롤러로 끝났습니다. 이제 count 값이 변경되면 이를 사용하는 애플리케이션의 모든 부분이 자동으로 업데이트됩니다.
이제 뷰로 이동하여 방금 만든 컨트롤러에 대해 알립니다. GetX 종속성 관리 기능을 사용하여 컨트롤러 클래스를 인스턴스화하여 이를 수행합니다. 이렇게 하면 컨트롤러가 더 이상 필요하지 않을 때 컨트롤러가 메모리에 저장되지 않습니다.
views/my_home_page.dart 에서 Get 패키지와 다음과 같이 생성한 컨트롤러를 가져옵니다.
import 'package:get/get.dart'; import '../controllers/my_home_page_controller.dart'; 그런 다음 MyHomePage 클래스 내에서 MyHomePageController 를 인스턴스화합니다.
final MyHomePageController controller = Get.put(MyHomePageController()); 이제 우리는 MyHomePageController 의 인스턴스를 가지고 있으며, 상태 변수와 메소드를 사용할 수 있습니다. 따라서 상태로 시작하여 GetX에서 상태 변수가 변경될 때 다시 빌드할 UI의 일부를 표시하려면 해당 부분을 Obx 위젯으로 래핑합니다. GetX는 이를 수행하는 다른 방법을 제공하지만 이 방법이 훨씬 간단하고 깔끔합니다.
카운트 애플리케이션의 경우 Text 위젯이 현재 카운트로 업데이트되기를 원합니다. 그래서 우리는 다음과 같이 Obx 위젯으로 Text 위젯을 감쌀 것입니다:
Obx(() => Text('0',style: Theme.of(context).textTheme.headline4,),) 다음으로 정적 문자열 0 을 다음과 같이 MyHomePageController 의 count 변수로 바꿉니다.
Obx(() => Text('${controller.count.value}', ,style: Theme.of(context).textTheme.headline4,),) 마지막으로 floatingActionButton 이 다음과 같이 눌렸을 때 increment 메소드를 호출할 것입니다:
floatingActionButton: FloatingActionButton( onPressed: controller.increment, tooltip: 'Increment', child: Icon(Icons.add), ), 따라서 전반적으로 MyHomePage 보기 파일은 다음과 같아야 합니다.
import 'package:flutter/material.dart'; import 'package:get/get.dart'; import '../controllers/my_home_page_controller.dart'; class MyHomePage extends StatelessWidget { final String title; final MyHomePageController controller = Get.put(MyHomePageController()); MyHomePage({this.title}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'You have pushed the button this many times:', ), Obx( () => Text( '${controller.count.value}', style: Theme.of(context).textTheme.headline4, ), ) ], ), ), floatingActionButton: FloatingActionButton( onPressed: controller.increment, tooltip: 'Increment', child: Icon(Icons.add), ), ); } }응용 프로그램을 저장하거나 다시 실행할 때 카운터 앱은 처음 응용 프로그램을 만들 때와 같이 작동해야 합니다.
GetX를 사용하여 상태 관리가 얼마나 직관적인지 보셨으리라 믿습니다. 많은 상용구를 작성할 필요가 없었으며 애플리케이션이 복잡해짐에 따라 이 단순함이 더욱 분명해질 것입니다. 또한 우리의 보기가 상태를 유지하거나 유지하지 않으므로 상태 비저장 위젯이 될 수 있음을 알 수 있습니다. 이제 뷰의 두뇌는 이제 뷰와 메서드의 상태를 유지하는 컨트롤러 클래스입니다.
GetX의 탐색
GetX에서 상태 관리를 보았습니다. 이제 GetX가 응용 프로그램 내에서 탐색을 지원하는 방법을 살펴보겠습니다. GetX의 탐색 기능을 활성화하려면 Main.dart에서 MaterialApp 위젯을 main.dart 위젯으로 GetMaterialApp 한 가지만 변경하면 됩니다. 먼저 main.dart 의 맨 위에 Get을 가져와서 수행해 보겠습니다.
import 'package:get/get.dart'; 그런 다음 main.dart 파일이 다음과 같이 보이도록 MaterialApp 을 변경합니다.
import 'package:flutter/material.dart'; import 'package:get/get.dart'; import './views/my_home_page.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return GetMaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } } 이제 앱이 GetX 탐색을 지원하도록 설정되었습니다. 이것을 테스트하기 위해 우리는 views/ 디렉토리에 다른 보기를 생성할 것입니다. 우리는 이것을 about_page.dart 에서 호출할 것이고 다음 코드를 포함할 것입니다:
import 'package:flutter/material.dart'; import 'package:get/get.dart'; import '../controllers/my_home_page_controller.dart'; class AboutPage extends StatelessWidget { final MyHomePageController controller = Get.put(MyHomePageController()); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('About GetX'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Padding( padding: const EdgeInsets.all(16.0), child: Text( 'GetX is an extra-light and powerful solution for Flutter. It combines high performance state management, intelligent dependency injection, and route management in a quick and practical way.', ), ), ], ), ), ); } } 그런 다음 MyHomePage 로 이동하여 눌렀을 때 AboutPage 로 이동하는 버튼을 추가합니다. 그렇게. 버튼은 Obx 위젯 아래에 있어야 합니다. 여기있어:
FlatButton(onPressed: () {}, child: Text('About GetX')) MyHomePage 파일 위에 AboutPage 도 가져와야 합니다.
import './about_page.dart'; GetX가 AboutPage 로 이동하도록 지시하려면 다음과 같은 한 줄의 코드만 있으면 됩니다.
Get.to(AboutPage()); 다음과 같이 FlatButton 위젯의 onPressed 콜백에 추가해 보겠습니다.
FlatButton( onPressed: () { Get.to(AboutPage()); }, child: Text('About GetX')) 지금 애플리케이션을 저장하면 이제 AboutPage 로 이동할 수 있습니다.
MyHomePage 보기를 AboutPage 로 바꾸도록 선택할 수도 있으므로 사용자가 장치 뒤로 버튼을 눌러 이전 페이지로 돌아갈 수 없습니다. 로그인 화면과 같은 화면에 유용합니다. 이렇게 하려면 onPressed 핸들러의 내용을 아래 코드로 바꿉니다.
Get.off(AboutPage()); 이렇게 하면 MyHomePage 보기가 표시되고 이를 AboutPage 로 바꿉니다.
이제 AboutPage 로 이동할 수 있으므로 AboutPage 로 onPressed MyHomePage 에서 호출할 것입니다. Get.back() 을 사용하여 MyHomePage 로 다시 이동합니다.
FlatButton( onPressed: () { Get.back(); }, child: Text('Go Home') )스낵바
일반적으로 Flutter에서 Snackbar를 표시하려면 다음과 같이 작성해야 합니다.
final snackBar = SnackBar(content: Text('Yay! A SnackBar!')); // Find the Scaffold in the widget tree and use it to show a SnackBar. Scaffold.of(context).showSnackBar(snackBar); 우리는 여전히 context 속성에 의존하고 있음을 관찰할 수 있습니다. GetX에서 이것을 어떻게 달성할 수 있는지 봅시다. MyHomePage 보기로 이동하여 마지막으로 추가한 버튼 아래에 다른 FlatButton 위젯을 추가합니다. 다음은 버튼에 대한 스니펫입니다.
FlatButton( onPressed: () { // TODO: Implement Snackbar }, child: Text('Show Snackbar'))'Yay! 굉장한 GetX 스낵바'. onPressed 핸들러 함수 안에 아래 코드 줄을 추가합니다.
Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar');애플리케이션을 실행하고 "스낵바 표시 버튼"을 클릭하면 애플리케이션 상단에 스낵바가 표시됩니다!
Flutter 애플리케이션에서 스낵바를 표시하는 데 필요한 줄 수를 어떻게 줄였는지 확인하세요? Snackbar에서 더 많은 사용자 정의를 수행해 보겠습니다. 앱 하단에 나타나도록 합시다. 코드를 다음과 같이 변경합니다.
Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar',snackPosition:SnackPosition.BOTTOM, ); 애플리케이션을 저장하고 실행하면 이제 스낵바가 애플리케이션 하단에 나타납니다. 현재 투명한 스낵바의 배경색을 변경해 볼까요? Flutter의 Colors 클래스에서 amberAccent 색상으로 변경할 것입니다. 코드를 다음과 같이 업데이트합니다.
Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar',snackPosition:SnackPosition.BOTTOM, backgroundColor: Colors.amberAccent );전반적으로 버튼 코드는 다음과 같아야 합니다.
FlatButton( onPressed: () { Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar', snackPosition: SnackPosition.BOTTOM, backgroundColor: Colors.amberAccent); }, child: Text('Show Snackbar'))대화
GetX는 Flutter에서 AlertDialog를 생성하는 간단한 방법을 제공합니다. 행동으로 봅시다. 이전 버튼 아래에 다른 버튼을 만듭니다.
FlatButton( onPressed: () { // TODO: Show alert dialog }, child: Text('Show AlertDialog'))GetX를 호출하여 경고 대화 상자를 표시해 보겠습니다.
Get.defaultDialog();그러면 대화 상자 외부를 탭하여 해제할 수 있는 기본 경고 대화 상자가 표시됩니다. 한 줄의 코드에서 작동 중인 경고 대화 상자가 있는 방법을 볼 수 있습니다. 조금 커스터마이징 해봅시다. 제목과 메시지를 변경해 보겠습니다.
Get.defaultDialog( title: 'GetX Alert', middleText: 'Simple GetX alert');앱을 저장하고 실행하면 "경고 대화 상자 표시" 버튼을 누르면 변경 사항이 표시됩니다. 다음과 같이 확인 및 취소 버튼을 추가할 수 있습니다.
Get.defaultDialog( title: 'GetX Alert', middleText: 'Simple GetX alert', textConfirm: 'Okay', confirmTextColor: Colors.amberAccent, textCancel: 'Cancel');GetX 대화 상자를 사용자 정의하는 방법에는 여러 가지가 있으며 API는 매우 직관적이고 간단합니다.
결론
GetX는 기능을 구축할 때 Flutter 개발자의 생산성을 향상시키기 위해 만들어졌습니다. 상태 관리, 탐색 관리 등과 같은 작업에 필요한 상용구를 검색하는 대신 GetX는 성능 저하 없이 이러한 활동을 수행할 수 있는 간단하고 직관적인 API를 제공합니다. 이 기사에서는 GetX를 소개하고 Flutter 애플리케이션에서 GetX를 사용하는 방법을 소개합니다.
- 여기에서 데모를 찾을 수 있습니다 →