A Flutter widget that easily adds the flipping animation to any widget

Overview

flip_card PRs Welcome Pub Package

A component that provides a flip card animation. It could be used for hiding and showing details of a product.

How to use

import 'package:flip_card/flip_card.dart';

Create a flip card. The card will flip when touched

FlipCard(
  fill: Fill.fillBack, // Fill the back side of the card to make in the same size as the front.
  direction: FlipDirection.HORIZONTAL, // default
  front: Container(
        child: Text('Front'),
    ),
    back: Container(
        child: Text('Back'),
    ),
);

You can also configure the card to only flip when desired by using a GlobalKey to toggle the cards (not recommended):

GlobalKey<FlipCardState> cardKey = GlobalKey<FlipCardState>();

@override
Widget build(BuildContext context) {
  return FlipCard(
    key: cardKey,
    flipOnTouch: false,
    front: Container(
      child: RaisedButton(
        onPressed: () => cardKey.currentState.toggleCard(),
        child: Text('Toggle'),
      ),
    ),
    back: Container(
      child: Text('Back'),
    ),
  );
}

Recommended way to flip the card to avoid creating GlobalKeys:

FlipCardController _controller;

@override
void initState() {
  super.initState();
  _controller = FlipCardController();
}

child: FlipCard(
  controller: _controller,
)

