hnvn / flutter_flip_panel Goto Github PK

View Code? Open in Web Editor NEW

609.0 609.0 86.0 1.14 MB

A package for flip panel with built-in animation

License: BSD 3-Clause "New" or "Revised" License

Java 1.06% Objective-C 2.10% Dart 96.84%

animation-3d dart flutter

flutter_flip_panel's Introduction

Hi there 👋

Thank you for taking the time to visit my github website.

This is my 😄: https://profile-summary-for-github.com/user/hnvn
Mail me 📫: [email protected]

flutter_flip_panel's People

Contributors

Stargazers

Watchers

Forkers

ryanfu matrixdekoder jiashilei-1985 sadaks-me diegslva winterdl repoforks luisrain cyberghost007 efortuna suresh44t raacker trendingtechnology gsunit peerwaya toanphung shoxter rshrc rbtmarques nidhishpp curryft molibyte tylorvan fanlen ignertic jaredlees jazzbpn elynch303 zyzhangyu ydetective smallblackbeans anakcoding haftomfseha asvgithub01 rohitkumar2691 wood2lin liuchuancong attawit justinmccombs mingsai mclarencollege jasonofua jaitjacob kriyenkp bingmatch woyang quantienixa bulaimu sarojadhikari410 emvaized ajzuse gaoliaoliao t42ji2ji morristech sobergod ayoubamine flutter-robert iscity-app cpsanpedro phamdinhhai0810 a7me63azzab sayyidisal xuantung95 mrgithub pablo384 touficzayed pjmdr11 weiminghuaa berkanaslan zhongchangcheng elvis-sarfo kriacoesmobile iamaryanshandilya opadaaljondi david-macharia chauvansang1997 thinhlh basnetjiten mnnlthmpsn gmjgh bagasstrongman omar-alshyokh sarathi475 chakradeb

flutter_flip_panel's Issues

FlipClock countdown decrease more than 1 second each second

hi
i have a strange problem
when i run my code, the flipclock runs countdown correctly
then when i scroll horizontal listview to the end, when i scroll the list view again to the start point, i see that the countdown interval is 2 seconds

when i repeat this action the interval increases to 3, 4, 5 and ...

here is my code

  getAuctionProducts() async {
    // Animations
    controller = new AnimationController(vsync: this, duration: Duration(milliseconds: 2000));
    opacity = Tween(begin: 0.0, end: 1.0).animate(new CurvedAnimation(parent: controller, curve: Curves.easeInOut));

    if (await checkInternetConnection() == true) {
      GetData getData = new GetData();
      getData.get(AuctionsJsonLocation).then((dynamic result) {
        if (result['data'] != null && result['data'] != '') {
          for (var auctionProductItem in getData.jsonToMap(result['data'])['result']) {
            auctionProductItems.add(
              GestureDetector(
                child: Container(
                  width: 180,
                  margin: EdgeInsets.all(4),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    border: Border.all(
                      color: Color(0xFFCCCCCC),
                    ),
                    borderRadius: BorderRadius.all(Radius.circular(5)),
                  ),
                  child: Column(
                    children: <Widget>[
                      Stack(alignment: Alignment.topLeft, children: [
                        Container(
                          width: 180,
                          height: 135,
                          child: ClipRRect(
                            borderRadius: new BorderRadius.vertical(top: Radius.circular(5)),
                            child: CachedNetworkImage(
                              imageUrl: auctionProductItem['image'],
                              placeholder: Container(
                                alignment: Alignment.center,
                                width: 20,
                                height: 20,
                                child: CircularProgressIndicator(
                                  valueColor: AlwaysStoppedAnimation<Color>(Color(0xFFCCCCCC)),
                                ),
                              ),
                              errorWidget: Icon(Icons.error),
                              fit: BoxFit.cover,
                            ),
                          ),
                        ),
                        Directionality(
                          textDirection: TextDirection.ltr,
                          child: Padding(
	                          padding: EdgeInsets.all(2.0),
	                          child: FlipClock.countdown(
		                          width: 14,
		                          height: 18,
		                          spacing: EdgeInsets.all(1),
		                          duration: Duration(seconds: ((auctionProductItem['auctionExpireDate'] - auctionProductItem['now']) % 86400)),
		                          digitColor: Color(0xFFFFFFFF),
		                          backgroundColor: Color(0xCC000000),
		                          digitSize: 12.0,
		                          borderRadius: const BorderRadius.all(Radius.circular(2.0)),
                            ),
                          ),
                        ),
                      ]),
                      Container(
                        height: 35,
                        child: Padding(
                          padding: const EdgeInsets.symmetric(vertical: 2, horizontal: 5.0),
                          child: RichText(
                            text: TextSpan(text: auctionProductItem['title'], style: TextStyle(color: Colors.black, fontFamily: "IranYekan")),
                            maxLines: 2,
                            textAlign: TextAlign.start,
                          ),
                        ),
                      ),
                      auctionProductItem['oldPrice'] > 0
                          ? Container(
                              height: 20,
                              child: Text(
                                numberFormat(auctionProductItem['oldPrice']) + ' تومان',
                                textAlign: TextAlign.start,
                                style: TextStyle(color: Color(0xFFb71e3f), decorationStyle: TextDecorationStyle.dashed),
                              ),
                            )
                          : Container(),
                      Container(
                        height: 20,
                        child: Text(
                          numberFormat(auctionProductItem['price']) + ' تومان',
                          textAlign: TextAlign.start,
                          style: TextStyle(color: Colors.green, decorationStyle: TextDecorationStyle.dashed),
                        ),
                      ),
                    ],
                  ),
                ),
                onTap: () {
                  print('You Tapped Product ' + auctionProductItem['id'].toString());
                },
              ),
            );
          }

          setState(() {
            auctionProducts = FadeTransition(
              opacity: opacity,
              child: Column(
                children: <Widget>[
                  headingTitle(
                    text: 'پیشنهاد شگفت انگیز',
                    color: Color(0xFFb71e3f),
                    backgroundColor: Color(0xFFfff2d7),
                    icon: Icon(FontAwesomeIcons.percent_regular, color: Color(0xFFb71e3f), size: 16),
                  ),
                  Container(
                    height: 220,
                    child: ListView(
                      shrinkWrap: true,
                      scrollDirection: Axis.horizontal,
                      children: auctionProductItems,
                    ),
                  ),
                ],
              ),
            );
          });
        }
      });
    } else {
      showAlert(context: context, title: "خطا در اتصال به اینترنت", description: "دستگاه خود را به اینترنت متصل کنید", actions: <Widget>[
        FlatButton(
          child: Text('دوباره سعی کن'),
          onPressed: () {
            getSliders();
            Navigator.of(context, rootNavigator: true).pop();
          },
        ),
        FlatButton(
          child: Text('خروج'),
          onPressed: () {
            exit(0);
          },
        ),
      ]);
    }
  }

