Flutter - 위젯의 부분 슬라이드 전환

Question

Container 뒤에 위젯이있는 아래의 애니메이션을 만들려고합니다.

: 아래의 GIF에 따라,

나는 클래스 Dismissible을 사용하려고하지만, 특정 지점에서 멈추지 않는다 자사의 애니메이션, 그것은 끝으로 이동하고 항목과 사라

코드를 SlideTransition 클래스에 삽입했지만 onHorizontalDragStart, onHorizontalDragUpdate, onHorizontalDragEnd을 통합하여 숨겨진 백 위젯과 예상되는 효과를 생성하는 방법을 모르겠습니다.

문제를 해결할 수 있도록 도와 주시겠습니까? ,

import 'package:flutter/material.dart'; 

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

class MyApp extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new MaterialApp(
     home: new MyHomePage(), 
    ); 
    } 
} 

class MyHomePage extends StatefulWidget { 
    @override 
    _MyHomePageState createState() => new _MyHomePageState(); 
} 

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin { 
    AnimationController _controller; 
    Animation<double> _animation; 
    bool _dragUnderway = false; 

    @override 
    void initState() { 
    _controller = new AnimationController(
     vsync: this, 
     duration: const Duration(milliseconds: 200), 
    ); 
    _animation = new CurvedAnimation(
     parent: _controller, 
     curve: new Interval(0.0, 1.0, curve: Curves.linear), 
    ); 
    _controller.reverse(); 
    super.initState(); 
    } 



    @override 
    Widget build(BuildContext context) { 
    return new Scaffold(
     appBar: new AppBar(), 
     body: new Center(
     child: new GestureDetector(
      //onHorizontalDragStart: , 
      //onHorizontalDragUpdate:, 
      //onHorizontalDragEnd: , 
      child: new SlideTransition(
      position: new Tween<Offset>(
       begin: Offset.zero, 
       end: const Offset(1.0, 0.0), 
      ).animate(_animation), 
      child: new Container(
       decoration: new BoxDecoration(
       border: new Border(
        top: new BorderSide(style: BorderStyle.solid, color: Colors.black26), 
        bottom: new BorderSide(style: BorderStyle.solid, color: Colors.black26), 
       ) 
      ), 
       padding: new EdgeInsets.only(top: 20.0, bottom: 20.0), 
       child: new Row(
       mainAxisAlignment: MainAxisAlignment.center, 
       crossAxisAlignment: CrossAxisAlignment.center, 
       children: <Widget>[ 
        new Text('foo'),     
       ], 
      ), 
      ), 
     ) 
     ) 
    ), 
    ); 
    } 
} 

Answer 1

나는 해결책을 찾을 수 아래의 코드와 데모 다음과 같습니다 :

하면 화면과 함께 아래의 코드를 따라

import 'package:flutter/material.dart'; 

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

class MyApp extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new MaterialApp(
     home: new MyHomePage(), 
    ); 
    } 
} 

class MyHomePage extends StatefulWidget { 
    @override 
    _MyHomePageState createState() => new _MyHomePageState(); 
} 

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin { 
    AnimationController _controller; 
    Animation<double> _animation; 

    void initState() { 
    super.initState(); 
    _controller = new AnimationController(duration: 
     const Duration(milliseconds: 246), vsync: this); 

    _animation = new CurvedAnimation(
     parent: _controller, 
     curve: new Interval(0.0, 1.0, curve: Curves.linear), 
    ); 
    } 

    void _move(DragUpdateDetails details) { 
    final double delta = details.primaryDelta/304; 
    switch (Directionality.of(context)) { 
     case TextDirection.rtl: 
     _controller.value += delta; 
     break; 
     case TextDirection.ltr: 
     _controller.value -= delta; 
     break; 
    } 
    } 

    void _handleDragEnd(DragEndDetails details) { 
    bool _isFlingGesture = -details.velocity.pixelsPerSecond.dx > 700; 

    if (_isFlingGesture) { 
     final double flingVelocity = details.velocity.pixelsPerSecond.dx; 
     _controller.fling(velocity: flingVelocity.abs() * 0.003333); 
    } else if (_controller.value < 0.4) { 
     _controller.reverse(); 
    } else { 
     _controller.forward(); 
    } 
    } 

    @override 
    Widget build(BuildContext context) { 
    return new Scaffold(
     appBar: new AppBar(), 
     body: new Center(
     child: new GestureDetector(
      onHorizontalDragUpdate: _move, 
      onHorizontalDragEnd: _handleDragEnd, 
      child: new Stack(
      children: <Widget>[ 
       new Positioned.fill(   
       child: new Row(
        mainAxisAlignment: MainAxisAlignment.end, 
        children: <Widget>[ 
        new Container(
         decoration: new BoxDecoration(
         color: Colors.black38, 
         border: new Border(
          top: new BorderSide(style: BorderStyle.solid, color: Colors.black12), 
          bottom: new BorderSide(style: BorderStyle.solid, color: Colors.black12), 
         ), 
        ), 
         child: new IconButton(       
         padding: new EdgeInsets.only(top: 16.0, bottom: 16.0, left: 24.0, right: 24.0), 
         icon: new Icon(Icons.thumb_up), 
         color: new Color(0xFFFFFFFF), 
         onPressed:() {}, 
        ) 
        ), 
        new Container(
         decoration: new BoxDecoration(
         color: Colors.black54, 
         border: new Border(
          top: new BorderSide(style: BorderStyle.solid, color: Colors.black12), 
          bottom: new BorderSide(style: BorderStyle.solid, color: Colors.black12), 
         ), 
        ), 
         child: new IconButton(       
         padding: new EdgeInsets.only(top: 16.0, bottom: 16.0, left: 24.0, right: 24.0), 
         icon: new Icon(Icons.edit), 
         color: new Color(0xFFFFFFFF), 
         onPressed:() {}, 
        ) 
        ), 
        new Container(
         decoration: new BoxDecoration(
         color: new Color(0xFFE57373), 
         border: new Border(
          top: new BorderSide(style: BorderStyle.solid, color: const Color(0xFFE57373)), 
          bottom: new BorderSide(style: BorderStyle.solid, color: const Color(0xFFE57373)), 
         ), 
        ), 
         child: new IconButton(       
         padding: new EdgeInsets.only(top: 16.0, bottom: 16.0, left: 24.0, right: 24.0), 
         icon: new Icon(Icons.delete), 
         color: new Color(0xFFFFFFFF), 
         onPressed:() {}, 
        ) 
        ), 
        ], 
       ), 
      ), 
       new SlideTransition(
       position: new Tween<Offset>(
        begin: Offset.zero, 
        end: const Offset(-0.6, 0.0), //controls the opening of the slice 
       ).animate(_animation), 
       child: new Container(
        decoration: new BoxDecoration(
        border: new Border(
         top: new BorderSide(style: BorderStyle.solid, color: Colors.black26), 
         bottom: new BorderSide(style: BorderStyle.solid, color: Colors.black26), 
        ), 
        color: new Color(0xFFFFFFFF), 
       ), 
        padding: new EdgeInsets.only(top: 20.0, bottom: 20.0), 
        child: new Row(
        mainAxisAlignment: MainAxisAlignment.center, 
        crossAxisAlignment: CrossAxisAlignment.center, 
        children: <Widget>[ 
         new Text('foo'), 
        ], 
       ), 
       ), 
      ),       
      ], 
     ) 
     ) 
    ), 
    ); 
    } 
} 

을