Flutter의 트랜지션(Transition) 효과 사용법

Flutter에서 트랜지션(Transition) 효과는 화면 전환이나 요소의 상태 변화 시 애니메이션을 통해 부드럽고 자연스러운 시각적 효과를 제공하는 데 사용됩니다. 트랜지션을 통해 애플리케이션의 사용자 경험을 향상시킬 수 있습니다. 이번 글에서는 Flutter의 다양한 트랜지션 효과와 이를 구현하는 방법에 대해 자세히 살펴보겠습니다.

1. 기본 페이지 트랜지션

Flutter에서 기본 페이지 전환 애니메이션을 사용하려면 Navigator를 사용하여 페이지를 푸시(push)하거나 팝(pop)합니다. 기본적으로 Flutter는 부드러운 슬라이드 전환을 제공합니다.

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First 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 to First Page'),
        ),
      ),
    );
  }
}

 

위 코드는 기본적인 페이지 전환 트랜지션을 보여줍니다. Navigator.push와 Navigator.pop을 사용하여 페이지를 전환합니다.

2. 커스텀 페이지 트랜지션

기본 페이지 트랜지션 외에도 PageRouteBuilder를 사용하여 커스텀 페이지 전환 애니메이션을 만들 수 있습니다.

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              PageRouteBuilder(
                pageBuilder: (context, animation, secondaryAnimation) => SecondPage(),
                transitionsBuilder: (context, animation, secondaryAnimation, child) {
                  var begin = Offset(0.0, 1.0);
                  var end = Offset.zero;
                  var curve = Curves.ease;

                  var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

                  return SlideTransition(
                    position: animation.drive(tween),
                    child: child,
                  );
                },
              ),
            );
          },
          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 to First Page'),
        ),
      ),
    );
  }
}

 

위 코드는 커스텀 페이지 전환 애니메이션을 구현합니다. PageRouteBuilder를 사용하여 SlideTransition 애니메이션을 적용합니다.

 

반응형

 

3. 페이드(Fade) 트랜지션

페이드 전환을 사용하여 요소가 점점 사라지거나 나타나도록 할 수 있습니다. FadeTransition 위젯을 사용하여 페이드 애니메이션을 구현할 수 있습니다.

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

class FadeTransitionDemo extends StatefulWidget {
  @override
  _FadeTransitionDemoState createState() => _FadeTransitionDemoState();
}

class _FadeTransitionDemoState extends State<FadeTransitionDemo> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);

    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeIn,
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Fade Transition Demo')),
      body: Center(
        child: FadeTransition(
          opacity: _animation,
          child: FlutterLogo(size: 100.0),
        ),
      ),
    );
  }
}

 

위 코드는 FadeTransition 위젯을 사용하여 로고가 서서히 나타났다 사라지는 애니메이션을 구현합니다. AnimationController와 CurvedAnimation을 사용하여 애니메이션을 제어합니다.

4. 크기 조정(Scale) 트랜지션

크기 조정 트랜지션을 사용하여 요소의 크기가 커지거나 작아지도록 할 수 있습니다. ScaleTransition 위젯을 사용하여 크기 조정 애니메이션을 구현할 수 있습니다.

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

class ScaleTransitionDemo extends StatefulWidget {
  @override
  _ScaleTransitionDemoState createState() => _ScaleTransitionDemoState();
}

class _ScaleTransitionDemoState extends State<ScaleTransitionDemo> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);

    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeIn,
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Scale Transition Demo')),
      body: Center(
        child: ScaleTransition(
          scale: _animation,
          child: FlutterLogo(size: 100.0),
        ),
      ),
    );
  }
}

 

위 코드는 ScaleTransition 위젯을 사용하여 로고가 커졌다 작아지는 애니메이션을 구현합니다. AnimationController와 CurvedAnimation을 사용하여 애니메이션을 제어합니다.

5. 회전(Rotation) 트랜지션

회전 트랜지션을 사용하여 요소가 회전하도록 할 수 있습니다. RotationTransition 위젯을 사용하여 회전 애니메이션을 구현할 수 있습니다.

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

class RotationTransitionDemo extends StatefulWidget {
  @override
  _RotationTransitionDemoState createState() => _RotationTransitionDemoState();
}

class _RotationTransitionDemoState extends State<RotationTransitionDemo> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);

    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeIn,
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Rotation Transition Demo')),
      body: Center(
        child: RotationTransition(
          turns: _animation,
          child: FlutterLogo(size: 100.0),
        ),
      ),
    );
  }
}

 

위 코드는 RotationTransition 위젯을 사용하여 로고가 회전하는 애니메이션을 구현합니다. AnimationController와 CurvedAnimation을 사용하여 애니메이션을 제어합니다.