Как добиться подобной навигации (gif) — Flutter?

Для реализации подобной навигации в Flutter, вы можете использовать пакет page_transition, который предоставляет различные анимации перехода между экранами.

Вот пошаговая инструкция, как достичь подобной навигации:

1. Установите пакет page_transition в вашем pubspec.yaml файле:

dependencies:
  flutter:
    sdk: flutter
  page_transition: ^2.0.0

2. В вашем файле, где вы определяете маршруты для навигации, импортируйте пакет page_transition:

import 'package:page_transition/page_transition.dart';

3. Определите функцию, которая будет обрабатывать навигацию с анимацией:

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

void navigateToNextScreen(BuildContext context) {
  Navigator.push(
    context,
    PageTransition(
      type: PageTransitionType.scale,
      alignment: Alignment.bottomCenter,
      duration: Duration(milliseconds: 500),
      child: NextScreen(), // Замените NextScreen() на ваш следующий экран
    ),
  );
}

4. Теперь вы можете использовать функцию navigateToNextScreen в вашей текущей странице, чтобы перейти на следующую страницу с анимацией:

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go to next screen'),
          onPressed: () {
            navigateToNextScreen(context);
          },
        ),
      ),
    );
  }
}

5. Обратите внимание на параметры type, alignment и duration, которые вы можете настроить в PageTransition. В данном примере была использована анимация масштабирования (PageTransitionType.scale), выравнивание по центру снизу (Alignment.bottomCenter) и продолжительность 500 миллисекунд.

6. Наконец, создайте новый файл для вашего следующего экрана (NextScreen), который будет отображаться при нажатии на кнопку:

class NextScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Next Screen'),
      ),
      body: Center(
        child: Text('This is the Next Screen'),
      ),
    );
  }
}

Теперь, при нажатии на кнопку "Go to next screen", вы увидите анимацию масштабирования и перейдете на следующий экран.

Надеюсь, это поможет вам достичь подобной навигации в вашем приложении на Flutter!