Can't Restart Count Down Clock

Trying to use a restart button to restart the clock

 var startTime;
    void _restartTimer() async{
      startTime = DateTime.now();
      setState(() {});
    }
    return Material(
        child: Column(
          children: <Widget>[
            Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    padding: const EdgeInsets.all(8.0),
                    margin: const EdgeInsets.symmetric(horizontal: 8.0),
                    child: FlipClock.countdown(
                      startTime: startTime,
                      duration: Duration(minutes: model.durationMin, seconds: model.durationSec),
                      digitColor: Colors.white,
                      backgroundColor: Colors.black,
                      digitSize: 48.0,
                      borderRadius: const BorderRadius.all(Radius.circular(3.0)),
                      onDone: () => print('Done'),
                    ),
                  ),
                  IconButton(onPressed: _restartTimer, icon: Icon(Icons.refresh))
                ]
            )
     ......

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

how to make days in count down?

I want to show days but when I pass more than one day give me 24 hour and start count down from 24 i want to show days beside hours how to make it ?

Support for horizontal transitions

I'm wondering how hard it would be to extend the library to create horizontal animations, similar to a book.

can i help you firends

There is a ruthless please. I just want to write a countdown effect. It is the effect of this kind of product countdown. For example **天：**时：**分：**秒. This countdown effect. I just got in touch with flutter and found that there is no flutter package. Now I have this need. Can i helps write one. Greatful!

reverse countdown does not show more than 99 days.

I am using counter till November 2020, it should display 200+ days left.
But it's not showing more than 99 days.

Can't alter color on dark mode change

The problem I'm facing at the moment is that the seconds panel will change color on the second... but the minute and hour panels take their respective times to flip. How can I get around this? I've tried to flush the page, I've tried to set the duration shorted momentarily (set to 1 second for all panels) but none of it worked.

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!

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 :)

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.

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:

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)),
          ),
        ),
      ),

onDone is not working

When the timer hit 0:0 onDone does not print any thing

Remove white line in FlibClock.countdown item

Hello,
I need help or make a property to show or hide this white line in item

Flip panel doesn't repaint while in background

Hello,

I've created a simple page with FlipPanel that uses streams to display to countdown timer value:

I've also created another page which is a full screen dialog that covers the main page:

