[flutter] 플러터 get과 화면 전환 애니메이션

26 Dec 2023

flutter

Flutter 애플리케이션을 개발할 때 화면 전환 애니메이션은 사용자 경험(UX)을 향상시키는 데 매우 중요합니다. Get 패키지는 플러터(Flutter) 애플리케이션에서 화면 전환을 간단하고 효율적으로 구현할 수 있게 해줍니다. 이번 포스트에서는 Get 패키지를 사용하여 화면 전환 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

Get 패키지란?

Get은 플러터(Flutter)에서 라우팅과 상태 관리를 위한 패키지입니다. Get 패키지를 사용하면 간단한 코드로 화면 전환 애니메이션을 구현할 수 있으며, 경로 및 상태 관리도 효과적으로 처리할 수 있습니다.

Get 패키지 설치하기

먼저, pubspec.yaml 파일에 Get 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  get: ^4.1.4

그런 다음, 터미널에서 다음 명령을 실행하여 패키지를 업데이트합니다.

flutter pub get

화면 전환 애니메이션 구현하기

import 'package:flutter/material.dart';
import 'package:get/get.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Get.to(SecondScreen());
          },
          child: Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

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

위의 예시 코드에서는 Get 패키지를 사용하여 두 개의 화면을 만들고 첫 번째 화면에서 두 번째 화면으로 전환하고 두 번째 화면에서 다시 되돌아오는 과정을 구현한 것입니다.

이제 Get 패키지를 사용하여 플러터(Flutter) 애플리케이션에서 간단한 화면 전환 애니메이션을 구현하고 실행해보세요!

더 많은 Get 패키지의 기능과 옵션에 대한 내용은 공식 문서를 참고하시기 바랍니다.