void doStuff() {
  // Flip the card a bit and back to indicate that it can be flipped (for example on page load)
  _controller.hint(
    duration: UIConfig.projectFlipHintDuration,
    total: UIConfig.projectFlipHintTotal,
  );

  // Tilt the card a bit (for example when hovering)
  _controller.hint(
    duration: UIConfig.projectFlipHintDuration,
    total: UIConfig.projectFlipHintTotal,
  );

  // Flip the card programmatically
  _controller.toggleCard();
}
Comments
  • Add constructor option to build the card with the back face

    Add constructor option to build the card with the back face

    Hey!

    Your library is very useful and the animation is really nice, thanks for sharing your work. :+1:

    I had one suggestion: would it be possible to add a new parameter to the FlipCard() widget to enable the card displaying the back face while first being built? Sometimes, I need to re-create a whole page of my application using a past state, and being able to initialize the card based on its previous state would be pretty useful.

    What do you think?

    enhancement 
    opened by Delgan 13
  • glitches with back container if apply Transform.rotate for FlipCard

    glitches with back container if apply Transform.rotate for FlipCard

    I wanted to add swiping Flip card with applying translation and rotation, like in tinder/badoo, but when I added rotation animation I get glitches with back widget(containerwith setuped color). Also reproducable with simple text. Work for both as on emulator as real device. I tried to add image for as back widget and did not get glitches. photo_2020-02-29_23-02-05 code sample

     GestureDetector(
        onHorizontalDragEnd: (DragEndDetails details) {
            total_x_offset = 0;
            rotation_angle = 0; 
            _redraw();
            cardKey.currentState.toggleCard();
        },
    
        onHorizontalDragUpdate: (DragUpdateDetails details) {
            total_x_offset += details.primaryDelta;
            rotation_angle = total_x_offset / 400;
            _redraw();
        },
    
        child: Container(
            child: Transform.rotate(
                key: cardKey,
                angle: rotation_angle,
                child: FlipCard(  
                    front: Container( width: 100, height: 100, color: Colors.blue),
                    back:  Container( width: 100, height: 100, color: Colors.yellow),
                )
            )
        )
     )
    
    opened by Vasya-M 7
  • Modify: controller connection part

    Modify: controller connection part

    Description

    Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.

    Fixes # (issue)

    Type of change

    Please delete options that are not relevant.

    • [x] Bug fix (non-breaking change which fixes an issue)

    How Has This Been Tested?

    I tested it on my own project. You need to move the controller connection logic to the build function.

    • [x] Self Code Review
    • [x] Tested on example project

    Checklist:

    • [x] My code follows the style guidelines of this project
    • [x] I have performed a self-review of my own code
    • [x] My changes generate no new warnings

    Comment

    At first, when the coupon list screen was folded and unfolded, a bug was found that the controller could not be connected, so it was moved to the build function to clarify the connection of the controller.

    opened by lwbvv 6
  • Removed unused file which blocked null safety

    Removed unused file which blocked null safety

    For some reason, a previous commit renamed the controller file without deleting the old one. This triggered the null-safety check to fail even though the package was already ready for sound null safety.

    bug enhancement 
    opened by ciriousjoker 6
  • On the web, clicking turns the entire window and causes an error

    On the web, clicking turns the entire window and causes an error

    I don't know if my code is wrong, or it is a library error, please clarify this for me, but I have a list where when I click, it seems that the whole screen turns around and causes an error

    image image

    Another exception was thrown: RuntimeError: memory access out of bounds

    Code: image

    Code CardArmaBack:

    import 'dart:math' as math; import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'package:valorant_brasil/data/model/arma_model.dart'; import 'package:valorant_brasil/theme/colors_theme.dart'; import 'package:valorant_brasil/theme/text_theme.dart';

    class CardArmaBack extends StatelessWidget { final Armas arma; CardArmaBack(this.arma); @override Widget build(BuildContext context) { return Container( height: 250, child: Stack(children: [ Container( child: Transform( alignment: Alignment.center, transform: Matrix4.rotationY(math.pi), child: Container( decoration: BoxDecoration( image: DecorationImage( image: NetworkImage( 'https://raw.githubusercontent.com/kauemurakami/valorant-br-api/master/images/armas/${arma.nome.toLowerCase()}.png'), fit: BoxFit.cover), ), ), ), ), Container( margin: EdgeInsets.only(left: 24.0), width: Get.width, child: Column( mainAxisSize: MainAxisSize.min, children: [ Container( padding: EdgeInsets.only(top: 8.0, right: 8.0), width: Get.width, child: Text( arma.descricao, style: bannerArmaBack, ), ), Container( margin: EdgeInsets.only(top: 8.0), height: 30, width: Get.width, child: Row( mainAxisAlignment: MainAxisAlignment.start, children: [ Container( width: 80, decoration: BoxDecoration( border: Border.all(width: 1, color: mainColor)), child: Center( child: Text( 'Distรขncia', style: TextStyle(color: mainColor), ))), Expanded( child: ListView.builder( scrollDirection: Axis.horizontal, itemCount: arma.distncia.length, itemBuilder: (context, index) { return Container( height: 70, width: 80, decoration: BoxDecoration( border: Border.all(width: 1, color: mainColor)), child: Center( child: Text( arma.distncia[index], style: TextStyle(color: mainColor), ), )); }), ), ], ), ), Container( height: 30, width: Get.width, child: Row( mainAxisAlignment: MainAxisAlignment.start, children: [ Container( width: 80, decoration: BoxDecoration( border: Border.all(width: 1, color: mainColor)), child: Center( child: Text( 'Cabeรงa', style: TextStyle(color: mainColor), ))), Expanded( child: ListView.builder( scrollDirection: Axis.horizontal, itemCount: arma.dano.length, itemBuilder: (context, index) { return Container( height: 70, width: 80, decoration: BoxDecoration( border: Border.all( width: 1, color: mainColor)), child: Center( child: Text(arma.dano[index].cabeca, style: TextStyle(color: mainColor)))); }), ), ])), Container( height: 30, width: Get.width, child: Row( mainAxisAlignment: MainAxisAlignment.start, children: [ Container( width: 80, decoration: BoxDecoration( border: Border.all(width: 1, color: mainColor)), child: Center( child: Text( 'Corpo', style: TextStyle(color: mainColor), ))), Expanded( child: ListView.builder( scrollDirection: Axis.horizontal, itemCount: arma.dano.length, itemBuilder: (context, index) { return Container( height: 70, width: 80, decoration: BoxDecoration( border: Border.all( width: 1, color: mainColor)), child: Center( child: Text( arma.dano[index].corpo, style: TextStyle(color: mainColor), ))); }), ), ])), Container( height: 30, width: Get.width, child: Row( mainAxisAlignment: MainAxisAlignment.start, children: [ Container( width: 80, decoration: BoxDecoration( border: Border.all(width: 1, color: mainColor)), child: Center( child: Text( 'Pernas', style: TextStyle(color: mainColor), ))), Expanded( child: ListView.builder( scrollDirection: Axis.horizontal, itemCount: arma.dano.length, itemBuilder: (context, index) { return Container( height: 70, width: 80, decoration: BoxDecoration( border: Border.all( width: 1, color: mainColor)), child: Center( child: Text( arma.dano[index].pernas, style: TextStyle(color: mainColor), ))); }), ) ])), ], ), ), ]), ); } }

    opened by kevin4dhd 6
  • Switch the value of the isFront variable at the end of the animation instead of in the toggleCard method

    Switch the value of the isFront variable at the end of the animation instead of in the toggleCard method

    The value switcher in the toggleCard method

    setState(() { isFront = !isFront; });

    should instead be placed where the animation is completed or dismissed. Indeed, when the toggle animation is triggered, the isFront boolean value changes even if the animation is not finished and it could be problematic for code relying on that variable.

    bug help wanted 
    opened by loicsacre 6
  • fix wrong animation in flutter web

    fix wrong animation in flutter web

    in flutter web the start of animation shows a small flipped card, and it is not erased. Changing the transform fixes the problem.

    This is the wrong animation Screen Capture on 2019-11-05 at 10-20-09

    BTW, it works good in flutter desktop ๐Ÿ‘

    opened by ignaciotcrespo 6
  • FlipCard throws exception if container not constrained

    FlipCard throws exception if container not constrained

    I have a very simple flip card that is throwing an exception:

    I'm expecting the flip card to size itself to the content.

    The real content I'm looking to use is an expanding card and as such the size of the flip card needs change with the expanding card does.

    
    
    class ContactCard extends StatelessWidget
    
      @override
      Widget build(BuildContext context) {
        return Container(child: FlipCard(direction: FlipDirection.HORIZONTAL,
            front: buildFront(),
            back: buildBack()
          ),
            );
      }
    
      Widget buildBack()
      {
        return Container( child:Text("Back"), height: 100);
      }
    
      Widget buildFront()
      {
        return Container( child:Text("Front"), height: 100);
      }
    
    }
    

    The card is throwing the following exception:

    Performing hot reload...
    Syncing files to device Android SDK built for x86...
    I/flutter ( 4871): โ•โ•โ•ก EXCEPTION CAUGHT BY RENDERING LIBRARY โ•žโ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•
    I/flutter ( 4871): The following assertion was thrown during performLayout():
    I/flutter ( 4871): BoxConstraints forces an infinite height.
    I/flutter ( 4871): These invalid constraints were provided to RenderIgnorePointer's layout() function by the following
    I/flutter ( 4871): function, which probably computed the invalid constraints in question:
    I/flutter ( 4871):   RenderStack.performLayout (package:flutter/src/rendering/stack.dart:510:15)
    I/flutter ( 4871): The offending constraints were:
    I/flutter ( 4871):   BoxConstraints(w=411.4, h=Infinity)
    I/flutter ( 4871): 
    I/flutter ( 4871): When the exception was thrown, this was the stack:
    I/flutter ( 4871): #0      BoxConstraints.debugAssertIsValid.<anonymous closure>.throwError (package:flutter/src/rendering/box.dart:507:9)
    I/flutter ( 4871): #1      BoxConstraints.debugAssertIsValid.<anonymous closure> (package:flutter/src/rendering/box.dart:550:21)
    I/flutter ( 4871): #2      BoxConstraints.debugAssertIsValid (package:flutter/src/rendering/box.dart:554:6)
    I/flutter ( 4871): #3      RenderObject.layout (package:flutter/src/rendering/object.dart:1536:24)
    I/flutter ( 4871): #4      RenderStack.performLayout (package:flutter/src/rendering/stack.dart:510:15)
    I/flutter ( 4871): #5      RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #6      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
    I/flutter ( 4871): #7      RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #8      _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
    I/flutter ( 4871): #9      RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #10     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
    I/flutter ( 4871): #11     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #12     RenderStack.performLayout (package:flutter/src/rendering/stack.dart:510:15)
    I/flutter ( 4871): #13     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #14     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
    I/flutter ( 4871): #15     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #16     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
    I/flutter ( 4871): #17     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #18     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
    I/flutter ( 4871): #19     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #20     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
    I/flutter ( 4871): #21     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #22     RenderSliverList.performLayout (package:flutter/src/rendering/sliver_list.dart:165:27)
    I/flutter ( 4871): #23     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #24     RenderSliverPadding.performLayout (package:flutter/src/rendering/sliver_padding.dart:181:11)
    I/flutter ( 4871): #25     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #26     RenderViewportBase.layoutChildSequence (package:flutter/src/rendering/viewport.dart:406:13)
    I/flutter ( 4871): #27     RenderViewport._attemptLayout (package:flutter/src/rendering/viewport.dart:1334:12)
    I/flutter ( 4871): #28     RenderViewport.performLayout (package:flutter/src/rendering/viewport.dart:1252:20)
    I/flutter ( 4871): #29     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #30     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
    I/flutter ( 4871): #31     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #32     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
    I/flutter ( 4871): #33     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #34     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
    I/flutter ( 4871): #35     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #36     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
    I/flutter ( 4871): #37     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #38     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
    I/flutter ( 4871): #39     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #40     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
    I/flutter ( 4871): #41     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #42     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
    I/flutter ( 4871): #43     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #44     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
    I/flutter ( 4871): #45     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #46     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
    I/flutter ( 4871): #47     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #48     RenderPositionedBox.performLayout (package:flutter/src/rendering/shifted_box.dart:392:13)
    I/flutter ( 4871): #49     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #50     MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:142:11)
    I/flutter ( 4871): #51     _ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.dart:443:7)
    I/flutter ( 4871): #52     MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:212:7)
    I/flutter ( 4871): #53     RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:356:14)
    I/flutter ( 4871): #54     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #55     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
    I/flutter ( 4871): #56     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #57     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
    I/flutter ( 4871): #58     _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1214:11)
    I/flutter ( 4871): #59     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #60     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
    I/flutter ( 4871): #61     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #62     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
    I/flutter ( 4871): #63     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #64     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
    I/flutter ( 4871): #65     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #66     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
    I/flutter ( 4871): #67     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #68     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
    I/flutter ( 4871): #69     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #70     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
    I/flutter ( 4871): #71     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #72     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
    I/flutter ( 4871): #73     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #74     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
    I/flutter ( 4871): #75     RenderOffstage.performLayout (package:flutter/src/rendering/proxy_box.dart:3076:13)
    I/flutter ( 4871): #76     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #77     RenderStack.performLayout (package:flutter/src/rendering/stack.dart:510:15)
    I/flutter ( 4871): #78     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #79     __RenderTheatre&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
    I/flutter ( 4871): #80     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #81     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
    I/flutter ( 4871): #82     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #83     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
    I/flutter ( 4871): #84     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #85     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
    I/flutter ( 4871): #86     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #87     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
    I/flutter ( 4871): #88     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #89     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
    I/flutter ( 4871): #90     RenderObject.layout (package:flutter/src/rendering/object.dart:1619:7)
    I/flutter ( 4871): #91     RenderView.performLayout (package:flutter/src/rendering/view.dart:151:13)
    I/flutter ( 4871): #92     RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1496:7)
    I/flutter ( 4871): #93     PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:765:18)
    I/flutter ( 4871): #94     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:346:19)
    I/flutter ( 4871): #95     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:701:13)
    I/flutter ( 4871): #96     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:285:5)
    I/flutter ( 4871): #97     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1016:15)
    I/flutter ( 4871): #98     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:958:9)
    I/flutter ( 4871): #99     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.scheduleWarmUpFrame.<anonymous closure> (package:flutter/src/scheduler/binding.dart:784:7)
    I/flutter ( 4871): #101    _Timer._runTimers (dart:isolate-patch/timer_impl.dart:382:19)
    I/flutter ( 4871): #102    _Timer._handleMessage (dart:isolate-patch/timer_impl.dart:416:5)
    I/flutter ( 4871): #103    _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:172:12)
    I/flutter ( 4871): (elided one frame from package dart:async-patch)
    I/flutter ( 4871): 
    I/flutter ( 4871): The following RenderObject was being processed when the exception was fired: RenderStack#2e82f relayoutBoundary=up11 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
    I/flutter ( 4871):   creator: Stack โ† Listener โ† _GestureSemantics โ† RawGestureDetector โ† GestureDetector โ† FlipCard โ†
    I/flutter ( 4871):     Container โ† ContactCard โ† FractionalTranslation โ† SlideTransition โ† Stack โ† Listener โ† โ‹ฏ
    I/flutter ( 4871):   parentData: <none> (can use size)
    Reloaded 3 of 619 libraries in 259ms.
    I/flutter ( 4871):   constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=Infinity)
    I/flutter ( 4871):   size: MISSING
    I/flutter ( 4871):   alignment: AlignmentDirectional.topStart
    I/flutter ( 4871):   textDirection: ltr
    I/flutter ( 4871):   fit: expand
    I/flutter ( 4871):   overflow: clip
    I/flutter ( 4871): This RenderObject had the following descendants (showing up to depth 5):
    I/flutter ( 4871):     child 1: RenderIgnorePointer#6912a NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    I/flutter ( 4871):       child: RenderTransform#daf87 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    I/flutter ( 4871):         child: RenderConstrainedBox#e7f9f NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    I/flutter ( 4871):           child: RenderParagraph#0936e NEEDS-LAYOUT NEEDS-PAINT
    I/flutter ( 4871):             text: TextSpan
    I/flutter ( 4871):     child 2: RenderIgnorePointer#d2321 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    I/flutter ( 4871):       child: RenderTransform#b0f27 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    I/flutter ( 4871):         child: RenderConstrainedBox#fe06f NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    I/flutter ( 4871):           child: RenderParagraph#fb2b6 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    I/flutter ( 4871):             text: TextSpan
    I/flutter ( 4871): โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•
    I/flutter ( 4871): Another exception was thrown: RenderBox was not laid out: RenderStack#2e82f relayoutBoundary=up11 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    I/flutter ( 4871): Another exception was thrown: RenderBox was not laid out: RenderPointerListener#9f8a0 relayoutBoundary=up10 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    I/flutter ( 4871): Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#3fa65 relayoutBoundary=up9 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    I/flutter ( 4871): Another exception was thrown: BoxConstraints forces an infinite height.
    I/flutter ( 4871): Another exception was thrown: RenderBox was not laid out: RenderStack#34d05 relayoutBoundary=up11 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    I/flutter ( 4871): Another exception was thrown: RenderBox was not laid out: RenderPointerListener#77e43 relayoutBoundary=up10 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    I/flutter ( 4871): Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#62268 relayoutBoundary=up9 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    
    
    enhancement 
    opened by bsutton 6
  • Stacked Widgets cause issues

    Stacked Widgets cause issues

    Hi @fedeoo,

    I have the problem that interactable widgets like buttons are available (even tough invisible) on the backside of the card. I think thats because you use a stack to store both sides of a card.

    A good approach to that problem would be maybe conditional rendering of front and back side.

    bug 
    opened by LaRuaNa 6
  • Added autoFlipDuration parameter

    Added autoFlipDuration parameter

    Description

    Added one-time autoFlip feature without a FlipCardController. For example, a one-time flip can be played for the logo or the cards that need to be loaded once.

    Type of change

    Please delete options that are not relevant.

    • [x] New feature (non-breaking change which adds functionality)

    How Has This Been Tested?

    I tested it on my own project. The following parameter should be added to the FlipCard widget.

    autoFlipDuration: Duration(milliseconds: 1000),

    • [x] Self Code Review
    • [x] Tested on example project

    Checklist:

    • [x] My code follows the style guidelines of this project
    • [x] I have performed a self-review of my own code
    • [x] I have commented my code, particularly in hard-to-understand areas
    • [x] I have made corresponding changes to the documentation
    • [x] My changes generate no new warnings
    • [x] Changed the example project to contain the new feature (only if applies)
    opened by aydinfatih 5
  • Added controller. hint() to trigger UI hint

    Added controller. hint() to trigger UI hint

    Fixes #32

    • Version bumped to 0.5.0

    Usage

    FlipCardController _controller = FlipCardController();
     
     _controller.hint(
       // optional
       duration: Duration(milliseconds: 400),
       // optional
       total: Duration(milliseconds: 900),
     );
     
     FlipCard(
       direction: FlipDirection.HORIZONTAL,
       controller: _controller,
       onFlip: () {
         //
       },
       back: Center(
         child: Container(
           child: ProjectFrontWidget(
             project: widget.project,
           ),
         ),
       ),
       front: Container(
         color: Colors.red,
         child: Center(
           child: ProjectBackWidget(
             project: widget.project,
           ),
         ),
       ),
     );
    

    The duration will only run if not flipped yet and not already animating. Animation runs for duration and reverses afterwards. The total duration will be used for this animation only and resets afterwards.

    opened by ciriousjoker 5
  • Publish to pub.dev

    Publish to pub.dev

    There are currently 5 PRs merged after the last release on pub.dev.

    @BrunoJurkovic Can you please bump the version to 0.7.0 & add the changelog and release it?

    opened by ciriousjoker 0
  • Card flipping shall keep the same direction

    Card flipping shall keep the same direction

    By toggling the card flips e.g. leftwise to show the back and then flips rightwise to show the front again.

    Is it possible to create a function to flip the card always in the same direction? For example the card is always flipping leftwise to show the front and back side?

    I tried it by calling _controller.forward() but this creates only the flip animation once.

    Best regards

    opened by sisierra 0
  • [BUG] onFlipDone is a bit slow

    [BUG] onFlipDone is a bit slow

    There is a delay between the time when the flip animation is done (visually) and the time when onlipDone is called. I would say its about half a second.

    It would be nice if this delay could be shortened.

    Right now I am using a workaround with Future.delayed with 350 ms after calling toggleCard().

    opened by MLZ91 1
  • Can't respond to click events

    Can't respond to click events

    ScaleTransition(
                      scale: _animation,
                      child: FlipCard(
                        controller: flipCardController,
                        key: cardKey,
                        front: buildFrontWidget(),
                        back: buildBackWidget(),
                      ),
                    )
    

    Currently only happens in 0.6.0, 0.5.0 has no problem If you replace FlipCard with GestureDetector, you can respond to click events Maybe there is a conflict with ScaleTransition

    [โœ“] Flutter (Channel stable, 2.10.3, on macOS 12.2.1 21D62 darwin-x64, locale zh-Hans-CN) โ€ข Flutter version 2.10.3 at /Users/lizhuoyuan/Development/flutter โ€ข Upstream repository https://github.com/flutter/flutter.git โ€ข Framework revision 7e9793dee1 (5 days ago), 2022-03-02 11:23:12 -0600 โ€ข Engine revision bd539267b4 โ€ข Dart version 2.16.1 โ€ข DevTools version 2.9.2 โ€ข Pub download mirror https://pub.flutter-io.cn โ€ข Flutter download mirror https://storage.flutter-io.cn

    bug 
    opened by lizhuoyuan 2
  • only one card flipped at a time?

    only one card flipped at a time?

    Hey :) Is there an easy method so only one card is flipped at a time or would I have to add the FlipCardController as controller on all of them and somehow trigger a flipback on the card showing the backside? Is there a way to assign uid's to the flipcards and request the state and change it by the uid? E. g. useful when out of sight in a ListView.

    opened by NymusGraphics 1
