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

Question

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

我创建了两个屏幕，屏幕-1和屏幕-2。在屏幕上-1，我有一个容器小部件。我已将小部件包装在GestureDetector内，并且尝试使用垂直手势拖动到屏幕-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小部件会容易得多。这是demo video。

ab12ab12-12ab-34cd-56ef-1234abcd5678