如何按照垂直拖动操作的方向从底部淡入新屏幕？

Question

我需要按照自定义材质小部件上垂直拖动的方向，从屏幕底部导航到具有淡入动画的新屏幕。

我创建了两个屏幕，屏幕-1 和屏幕-2。在屏幕 - 1 上，我有一个容器小部件。我已将小部件包装在 GestureDetector 内，并尝试在垂直拖动时导航到 screen - 2，我正在使用 GestureDetector.onVerticalDrag 属性。

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/':(context) => ScreenOne(),
        '/two': (context) => ScreenTwo(),
      },
      title: 'Screens',
    );
  }
}

class ScreenOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen-1'),
      ),
      body: GestureDetector(
        onVerticalDragStart: (DragStartDetails details){
          Navigator.pushNamed(context, '/two');
        },
              child: Container(
          margin: EdgeInsets.all(8.0),
          color: Colors.red,
        ),
      ),
    );
  }
}

class ScreenTwo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen-2'),
      ),
      body: Center(
        child: Text('Screen-2'),
      ),
    );
  }
}

您能帮我实现预期的过渡吗？我附上 GIF 以供参考。

Answer 1

如果您不介意使用 PageView，那么使用它和 Opacity 小部件会更容易。这是演示视频。

import 'package:flutter/material.dart';

class TestView extends StatefulWidget {
  @override
  _TestViewState createState() => _TestViewState();
}

class _TestViewState extends State<TestView> {
  PageController pageController;
  double panPosition = 1; // dummy value prevents division with 0
  double deviceHeight;

  void updatePageState() {
    setState(() {
      panPosition =
          pageController.position.pixels.abs(); // updates pan position
    });
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    pageController = PageController(
      keepPage: true,
    );
    pageController
        .addListener(updatePageState); // add listener to page controller.
  }

  @override
  Widget build(BuildContext context) {
    deviceHeight =
        MediaQuery.of(context).size.height; //get device screen height
    return Scaffold(
      backgroundColor: Colors.white,
      body: PageView(
        controller: pageController,
        scrollDirection: Axis.vertical, //vertical scroll
        children: <Widget>[
          Opacity(
            // opacity handles the transition effect
            opacity: 1 - (panPosition / deviceHeight),
            //first screen opacity goes from 1 to 0
            child: ScreenOne(),
          ),
          Opacity(
            opacity: (panPosition / deviceHeight),
            //first screen opacity goes from 0 to 1
            child: ScreenTwo(
              title: "this title is from parent widget.",
            ),
          )
        ],
      ),
    );
  }
}

class ScreenOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen-1'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Container(
            height: 96,
            color: Colors.red,
          )
        ],
      ),
    );
  }
}

class ScreenTwo extends StatelessWidget {
  final String title;

  const ScreenTwo({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text(title),
      ),
    );
  }
}