[flutter] 플러터 get과 페이지 전환

26 Dec 2023

flutter

플러터(Flutter) 앱을 개발하다 보면 다른 페이지로 이동해야 하는 경우가 많습니다. 또한, 데이터를 가져오거나 전역 상태를 관리해야 하는 경우도 있습니다. 이때 플러터의 get 패키지를 사용하면 간단하게 이동과 상태 관리를 처리할 수 있습니다.

get 패키지 설치

먼저, get 패키지를 설치해야 합니다. pubspec.yaml 파일을 열고 다음과 같이 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  get: ^4.1.4

설정을 마친 후, 터미널에서 flutter pub get 명령을 실행하여 패키지를 설치합니다.

페이지 전환

get 패키지를 사용하면 페이지 간의 전환을 간단하게 처리할 수 있습니다. 아래는 예시 코드입니다.

import 'package:get/get.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: HomeView(),
      routes: {
        '/detail': (context) => DetailView(),
      },
    );
  }
}

class HomeView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Get.toNamed('/detail');
          },
          child: Text('Go to Detail'),
        ),
      ),
    );
  }
}

class DetailView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Detail')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Get.back();
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

위 코드에서 Get.toNamed('/detail')로 다른 페이지로 이동하고, Get.back()을 사용하여 이전 페이지로 돌아갈 수 있습니다.

상태 관리

get 패키지를 사용하면 전역 상태 관리도 간단히 처리할 수 있습니다. 아래는 상태 관리를 하는 예시 코드입니다.

import 'package:get/get.dart';

class CounterController extends GetxController {
  var count = 0.obs;

  void increase() {
    count++;
  }
}

위 코드에서 obs 함수를 이용하여 상태를 감시하고, increase 함수를 실행하여 상태를 변경할 수 있습니다.

get 패키지를 사용하면 페이지 전환과 상태 관리를 간단하게 처리할 수 있어서, 플러터 앱 개발 시 유용하게 활용할 수 있습니다.

Get 패키지 공식 문서

위 내용은 get 패키지를 활용한 페이지 전환과 상태 관리에 대한 간단한 예시로, 상세한 내용은 공식 문서를 참고해주시기 바랍니다.