如何让这个页面交易对flutter产生影响

Question

如何让这个页面在flutter上产生交易效果

例子：

instagram stories

Answer 1

编辑
使用包https://pub.dev/packages/swipedetector，您可以检测 SwipeDown
并在 OnSwipeDown() 中使用 PageRouteBuilder

执行您的路线更改逻辑

SwipeDetector(
    child: ... //You Widget Tree here
    ),
    onSwipeUp: () {
        setState(() {
            _swipeDirection = "Swipe Up";
        });
    },
    onSwipeDown: () {
        setState(() {
            _swipeDirection = "Swipe Down";
        });
    },
    onSwipeLeft: () {
      setState(() {
        _swipeDirection = "Swipe Left";
      });
    },
    onSwipeRight: () {
      setState(() {
        _swipeDirection = "Swipe Right";
      });
    },
)

请使用 PageRouteBuilder 构建动画
完整代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
        onGenerateRoute: (RouteSettings settings) {
          switch (settings.name) {
            case '/':
              return SlideRightRoute(widget:HomePage());
              break;
            case '/second':
              return SlideRightRoute(widget:SecondHome());
              break;
          }
        }
    );
  }
}


class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: new Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
          child: Text('Second Home'),
        ),
      ),
    );
  }
}
class SecondHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Home'),
      ),
      body: new Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

class SlideRightRoute extends PageRouteBuilder {
  final Widget widget;
  SlideRightRoute({this.widget})
      : super(
    pageBuilder: (BuildContext context, Animation<double> animation,
        Animation<double> secondaryAnimation) {
      return widget;
    },
    transitionsBuilder: (BuildContext context,
        Animation<double> animation,
        Animation<double> secondaryAnimation,
        Widget child) {
      return new SlideTransition(
        position: new Tween<Offset>(
          begin: const Offset(1.0, 0.0),
          end: Offset.zero,
        ).animate(animation),
        child: child,
      );
    },
  );
}