Owner
Bruno Jurkoviฤ‡
I am a Dart & Flutter developer.
Bruno Jurkoviฤ‡
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 flutter package that adds support for vector data based animations.

animated_vector Description and inspiration A package that adds support for vector data based animations. The data format is heavily inspired from the

Potato Open Sauce Project 6 Apr 26, 2022
A light weight library to easily manage a progress dialog with simple steps whenever you need to do it. You can easily show and hide it.

progress_dialog A light weight package to show progress dialog. As it is a stateful widget, you can change the text shown on the dialog dynamically. T

Mohammad Fayaz 202 Dec 11, 2022
A light weight package for flutter apps, that easily shows a splash screen with a nice fade animation.

Animated Splash Screen Using the package Get the library environment: sdk: ">=2.1.0 <3.0.0" Add dependency in pubspec.yaml dependencies: animated_

Mohammad Fayaz 112 Oct 6, 2022
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
Nubank card animation - Nubank card animation built with flutter

Nubank card animation Project | Technologies | How to run | How to contribute ??

Lucas da Silva Barbosa 8 Nov 6, 2022
Circular Reveal Animation as Flutter widget!

Circular Reveal Animation Circular Reveal Animation as Flutter widget! Inspired by Android's ViewAnimationUtils.createCircularReveal(...). ะกั‚ะฐั‚ัŒั ั ะพะฟ

