deck card

readme.md

deck card

Created with <3 with dartpad.dev.

main.dart

// Copyright 2020 the Dart project authors. All rights reserved.
// Use of this source code is governed by a BSD-style license
// that can be found in the LICENSE file.

import 'package:flutter/material.dart';
import 'package:flutter/physics.dart';

main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: PhysicsCardDragDemo(),
    ),
  );
}

class PhysicsCardDragDemo extends StatefulWidget {
  @override
  PhysicsCardDragDemoState createState() => PhysicsCardDragDemoState();
}

class PhysicsCardDragDemoState extends State<PhysicsCardDragDemo> {
  final listContainer = List.generate(3, (e) {
    num p = e + 1;
    print(e);
    return Transform.translate(
      offset: Offset(50.0 * e, 0.0),
      child: Container(
        width: 100.0,
        height: 100.0,
        color: Colors.green.withOpacity(.33 * p),
        child: Center(
          child: Text('Box $p'),
        ),
      ),
    );
  });
  int number = 0;
  var _dragAlignment = Alignment.topCenter;

  Widget current = Center();
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
        appBar: AppBar(
          title: const Text('A draggable card!'),
        ),
        body: GestureDetector(
//           onPanDown: (details){
//             current = listContainer.last;
//           },
            onPanUpdate: (details) {
//               print(size.width);
//               print(details.delta.dx);
              if (100.0 > details.localPosition.dx) {
                print('LOH! ${details.localPosition.dx}');
                var temp = listContainer.last;
                listContainer.removeLast();
                listContainer.insert(0, temp);
                current = listContainer.last;
                
                _dragAlignment = Alignment.topCenter;
                setState((){});
                return;
              }
              setState(() {
                _dragAlignment += Alignment(
                    details.delta.dx / (size.width / 2),
//                   details.delta.dy / (size.height / 2),
                    0.0);
              });
            },
            onTap: () {
              number++;
              current = listContainer.last;
              setState(() {
                var temp = listContainer.last;
//                 listContainer.removeLast();
//                 listContainer.insert(0, temp);
              });
            },
            child: Stack(children: [
              ...listContainer,
              Align(alignment: _dragAlignment, child: current)
            ])

//       const DraggableCard(
//         child: FlutterLogo(
//           size: 128,
//         ),
//       ),
            ));
  }
}

class DraggableCard extends StatefulWidget {
  final Widget child;

  const DraggableCard({required this.child});

  @override
  State<DraggableCard> createState() => _DraggableCardState();
}

class _DraggableCardState extends State<DraggableCard>
    with SingleTickerProviderStateMixin {
  AnimationController? _controller;
  Alignment _dragAlignment = Alignment.center;
  Animation<Alignment>? _animation;

  void _runAnimation(Offset pixelsPerSecond, Size size) {
    _animation = _controller!.drive(
      AlignmentTween(
        begin: _dragAlignment,
        end: Alignment.center,
      ),
    );

    final unitsPerSecondX = pixelsPerSecond.dx / size.width;
    final unitsPerSecondY = pixelsPerSecond.dy / size.height;
    final unitsPerSecond = Offset(unitsPerSecondX, unitsPerSecondY);
    final unitVelocity = unitsPerSecond.distance;

    const spring = SpringDescription(
      mass: 30,
      stiffness: 1,
      damping: 1,
    );

    final simulation = SpringSimulation(spring, 0, 1, -unitVelocity);

    _controller!.animateWith(simulation);
  }

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);

    _controller!.addListener(() {
      setState(() {
        _dragAlignment = _animation!.value;
      });
    });
  }

  @override
  void dispose() {
    _controller!.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return GestureDetector(
      onPanDown: (details) {
        _controller!.stop();
      },
      onPanUpdate: (details) {
        print(size.width);
        print(details.delta.dx);
        setState(() {
          _dragAlignment = Alignment(
            details.delta.dx / (size.width / 2),
            details.delta.dy / (size.height / 2),
          );
        });
      },
      onPanEnd: (details) {
        //_runAnimation(details.velocity.pixelsPerSecond, size);
      },
      child: Align(
        alignment: _dragAlignment,
        child: Card(
          child: widget.child,
        ),
      ),
    );
  }
}