Flutter Card Swipe Animation

Related tags

Animation 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 Flutter library for gradually painting SVG path objects on canvas (drawing line animation).

A Flutter library for gradually painting SVG path objects on canvas (drawing line animation).

drawing_animation From static SVG assets See more examples in the showcasing app. Dynamically created from Path objects which are animated over time m

Dec 27, 2022

A Flutter app with flip animation to view profiles of friends. 🌟

A Flutter app with flip animation to view profiles of friends. 🌟

Flip View Made with 🔥 in India This flutter app is based on the design made Dmytro Prudnikov for Yalantis on Dribble.He describes the design as: Just

Sep 23, 2022

Timer UI animation challenge from 'Flutter Animations Masterclass'

stopwatch_flutter An IOS stopwatch challenge from Flutter Animations Masterclass - Full Course What I learned; Use timer Use ticker Create custom shap

Jan 4, 2023

🐱‍👤 Flutter-Animation 🔥 🔥 List Animated Staggered Animations

🐱‍👤 Flutter-Animation 🔥 🔥 List Animated Staggered Animations

🐱‍👤 Staggered Animations made with algeria ❤

Nov 22, 2022

Flutter Animation 🐱‍👤 Made with algeria By DZ-TM071

Flutter Animation 🐱‍👤 Made with algeria By DZ-TM071

Flutter Animation 🐱‍👤 Made with algeria By DZ-TM071

Oct 23, 2022

Flutter Animation 🐱‍👤 Made with algeria 🖤

Flutter Animation 🐱‍👤 Made with algeria 🖤

Flutter-awesome-login-page-animated-fastCode 🐱‍👤 Fast code and awesome design-ui for Login Page ! 🔥 Getting Started # First you need to add simple_

Oct 24, 2022

Flutter Animation - Grocery App UI

Flutter Animation - Grocery App UI

Flutter Animation - Grocery App UI

Jan 5, 2023

Flutter Animation liquid 🐱‍👤 Made with algeria By DZ-TM071

Flutter Animation liquid 🐱‍👤 Made with algeria By DZ-TM071

Flutter Animated Loading liquid progress 🚀 🔥 🔥 screen screen # Usage First you need to add liquid_progress_indicator 0.4.0 Or + in the dependency a

Jan 10, 2022

RGB animation with Flutter

RGB animation with Flutter

RGB Flutter - Method Channel RGB Uma aplicação demonstrando a ideia das cores com RGB (0 - 255) gerando uma efeito em background da cor usando os Slid

Oct 15, 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 Card Swipe Animation

FlutterCardSwipe Card Swipe Animation Creating the swipe view as used in the Tinder. Swipe right is considered accepted and swipe left is rejected.It

Ruchika Gupta 521 Jan 8, 2023
Flutter animation tutorials, such common animation, flare animation.

❤️ Star ❤️ the repo to support the project or ?? Follow Me.Thanks! Facebook Page Facebook Group QQ Group Developer Flutter Open Flutter Open 963828159

Flutter开源社区 123 Sep 3, 2022
Flutter animation tutorials, such common animation, flare animation.

❤️ Star ❤️ the repo to support the project or ?? Follow Me.Thanks! Facebook Page Facebook Group QQ Group Developer Flutter Open Flutter Open 963828159

Flutter开源社区 123 Sep 3, 2022
A widget for stacking cards, which users can swipe horizontally and vertically with beautiful animations.

A widget for stacking cards, which users can swipe horizontally and vertically with beautiful animations.

HeavenOSK 97 Jan 6, 2023
A Flutter library that makes animation easer. It allows for separation of animation setup from the User Interface.

animator This library is an animation library for Flutter that: makes animation as simple as the simplest widget in Flutter with the help of Animator

MELLATI Fatah 225 Dec 22, 2022
A simple animated circular menu for Flutter, Adjustable radius, colors, alignment, animation curve and animation duration.

A simple animated circular menu for Flutter, Adjustable radius, colors, alignment, animation curve and animation duration. pub package Getting Started

Hasan Mohammed 91 Dec 20, 2022
Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's heart when you like something and animation effects to increase like count.

like_button Language: English | 中文简体 Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's h

FlutterCandies 357 Dec 27, 2022
BKash-Ballance-Animation - BKash Ballance Animation For Flutter

BKash-Ballance-Animation before clone the GitHub repository please give a star o

Blackshadow Software Ltd 11 Sep 1, 2022
Fisherman-Fishing-Animation - Fisherman Fishing Animation With Flutter

Fisherman Fishing Animation before clone the GitHub repository please give a sta

Blackshadow Software Ltd 9 Oct 27, 2022
Fade animation - Add fade animation to your app easily

fade_animation Add fade animation to your app easily using simple_animations pac

Mazouzi Aymene 3 Oct 6, 2022