Alexander Zhdanov 48 Aug 15, 2022
Flutter 3D Flip Animation Widget

flutter_flip_view This is a flutter Widget base on pure Dart code that provides 3D flip card visuals. Usage add package in your pubspec.yaml dependenc

WosLovesLife 57 Dec 30, 2022
Loading widget based on a Flare animation, allow you to create beautiful custom loading widgets or dialogs

flare_loading Loading widget based on a Flare animation, allow you to create custom loading widgets or dialogs If you're using Rive instead of Flare p

Jimmy Aumard 25 Apr 16, 2021
A scrolling digital animation widget

animated_digit ไธ€ไธชไธŠไธ‹ๆปšๅŠจ็š„ๆ•ฐๅญ—ๅŠจ็”ป widget๏ผŒๅ‡กๆ˜ฏ้œ€่ฆๅŠจ็”ปๆ•ˆๆžœ็š„ๆ•ฐๅญ—๏ผŒ็ฎ€ๅ•ๆ˜“็”จใ€‚ A scrolling digital animation widget that can be used to display the amount of animation, any numb

mingsnx 19 Nov 23, 2022
An implicit animation widget for rotation

AnimatedRotation An implicitly animated version of RotationTransition which automatically transitions the rotation over time when the provided angle c

Jason Rai 10 Jun 4, 2021
A small splashscreen used as intro for flutter applications easily with a lot of customizations โค๏ธ๐Ÿฅณ

Splash Screen A splashscreen package to be used for an intro for any flutter application easily with a lot of customization Currently Supported by awe

DPLYR 283 Dec 30, 2022
A Flutter package for easily implementing Material Design navigation transitions.

Morpheus A Flutter package for easily implementing Material Design navigation transitions. Examples Parent-child transition You can use MorpheusPageRo

Sander R. D. Larsen 186 Jan 7, 2023
Easily add staggered animations to your ListView, GridView, Column and Row children.

Flutter Staggered Animations Easily add staggered animations to your ListView, GridView, Column and Row children as shown in Material Design guideline

null 1.2k Jan 6, 2023