[flutter] 런처 아이콘을 동적으로 변경하는 애니메이션 구현 방법

22 Dec 2023

flutter

앱을 설치하고 난 후에도 런처 아이콘을 동적으로 변경하는 것은 사용자 경험을 향상시킬 수 있는 강력한 방법 중 하나입니다. 이 포스트에서는 Flutter에서 런처 아이콘을 동적으로 변경하고, 애니메이션을 추가하여 부드러운 전환 효과를 구현하는 방법에 대해 알아보겠습니다.

1. 런처 아이콘 변경

Flutter에서는 앱의 런처 아이콘은 pubspec.yaml 파일에서 정의됩니다. 아래와 같이 flutter 섹션 안에 flutter_icons를 추가하여 아이콘을 설정할 수 있습니다.

flutter:
  icons:
    android: "assets/icon/android.png"
    ios: true

앱이 시작될 때마다 런처 아이콘을 변경하려면, 앱이 시작할 때 flutter_launcher_icons 패키지를 사용하여 런처 아이콘을 동적으로 변경할 수 있습니다.

2. 애니메이션 추가

런처 아이콘을 변경할 때 부드러운 애니메이션을 추가하면 사용자들이 변화를 더욱 쉽게 인지할 수 있습니다. Flutter에서는 AnimatedSwitcher 위젯을 사용하여 애니메이션을 쉽게 추가할 수 있습니다.

아래는 런처 아이콘을 동적으로 변경하고, 애니메이션을 추가하는 예시 코드입니다.

import 'package:flutter/material.dart';

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

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

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  List<String> icons = ["android.png", "ios.png"];
  int currentIconIndex = 0;

  void changeIcon() {
    setState(() {
      currentIconIndex = (currentIconIndex + 1) % icons.length;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dynamic Launcher Icon'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimatedSwitcher(
              duration: Duration(milliseconds: 500),
              child: Image.asset(
                'assets/icon/${icons[currentIconIndex]}',
                key: ValueKey<int>(currentIconIndex),
              ),
            ),
            ElevatedButton(
              onPressed: changeIcon,
              child: Text('Change Icon'),
            ),
          ],
        ),
      ),
    );
  }
}

위의 코드는 AnimatedSwitcher를 사용하여 런처 아이콘을 변경하고, 애니메이션을 적용한 예시입니다.

이제 앱이 시작될 때마다 런처 아이콘을 동적으로 변경하고, 애니메이션을 추가하여 부드러운 전환 효과를 구현할 수 있습니다!

이상으로 Flutter에서 런처 아이콘을 동적으로 변경하는 애니메이션 구현 방법에 대해 살펴보았습니다. 여러분이 향후 앱 개발 프로젝트에 적용할 수 있기를 바랍니다.