A package for flip panel with built-in animation

Overview

Flip Panel

pub package

A package for flip panel with built-in animation

How to use

import 'package:flip_panel/flip_panel.dart';

Create a flip panel from iterable source:

final digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

FlipPanel.builder(
    itemBuilder: (context, index) => Container(
       color: Colors.black,
       padding: const EdgeInsets.symmetric(horizontal: 6.0),
       child: Text(
         '${digits[index]}',
         style: TextStyle(
             fontWeight: FontWeight.bold,
             fontSize: 50.0,
             color: Colors.white),
       ),
     ),
    itemsCount: digits.length,
    period: const Duration(milliseconds: 1000),
    loop: 1,
)

Create a flip panel from stream source:

FlipPanel<int>.stream(
      itemStream: Stream.periodic(Duration(milliseconds: 1000), (count) => count % 10),
      itemBuilder: (context, value) => Container(
        color: Colors.black,
        padding: const EdgeInsets.symmetric(horizontal: 6.0),
        child: Text(
          '$value',
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 50.0,
            color: Colors.white
          ),
        ),
      ),
      initValue: 0,
  );
Comments
  • reverseCountdown doesn't stop at zero

    reverseCountdown doesn't stop at zero

    FlipClock.reverseCountdown doesn't stop at zero mark, and also don't run alert function when countdown is done

    DateTime now = DateTime.now();
    DateTime debugTime = DateTime(
            now.year, now.month, now.day, now.hour, now.minute, now.second + 10);
    
    FlipClock.reverseCountdown(
                duration: _duration,
                digitColor: Colors.white,
                backgroundColor: Colors.black,
                digitSize: 35.0,
                
                flipDirection: FlipDirection.down,
                borderRadius: const BorderRadius.all(Radius.circular(3.0)),
                onDone: alert(),
              ),
    
    alert() {
        print('Done');
      }
    

    How to fix this?

    opened by Cypher-XI 3
  • FlipClock.simple positioned at bottom of parent container always

    FlipClock.simple positioned at bottom of parent container always

    I would like to modify the height of the parent container to remove the padding around the Simple FlipClock, but if I resize the parent container it does not reposition the clock panel. Is there a way to do this?

    The following code produces the image attached in the issue: screenshot 2019-01-22 at 10 19 41

    Container(
          height: 220,
            color: Colors.yellow,
            child: Center(
              child: FlipClock.simple(
                startTime: DateTime.now(),
                digitColor: Colors.white,
                backgroundColor: Colors.red,
                digitSize: 48.0,
                borderRadius: const BorderRadius.all(Radius.circular(3.0)),
              ),
            ),
          ),
    
    opened by danielhakimi 3
  • FlipPanel.stream not updating properly when using a ticker provider mixin

    FlipPanel.stream not updating properly when using a ticker provider mixin

    It's possible that I'm just completely failing to use streams correctly, but I think this might actually be a bug.

    Expected behavior: FlipPanel increments up by 1 every 2 seconds. Ticker drives animation controller, using a status listener to update an integer and adding it to the stream (calling setState appropriately) every time the duration ends (also restarts AnimationController), every 2 seconds. Flip panel receives each new number as it is added to the StreamController, and updates accordingly

    Actual behavior: All of the above happens (the counter updates correctly and everything) except the FlipPanel flips... and shows the same number over and over. However if the FAB (also hooked up to update the counter) is pressed, the Flip panel suddenly jumps to the correct number before continuing to show that new number over and over until the button is pressed enough.

    I have a larger app having this issue, but I have reduced it down to a basic flutter app with a single FlipPanel to demonstrate the bug and hopefully this code will help others replicate it. Here is a gist of the main dart file: https://gist.github.com/cnsumner/fc96857beb33429629821fb7a3ff3fd0

    Just create a new flutter app and paste that code into the dart file (and add flip_panel: ^0.0.9 to your pubspec of course).

    Any help would be appreciated, I'm going crazy trying to fix this.

    opened by cnsumner 2
  • Please fix the padding issue in ReverseCountDown

    Please fix the padding issue in ReverseCountDown

    Hi Hung,

    Thanks for making this great package....Saved a lot of time for me.

    Please fix the reverseCountdown function. Padding in this function is by deafult set to 180.

    Please change the padding at line no 282

    padding: const EdgeInsets.only(top: 180.0)
    

    To

    padding: const EdgeInsets.only(top: 3.0)
    // Change 180 to anything you want.
    
    opened by kadarsh11 1
  • FlipClock.countdown not updating

    FlipClock.countdown not updating

    I am using FlipClock in my current Flutter project. I'm displaying a Countdown with

    FlipClock.countdown(
             duration: remainingTime,
             digitColor: loopWhite,
             backgroundColor: loopDarkBlue,
             digitSize: 25.0,
    );
    

    This is working well, but when i change the state of remainingTime the FlipClock does not update to the new Duration. Can you point me in some direction?

    Kind Regards

    opened by chwzr 1
  • Pause/Resume functionality!

    Pause/Resume functionality!

    Hello,

    I am very new to Flutter and found this great flip panel, first of all thanks for the hard work it seems to work excellent. However, I think an important functionality to start with a method, pause & resume seems to be missing, at least to me :)

    question 
    opened by gokhanbaydar 1
  • Fix minor dart analysis problem (take 2)

    Fix minor dart analysis problem (take 2)

    I realized my previous PR accidentally introduced another analysis error (FlipClock.countdown() constructor and also a field called "countdown" so I changed it to "countdownMode"). Apologies! This PR fixes that. I also fixed a few other minor analysis warnings while I was there and then ran dartfmt.

    opened by efortuna 1
  • Fix small analysis error

    Fix small analysis error

    I realized my previous PR accidentally introduced another analysis error (FlipClock.countdown() constructor and also a field called "countdown" so I changed it to "countdownMode"). Apologies! This PR fixes that. I also fixed a few other minor analysis warnings while I was there and then ran dartfmt.

    opened by efortuna 0
  • I would love to have a day counter

    I would love to have a day counter

    Such as - start with date x. From that date:

    "Today i have 00 years, 10 months, 05 days, 03 hours" with the counter above the title (like the reverse countdown) - no ":"

    Can i do that with this plugin, or can you help include that? Thank you!

    opened by jackieoh1 0
  • More realistic look and smoother animations

    More realistic look and smoother animations

    1. Added gradient colors for panel to create more realistic look of surfaces (white background).
    2. Added additional shadows for panels during the animation (inner shadow for upper panel, and external shadow for lower).
    3. Changed animation curves to: Curves.easeIn for 1st part of animaion, Curves.bounceIn for the 2nd.

    With all these changes FlipClock.simple currently looks like this: example

    Work to be done:

    1. Haven't tested with another types except FlipClock.simple. Maybe some additional edits may be required.
    2. Dynamic setting for backgroundColor is broken, since this value is getting replaced by the gradient I've added.
    opened by emvaized 5
