[flutter] 플러터 Lottie로 네비게이션바 앱의 탭 애니메이션 구현하기

05 Dec 2023

flutter

본 문서에서는 플러터(Flutter) 프레임워크를 사용하여 네비게이션바 앱의 탭 애니메이션을 구현하는 방법에 대해 알아보겠습니다. 이번 예제에서는 Lottie Animation을 사용하여 애니메이션을 구현할 것입니다.

준비물

Flutter SDK 설치
플러터 프로젝트 생성

Lottie Animation 추가하기

Lottie는 Airbnb에서 개발한 애니메이션 라이브러리로, 다양한 애니메이션을 JSON 형식으로 가져와서 앱에 쉽게 적용할 수 있습니다. Lottie를 사용하기 위해 lottie 패키지를 pubspec.yaml 파일에 추가해줍니다.

dependencies:
  flutter:
    sdk: flutter

  lottie: ^0.7.0

pubspec.yaml 파일에 의존성 추가 후, 패키지를 다운로드 받기 위해 터미널에서 다음 명령어를 실행합니다.

flutter pub get

애니메이션 컨트롤 구현하기

Lottie Animation을 사용하여 탭 애니메이션을 적용하기 위해 먼저 애니메이션 컨트롤을 구현해야합니다. 애니메이션을 재생, 일시정지, 정지할 수 있는 기능을 구현합니다.

import 'package:lottie/lottie.dart';

class TabAnimationController {
  LottieController? _animationController;

  void init(LottieController controller) {
    _animationController = controller;
  }

  void play() {
    _animationController?.play();
  }

  void pause() {
    _animationController?.pause();
  }

  void stop() {
    _animationController?.stop();
  }
}

탭 애니메이션 적용하기

탭 애니메이션을 구현하기 위해서는 BottomNavigationBar 위젯을 사용합니다. 각 탭에 해당하는 페이지와 Lottie 애니메이션을 연결하기 위해 PageView와 IndexedStack을 함께 사용합니다.

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

class AnimatedTabBar extends StatefulWidget {
  @override
  _AnimatedTabBarState createState() => _AnimatedTabBarState();
}

class _AnimatedTabBarState extends State<AnimatedTabBar> {
  final TabAnimationController _animationController =
      TabAnimationController();

  final _pages = [
    // 각 탭에 해당하는 페이지 위젯들을 정의
    Page1(),
    Page2(),
    Page3(),
  ];

  final _animationFiles = [
    'assets/animation1.json',
    'assets/animation2.json',
    'assets/animation3.json',
  ];

  int _currentIndex = 0;

  @override
  void initState() {
    super.initState();
    // 초기화 시 첫 번째 탭의 애니메이션을 재생
    _animationController.init(LottieController());
    _animationController.play();
  }

  @override
  void dispose() {
    _animationController.stop();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(index: _currentIndex, children: _pages),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          // 탭이 변경될 때, 이전 탭의 애니메이션을 정지하고 새로운 탭의 애니메이션을 재생
          _animationController.stop();
          _currentIndex = index;
          _animationController.init(LottieController());
          _animationController.play();
          setState(() {});
        },
        items: [
          BottomNavigationBarItem(
            icon: Lottie.asset(
              _animationFiles[0],
              controller: _animationController,
            ),
            label: 'Tab 1',
          ),
          BottomNavigationBarItem(
            icon: Lottie.asset(
              _animationFiles[1],
              controller: _animationController,
            ),
            label: 'Tab 2',
          ),
          BottomNavigationBarItem(
            icon: Lottie.asset(
              _animationFiles[2],
              controller: _animationController,
            ),
            label: 'Tab 3',
          ),
        ],
      ),
    );
  }
}

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text('Page 1'),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text('Page 2'),
      ),
    );
  }
}

class Page3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text('Page 3'),
      ),
    );
  }
}

결론

플러터의 Lottie를 사용하여 네비게이션바 앱의 탭 애니메이션을 구현하는 방법을 알아보았습니다. Lottie를 사용하면 다양한 디자인의 애니메이션을 쉽게 적용할 수 있습니다. 이를 활용하여 더 멋진 앱을 개발해보세요.

목차

준비물

Lottie Animation 추가하기

애니메이션 컨트롤 구현하기

탭 애니메이션 적용하기

결론