title: How to create a Tinder-like stacked card in flutter?
body: <p>I want to create swipeable tinder-like cards in flutter which can call some function on left or right swipe but it seems too complicated to do so in Flutter. Right now I have implemented the functionality using list view builder with Dismissible which is working as expected and I can update the list via API call while the user is swiping but UI doesn't look that appealing because the card doesn't rotate while dismissing horizontally. I have read many blog posts before posting here and while some of them give an idea to achieve this but it is not possible to update the list in the background with those techniques like using a stack to create a deck of cards as in this example. <a href="https://github.com/geekruchika/FlutterCardSwipe" rel="nofollow noreferrer">https://github.com/geekruchika/FlutterCardSwipe</a></p>
  
  <p>Here's my current code relevant to swiping.</p>
  
  <pre><code>import 'package:flutter/material.dart';
  import 'package:provider/provider.dart';
  
  
  import 'loader.dart';
  import '../screens/profile_overview.dart';
  import '../providers/user.dart';
  
  class SwipeProfiles extends StatefulWidget {
    final double deviceHeight;
    final double deviceWidth;
    SwipeProfiles(this.deviceHeight, this.deviceWidth);
    @override
    _SwipeProfilesState createState() =&gt; _SwipeProfilesState();
  }
  
  class _SwipeProfilesState extends State&lt;SwipeProfiles&gt; {
    List _profiles = [];
    bool _isLoading = true;
    bool _gettingMoreProducts = false;
  
    _loadMoreProfiles() async {
      print('Reached end of list');
      if (_gettingMoreProducts) {
        print('Already getting products');
        return;
      }
      print('Firestore function called');
      _gettingMoreProducts = true;
      dynamic newProfiles =
          await Provider.of&lt;User&gt;(context, listen: false).getProfiles();
      _profiles.addAll(newProfiles);
      setState(() {});
      print('New Products added');
      _gettingMoreProducts = false;
    }
  
    @override
    void initState() {
      print('Getting new products from init state');
      Provider.of&lt;User&gt;(context, listen: false).getProfiles().then((profiles) {
        setState(() {
          _profiles = profiles;
          _isLoading = false;
        });
      });
      super.initState();
    }
  
    @override
    Widget build(BuildContext context) {
      return Container(
          margin: EdgeInsets.all(10),
          height: widget.deviceHeight * 0.75,
          decoration: BoxDecoration(borderRadius: BorderRadius.circular(10)),
          child: _isLoading
              ? Loader()
              : ListView.builder(
                  itemCount: _profiles.length,
                  itemBuilder: (context, index) {
                    if (index == _profiles.length - 1) {
                      _loadMoreProfiles();
                    }
                    return Dismissible(
                      key: UniqueKey(),
                      onDismissed: (direction) {
                        setState(() {
                          _profiles.removeAt(index);
                        });
                      },
                      background: Container(
                        color: Colors.red,
                        child: Icon(
                          Icons.cancel,
                          color: Colors.white,
                          size: 50,
                        ),
                      ),
                      secondaryBackground: Container(
                        color: Colors.green,
                        child: Icon(
                          Icons.check,
                          color: Colors.white,
                          size: 50,
                        ),
                      ),
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: ProfileOverview(_profiles[index],
                            widget.deviceHeight, widget.deviceWidth),
                      ),
                    );
                  },
                ));
    }
  }
  
  </code></pre>