Записки мобильного разработчика

Hola, Amigos! На связи Вова Зевеке, Flutter dev Amiga. Сегодня расскажем, как можно сделать запуск приложения с анимированным логотипом.

В основном файле main.dart устанавливаем SplashPage в качестве домашней страницы, чтобы приложение стартовало с анимированного логотипа.

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

 class MyApp extends StatelessWidget {
   const MyApp({super.key});

   @override
   Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      useMaterial3: true,
    ),
    home: const SplashPage(),
  );
   }
 }

Далее создаем SplashPage с использованием TickerProviderStateMixin для управления анимациями. Инициализируем анимации в методе initState().

Future<void> playAnimation() async {
  await Future.delayed(const Duration(milliseconds: 1000));
  for (int i = 0; i < controllerColorOpacityList.length; i++) {
 await controllerColorOpacityList[i].animateTo(1);
  }
  if (mounted) {
 Navigator.of(context).pushReplacement(_createRoute());
  }
}



И, наконец, реализуем анимированный переход между SplashPage и MainBottomNavigationBar с использованием PageRouteBuilder.



Route _createRoute() {
  return PageRouteBuilder(
 transitionDuration: const Duration(milliseconds: 700),
 pageBuilder: (context, animation, secondaryAnimation) => const MainBottomNavigationBar(),
 transitionsBuilder: (context, animation, secondaryAnimation, child) {
   const Offset begin = Offset(0.0, 1.0);
   const Offset end = Offset.zero;

   final Tween<Offset> tween = Tween(begin: begin, end: end);
   final Animation<double> curvedAnimation = CurvedAnimation(
     parent: animation,
     curve: Curves.linear,
   );

   return FadeTransition(
     opacity: curvedAnimation,
     child: child,
   );
 },
  );
}

На этом всё!

Ссылка github на код.

Делитесь в чате своими историями с анимациями, будет интересно почитать!