Pull to refresh

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

В основном файле 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 SplashPag

Далее создаем 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 T

 Ссылка github на код :)

Tags:
Total votes 9: ↑6 and ↓3+3
Comments0

Articles