[flutter] 플러터 애니메이션을 이용한 화면 전환 효과 구현 방법

11 Dec 2023

flutter

플러터(Flutter)를 사용하여 앱을 개발하다 보면 화면 전환을 부드럽게 표현하기 위해 애니메이션을 구현해야 할 때가 있습니다. 이번에는 플러터에서 화면 전환 효과를 구현하는 방법에 대해 알아보겠습니다.

필요한 패키지 설치

먼저, 플러터 프로젝트에 애니메이션을 사용하기 위해 다음과 같은 패키지를 설치해야 합니다.

dependencies:
  flutter:
    sdk: flutter
  animated_text_kit: ^4.2.1

화면 전환 애니메이션 구현 방법

다음은 플러터를 사용하여 화면 전환 효과를 구현하는 간단한 예제 코드입니다.

import 'package:flutter/material.dart';

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

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

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

위 코드에서는 Navigator.push와 Navigator.pop을 사용하여 각각 다음 화면으로 전환하고 이전 화면으로 돌아가는 기능을 구현하였습니다.

결론

플러터를 사용하여 화면 전환 효과를 구현하는 방법에 대해 간단히 알아보았습니다. 화면 전환 애니메이션은 사용자 경험을 향상시키는 중요한 요소이므로, 다양한 애니메이션 효과를 적용하여 보다 효과적인 앱을 개발할 수 있을 것입니다.

참고 문헌:

Flutter Official Documentation: https://flutter.dev/docs
Flutter Animated Text Kit: https://pub.dev/packages/animated_text_kit

이전 다음