FlutterCardSwipe Card Swipe Animation Creating the swipe view as used in the Tinder.

Related tags

Open Source Apps FlutterCardSwipe
Overview

FlutterCardSwipe

Card Swipe Animation

Creating the swipe view as used in the Tinder. Swipe right is considered accepted and swipe left is rejected.It is a rebuild version of a UI design that I came across on Dribbble.

You can also checkout the flow of animation and steps to design it briefly at my medium article Tinder Swipe in Flutter

Demo

Card Swipe

Demo

Getting Started

Note: Make sure your Flutter environment is setup.

Installation

In the command terminal, run the following commands:

$ git clone https://github.com/geekruchika/FlutterCardSwipe.git
$ cd FlutterCardSwipe/animation_exp
$ flutter run

Simulate for iOS

Method One

Open the project in Xcode from ios/Runner.xcodeproj.
Hit the play button.

Method Two

Run the following command in your terminal.
$ open -a Simulator
$ flutter run

Simulate for Android

Make sure you have an Android emulator installed and running.
Run the following command in your terminal.
$ flutter run
Check out Flutter’s online documentation for help getting start with your Flutter Animation project.
You might also like...

A mobile video player, reader assistant, image mining workflow and card creation toolkit tailored for language learners. Allows text selection of subtitles for quick lookups and export to Anki with snapshot and audio for uninterrupted language immersion.

A mobile video player, reader assistant, image mining workflow and card creation toolkit tailored for language learners. Allows text selection of subtitles for quick lookups and export to Anki with snapshot and audio for uninterrupted language immersion.

jidoujisho A mobile video player, reader assistant, image mining workflow and card creation toolkit tailored for language learners. Latest GitHub Rele

Dec 27, 2022

A credit card scanner app made with flutter for both Android and IOS

credit_card_scanner A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you star

Oct 16, 2021

A credit card widget for Flutter application.

A credit card widget for Flutter application.

Flutter Credit Card A Flutter package allows you to easily implement the Credit card's UI easily with the Card detection. Preview Installing Add depen

Jan 8, 2023

We'll have a shop like this where we can add items to a cart in that card.

shop We'll have a shop like this where we can add items to a cart in that card. We can also delete such items. We'll have different pages. We can navi

Dec 7, 2021

A sample for creating a nice movie details page UI in Flutter.

A sample for creating a nice movie details page UI in Flutter.

What is it? Sample project for creating a beautiful movie details UI in Flutter. Read the blogpost here. All the related source code is located in the

Dec 19, 2022

A powerful Flutter chat UI component library and business logic for Tencent Cloud Chat, creating seamless in-app chat modules for delightful user experiences.

A powerful Flutter chat UI component library and business logic for Tencent Cloud Chat, creating seamless in-app chat modules for delightful user experiences.

style .button-9 { appearance: button; backface-visibility: hidden; background-color: #1d52d9; border-radius: 6px; border-width: 0; box-shadow: rgba(

Aug 11, 2023

Flutter 2.0 (Null safety) Basic, Dynamic & Silver style Staggered Grid views made using flutter staggered grid view package. 🦺

Flutter 2.0 (Null safety) Basic, Dynamic & Silver style Staggered Grid views made using flutter staggered grid view package. 🦺

Staggered Grid View Developement Stack Getting Started This project is a starting point for a Flutter application. A few resources to get you started

Oct 28, 2022

Open Source app to view Free resources available online.

Open Source app to view Free resources available online.

University Open Source app to view Free resources available online. The resources would be condesed into roadmaps provided by mentors skilled in their

Sep 3, 2022

This is a Flutter app which shows how to use the Reorderable List View in your app

reorderable_list_view A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you st

Oct 25, 2021
Comments
  • Stop gesture swiping and sort list

    Stop gesture swiping and sort list

    Greetings,

    I have two issues:

    FIRST:

    i want to remove the feature to swipe by gesture .. i tried to remove:

    GestureDetector()from the activeCard class .. but its still there

    how to remove this feature? i just want the animation to be on a button click .. no gesture

    SECOND:

    Also, i noticed that the first item in the list (activeCard) is actually the last item in the list .. since it's done like this:

    if (data.indexOf(item) == data.length - 1) {
                  return cardDemo();
                } else {
                  return cardDemoDummy();
                }

    how to make the first is the first item in the list or sort the items in the list in reverse?

    how to fix these two points? waiting for your reply. Thank you.

    opened by lamatat 1
  • Swiping by button or finger is different

    Swiping by button or finger is different

    How to make the "finger swipe" changing the data list like the "buttons swipe" (on the bottom) ?

    I just want to keep the last imageDecoration as first of the list (instead of last) but it gives me an error when I change: dismissImg() or addImg(img); by:

    var i = data.removeLast(); data.insert(0, i);

    opened by BeaumerF 0
Owner
Ruchika Gupta
Software Engineer Once a developer, always a developer🤓🤠
Ruchika Gupta
GitHub
Flutter Web application having splash screen and providing Web view Using web view packege.

Webview with Splash Screen in Flutter Flutter Web View With Splash Screen. Subscribe Our YouTube Channel. Visit Website Demo OutPut ?? Links Getting S

Habib ullah 1 Dec 7, 2021
To cure symptoms of various disease using medicines at home this app will act as guideline. Few animations are used and Firebase is used as database.

Medkit It's a Pharmacy application that help you in curing basic symptoms and diseases with medicines available in your home. How to Run Code Clone or

Muhammad Hamza 109 Dec 22, 2022
Stream sticker animation - Stream Sticker Animation using Rive

Stream Sticker Animation using Rive Sample Flutter project to demonstrate how to

Souvik Biswas 4 Feb 8, 2022
Splash Screen with liquid swipe effect!

liquid_swipe_intro A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you start

Flutter Boy 21 Dec 30, 2022
Halloween swipe page 🎃

Halloween Swipe page A Beautiful Swipe page use this source code in your project thank you ☺ Platform ios ✔️ android ✔️ Preview Development Setup Clon

Amirziya 12 Oct 24, 2022
This is an example app in which the backdrop can be expanded or contracted with a swipe gesture.

Swipe to Expand backdrop example Example app to demonstrate the ability to expand or contract backdrop using a swipe gesture Demo Installing Clone thi

Tushar Paliwal 2 Jul 24, 2020
A tutorial for creating an Ubuntu Linux Flutter app, using the yaru theme

Building a Yaru app with Flutter Summary URL https://github.com/ubuntu/user_manager Category Environment Linux Status Feedback Link Author Frederik Fe

Ubuntu 22 Dec 21, 2022
A Dart library for creating a Dart object to represent directory trees.

Directory Tree A Dart library for creating a Dart object to represent directory trees. Getting Started Import and initialize package import 'package:d

Chiziaruhoma Ogbonda 5 Dec 1, 2021
IIITB Hogwarts is a project which aims at increasing students' interest in creating projects and giving them a platform to share them with others.

IIITB-Hogwarts This is going to be fun project for our college students. Thinking of bringing Harry Potter style group division into college. This is

Kartik Pant 5 Nov 9, 2022
DChisel is simple Dart Framework for creating REST API

DChisel Dart Framework DChisel is simple Dart Framework for creating REST API Features Custom host server and port GET, POST, PUT, DELETE, PATCH Route

M Nasrul Alawy 23 Jan 6, 2023