Home > Mobile >  Flutter flip card package with long text
Flutter flip card package with long text

Time:06-01

I used flip_card package(https://pub.dev/packages/flip_card/example) inside ListView.builder. And it seems to work very well. But after I just touched the card several times(more than 10 times) to test flip effect, it became extremely slow and my entire app also looked like almost stopped doing every thing. And unfortunately, there are no single message from console. I removed my widgets one by one to find out who is ruining my app, and I think I found the reason. If there are long text such as lorem ipsum on the card, the problem appeared. But I wonder if there is any solution to solve this problem. Because I really like this effect ,but also, I need long text on the card. Please save me, please.

Here is my code.

Flexible(child: LayoutBuilder(
                builder: (context, constraints) {
                  return SizedBox( height: constraints.biggest.height, width: double.infinity,
                    child: FlipCard(
                      fill: Fill.fillBack,
                      direction: FlipDirection.HORIZONTAL,
                      back: Container(width: MediaQuery.of(context).size.width, color: Colors.grey,
                          child:Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")),
                      front: Container(width: MediaQuery.of(context).size.width, color: Colors.grey,
                          child: Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."),),
                    ),
                  );
                }
              )),

CodePudding user response:

Instead of using dependency. Use default animation into you. Using the below link.

https://medium.com/flutter-community/flutter-flip-card-animation-eb25c403f371

Thank Yoo

  • Related