Метод 1: использование AnimatedContainer

import 'package:flutter/material.dart';
class NavigatorAnimation extends StatefulWidget {
  @override
  _NavigatorAnimationState createState() => _NavigatorAnimationState();
}
class _NavigatorAnimationState extends State<NavigatorAnimation> {
  double _width = 200.0;
  void _toggleWidth() {
    setState(() {
      _width = _width == 200.0 ? 300.0 : 200.0;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Navigator Animation'),
      ),
      body: Center(
        child: AnimatedContainer(
          duration: Duration(milliseconds: 500),
          width: _width,
          height: 100.0,
          color: Colors.blue,
          child: FlatButton(
            child: Text(
              'Toggle Width',
              style: TextStyle(color: Colors.white),
            ),
            onPressed: _toggleWidth,
          ),
        ),
      ),
    );
  }
}
void main() {
  runApp(MaterialApp(
    home: NavigatorAnimation(),
  ));
}

Метод 2: использование AnimatedOpacity

import 'package:flutter/material.dart';
class NavigatorAnimation extends StatefulWidget {
  @override
  _NavigatorAnimationState createState() => _NavigatorAnimationState();
}
class _NavigatorAnimationState extends State<NavigatorAnimation> {
  bool _isVisible = true;
  void _toggleVisibility() {
    setState(() {
      _isVisible = !_isVisible;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Navigator Animation'),
      ),
      body: Center(
        child: AnimatedOpacity(
          opacity: _isVisible ? 1.0 : 0.0,
          duration: Duration(milliseconds: 500),
          child: FlatButton(
            color: Colors.blue,
            textColor: Colors.white,
            onPressed: _toggleVisibility,
            child: Text('Toggle Visibility'),
          ),
        ),
      ),
    );
  }
}
void main() {
  runApp(MaterialApp(
    home: NavigatorAnimation(),
  ));
}

Метод 3: использование AnimatedCrossFade

import 'package:flutter/material.dart';
class NavigatorAnimation extends StatefulWidget {
  @override
  _NavigatorAnimationState createState() => _NavigatorAnimationState();
}
class _NavigatorAnimationState extends State<NavigatorAnimation> {
  bool _isFirst = true;
  void _toggleState() {
    setState(() {
      _isFirst = !_isFirst;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Navigator Animation'),
      ),
      body: Center(
        child: AnimatedCrossFade(
          duration: Duration(milliseconds: 500),
          firstChild: FlatButton(
            color: Colors.blue,
            textColor: Colors.white,
            onPressed: _toggleState,
            child: Text('First State'),
          ),
          secondChild: FlatButton(
            color: Colors.red,
            textColor: Colors.white,
            onPressed: _toggleState,
            child: Text('Second State'),
          ),
          crossFadeState:
              _isFirst ? CrossFadeState.showFirst : CrossFadeState.showSecond,
        ),
      ),
    );
  }
}
void main() {
  runApp(MaterialApp(
    home: NavigatorAnimation(),
  ));
}

Это всего лишь несколько примеров того, как можно создавать анимацию навигатора во Flutter. Помните, что существует множество способов добиться подобных эффектов, и вы можете настроить их в соответствии со своими конкретными требованиями.