flutter左右滑动出现按钮

Flutter中可以使用GestureDetector和Animation结合来实现左右滑动出现按钮的效果。

首先，使用GestureDetector来监听滑动手势。可以通过设置onHorizontalDragUpdate来获取滑动的偏移量，并通过动画控制器控制按钮的出现与隐藏。在动画控制器的动画更新里，可以通过setState来改变按钮的位置。

以下是一个示例代码：

import 'package:flutter/material.dart';

class SlideButtonPage extends StatefulWidget {
  @override
  _SlideButtonPageState createState() => _SlideButtonPageState();
}

class _SlideButtonPageState extends State<SlideButtonPage>
    with SingleTickerProviderStateMixin {
  Animation<double> _animation;
  AnimationController _animationController;

  double _dragOffset = 0.0;
  double _buttonWidth = 80.0;
  double _maxSlideWidth = 120.0;

  @override
  void initState() {
    super.initState();

    _animationController =
        AnimationController(duration: Duration(milliseconds: 200), vsync: this);

    _animation = Tween<double>(
      begin: _buttonWidth,
      end: 0.0,
    ).animate(_animationController)
      ..addListener(() {
        setState(() {});
      });
  }

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

  void _handleDragUpdate(DragUpdateDetails details) {
    _dragOffset += details.delta.dx;

    if (_dragOffset < 0.0) {
      _dragOffset = 0.0;
    } else if (_dragOffset > _maxSlideWidth) {
      _dragOffset = _maxSlideWidth;
    }

    _animationController.value = _dragOffset / _maxSlideWidth;
  }

  void _handleDragEnd(DragEndDetails details) {
    if (_animationController.value < 0.5) {
      _animationController.reverse();
    } else {
      _animationController.forward();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Slide Button'),
      ),
      body: GestureDetector(
        onHorizontalDragUpdate: _handleDragUpdate,
        onHorizontalDragEnd: _handleDragEnd,
        child: Stack(
          children: [
            Container(
              width: MediaQuery.of(context).size.width,
              height: 100.0,
              color: Colors.grey[300],
            ),
            Positioned(
              top: 0.0,
              right: _animation.value - _buttonWidth,
              child: Container(
                width: _buttonWidth,
                height: 100.0,
                color: Colors.red,
                child: Icon(
                  Icons.delete,
                  color: Colors.white,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们使用Stack来实现按钮的叠加效果，一个是背景容器，另一个是通过Positioned来控制位置的按钮容器。通过计算dragOffset的值来更新按钮的位置，在松开手指时根据动画控制器的值来决定是否展示按钮。