Flutter中的高级屏幕动画(如Instagram故事导航pop)？

import 'package:flutter/material.dart';

class StoryNavigationPage extends StatefulWidget {
  @override
  _StoryNavigationPageState createState() => _StoryNavigationPageState();
}

class _StoryNavigationPageState extends State<StoryNavigationPage>
    with SingleTickerProviderStateMixin {
  PageController _pageController;
  AnimationController _animationController;
  double _currentPageValue = 0.0;

  @override
  void initState() {
    super.initState();
    _pageController = PageController();
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 500),
    );
    _animationController.addListener(() {
      setState(() {
        _currentPageValue = _animationController.value;
      });
    });
  }

  @override
  void dispose() {
    _pageController.dispose();
    _animationController.dispose();
    super.dispose();
  }

  void _navigateToNextPage() {
    if (_currentPageValue.floor() < _pageController.page.round()) {
      _animationController.forward(from: 0.0);
    } else {
      _animationController.reverse(from: 1.0);
    }
    _pageController.nextPage(
      duration: Duration(milliseconds: 500),
      curve: Curves.easeInOut,
    );
  }

  void _navigateToPreviousPage() {
    if (_currentPageValue.floor() > _pageController.page.round()) {
      _animationController.reverse(from: 1.0);
    } else {
      _animationController.forward(from: 0.0);
    }
    _pageController.previousPage(
      duration: Duration(milliseconds: 500),
      curve: Curves.easeInOut,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Instagram Story Navigation'),
      ),
      body: Stack(
        children: [
          PageView(
            controller: _pageController,
            onPageChanged: (index) {
              setState(() {
                _currentPageValue = index.toDouble();
              });
            },
            children: [
              Container(color: Colors.red),
              Container(color: Colors.blue),
              Container(color: Colors.green),
              // Add more pages as needed
            ],
          ),
          Positioned(
            top: 0,
            bottom: 0,
            left: 0,
            right: 0,
            child: GestureDetector(
              onVerticalDragUpdate: (details) {
                if (details.delta.dy > 0) {
                  _navigateToPreviousPage();
                } else if (details.delta.dy < 0) {
                  _navigateToNextPage();
                }
              },
              child: Container(
                color: Colors.transparent,
              ),
            ),
          ),
          Positioned(
            bottom: 16.0,
            left: 0,
            right: 0,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                for (int i = 0; i < 3; i++)
                  if (_currentPageValue.floor() == i)
                    StoryNavigationDot(
                      isActive: true,
                      animationValue: _currentPageValue - i,
                    )
                  else if (_currentPageValue.floor() - i == -1)
                    StoryNavigationDot(
                      isActive: true,
                      animationValue: _currentPageValue - i + 1,
                    )
                  else if (_currentPageValue.floor() - i == 1)
                    StoryNavigationDot(
                      isActive: true,
                      animationValue: _currentPageValue - i - 1,
                    )
                  else
                    StoryNavigationDot(isActive: false),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class StoryNavigationDot extends StatelessWidget {
  final bool isActive;
  final double animationValue;

  const StoryNavigationDot({
    Key key,
    this.isActive = false,
    this.animationValue = 0.0,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 300),
      margin: EdgeInsets.symmetric(horizontal: 4.0),
      width: isActive ? 12.0 : 8.0,
      height: isActive ? 12.0 : 8.0,
      decoration: BoxDecoration(
        color: isActive ? Colors.white : Colors.grey,
        borderRadius: BorderRadius.circular(isActive ? 12.0 : 8.0),
        boxShadow: [
          if (isActive)
            BoxShadow(
              color: Colors.black.withOpacity(0.3),
              blurRadius: 2.0 + 4.0 * animationValue,
            ),
        ],
      ),
    );
  }
}