whenever I go back to the main page the FlipPanel doesn't repaints properly in accordance to the events that took place while it was in the background:

Only when a foreground event takes place the FlipPanel repaints properly:

The whole application code:

import 'package:flip_panel/flip_panel.dart';
import 'package:flutter/material.dart';
import 'package:rxdart/subjects.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CountdownProvider(
      child: MaterialApp(
        title: 'Flip Panel Demo',
        theme: ThemeData(primarySwatch: Colors.lightGreen),
        home: MainPage(),
      ),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final countdown = CountdownProvider.of(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Main Page'),
      ),
      body: Column(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              TimeFlipDigit(
                stream: countdown.tensSecondDigitStream,
                initial: countdown.tensSecondDigit,
              ),
              SizedBox(width: 10),
              TimeFlipDigit(
                stream: countdown.onesSecondDigitStream,
                initial: countdown.onesSecondDigit,
              ),
            ],
          ),
          StreamBuilder(
            stream: countdown.stream,
            builder: (context, snapshot) {
              return snapshot.hasData
                  ? Text(snapshot.data.toString())
                  : SizedBox();
            },
          ),
          RaisedButton(
            color: Theme.of(context).accentColor,
            child: Text('Navigate to other page'),
            onPressed: () {
              Navigator.of(context).push(
                MaterialPageRoute(
                  fullscreenDialog: true,
                  builder: (context) => SubPage(),
                ),
              );
            },
          )
        ],
      ),
    );
  }
}

class SubPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final countdown = CountdownProvider.of(context);
    return Scaffold(
      appBar: AppBar(title: Text('Sub page')),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          StreamBuilder(
            stream: countdown.stream,
            builder: (context, snapshot) {
              return snapshot.hasData
                  ? Text(snapshot.data.toString())
                  : SizedBox();
            },
          ),
          Text('Wait for tens second to change then go back'),
        ],
      ),
    );
  }
}

class CountdownProvider extends InheritedWidget {
  CountdownProvider({
    Key key,
    @required Widget child,
  })  : assert(child != null),
        super(key: key, child: child) {
    _subject.addStream(Countdown(Duration(seconds: 59)).stream);

    _tensSecondDigitSubject
        .addStream(_subject.map<int>((d) => (d.inSeconds % 60) ~/ 10));
    _onesSecondDigitSubject
        .addStream(_subject.map<int>((d) => (d.inSeconds % 60) % 10));
  }

  final _subject = BehaviorSubject<Duration>();
  final _tensSecondDigitSubject = BehaviorSubject<int>();
  final _onesSecondDigitSubject = BehaviorSubject<int>();

  Stream<Duration> get stream => _subject.stream;

  Stream<int> get tensSecondDigitStream => _tensSecondDigitSubject.stream;

  Stream<int> get onesSecondDigitStream => _onesSecondDigitSubject.stream;

  int get tensSecondDigit => _tensSecondDigitSubject.value ?? 0;

  int get onesSecondDigit => _tensSecondDigitSubject.value ?? 0;

  static CountdownProvider of(BuildContext context) =>
      context.inheritFromWidgetOfExactType(CountdownProvider);

  @override
  bool updateShouldNotify(InheritedWidget _) => false;
}

class Countdown {
  Countdown(
    this.duration, {
    this.frequency = const Duration(seconds: 1),
  });

  final Duration duration;
  final Duration frequency;

  Duration _remaining;

  Duration get remaining => _remaining;

  Stream<Duration> get stream async* {
    _remaining = duration;
    while (_remaining >= const Duration()) {
      yield _remaining;
      _remaining -= frequency;
      await Future.delayed(frequency);
    }
  }
}

class TimeFlipDigit extends StatelessWidget {
  final Stream<int> stream;
  final int initial;

  const TimeFlipDigit({
    Key key,
    @required this.stream,
    this.initial = 0,
  })  : assert(stream != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return FlipPanel<int>.stream(
      itemStream: stream,
      initValue: initial,
      direction: FlipDirection.down,
      itemBuilder: (context, value) {
        return Container(
          width: 46,
          height: 72,
          decoration: BoxDecoration(
            color: Colors.lightGreen,
            borderRadius: BorderRadius.horizontal(
              left: Radius.circular(3),
              right: Radius.circular(3),
            ),
          ),
          child: Center(
            child: Text(
              '$value',
              style: Theme.of(context).textTheme.display2,
              textAlign: TextAlign.center,
            ),
          ),
        );
      },
    );
  }
}

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?

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)

padding: const EdgeInsets.only(top: 3.0)
// Change 180 to anything you want.