Owner
HungHD
Full-stack mobile developer (Android, iOS, Flutter).
HungHD
Flutter - Special animated flip card

special_card Flutter UI Design | Animated Flip Card. Demo for the app: animated-flip-card.mp4 Getting Started This project is a starting point for a F

Ulfhrafn 2 Dec 4, 2022
Responsive Admin Panel or Dashboard using Flutter

Responsive Admin Panel or Dashboard using Flutter

Abu Anwar 5.5k Dec 29, 2022
A flutter package that contains a collection of icon decoration tools (i.e. gradient, opacity) and icon transition features with cool animation effects.

Advanced Icon A flutter package that contains a collection of icon decoration tools (i.e. gradient, opacity) and icon transition features with cool an

Ankit Mishra 8 Dec 24, 2021
A Flutter package consisting of pre animated cards(containers) with fluid animation for freely adding user customized cards to the app with heavy customizable options adding up to an incredible UI experience

A Flutter package consisting of pre animated cards(containers) with fluid animation for freely adding user customized cards to the app with heavy customizable options adding up to an incredible UI experience

Shantanu 12 Dec 30, 2022
The app to demo animation with Flutter by implement Facebook reactions

Facebook Reactions Animation Description The app to demo animation with Flutter by implement Facebook reactions. Watch the demo video for more clarity

Duy Tran 318 Jan 8, 2023
Flutter Beautiful Login Page design and Animation - day 12

Flutter Beautiful Login Page design and Animation - day 12

Mohammad Rahmani 296 Jan 1, 2023
A customizable timer builder, with controller, animation, intervals, callbacks and custom actions for Flutter.

Custom Timer ⌛ A highly customizable timer builder, with controller, animation, intervals, callbacks, custom actions, and more! ?? Simple Usage @overr

Federico De Sía 27 Nov 23, 2022
Flutter Animation - Grocery App UI

Flutter Animation - Grocery App UI Packages we are using: flutter_svg: link goole_fonts: link Fonts Poppins link creating a custom animation Grocery A

null 1 Feb 14, 2022
An app built using Flutter that holds buttons in form of xylophone which plays as instrument when clicked.

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

dev_allauddin 3 Feb 3, 2022
E-Commerce App built in flutter

flutter_ecommerce_app E-Commerce app is a design implementaion of E-commerce App designed by Imran Download App Android Screenshots HomePage Product D

Sonu Sharma 2.5k Jan 3, 2023
An Ecommerce application built in Flutter using Firebase.

Flutter-Commerce An Ecommerce application built in Flutter using Firebase. Getting started Project setup instructions are given at Wiki section. Scree

Ashish Rawat 423 Dec 31, 2022
Instagram social network interface in a responsive built using flutter

Responsive Instagram ?? Responsive Instagram foi um projeto realizado com o intuito de aprendizagem e prática da linguagem de programação Dart em conj

null 3 Jun 11, 2022
A complete Flutter E-Commerce Book Store application built using firebase as backend.

ecommerce A complete Flutter E-Commerce Book Store application built using firebase as backend. Features Add or remove item in cart Search products Ad

Fateh Singh 58 Sep 30, 2022
A Messenger UI built in Flutter

A chat messenger Chat Messenger built in Flutter Getting Started For help getting started with Flutter, view our online documentation. Compatibility A

nitin mehta 80 Mar 31, 2022
Netflix Clone UI Built Using Flutter

Netflix Clone UI - Flutter Web & Mobile: IOS | Android Web Version with Flutter!

Luan Batista 16 Dec 13, 2022
An E-Commerce application built with Flutter and FakeStoreAPI.

pinkshop A basic dummy E-Commerce Application developed using Flutter. This is a model of a E-Shopping app designed with flutter. This app has been im

Rahul Prakash 1 Jan 7, 2022
Steam Client UI, built with Flutter

SteamClient Proto An UI-only Steam client app, for fun. Getting Started This app is built with Flutter (dev branch). It is inspired by Steam mobile ap

Quan Pham 23 Sep 16, 2022
Coffe Shop Finder App UI Built With Flutter

Coffe Shop Finder App UI Built With Flutter

tustoz 9 Sep 22, 2022
An e-commerce app built with Flutter

shopy A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this is

Matiullah Karimi 7 Sep 6, 2022