Flutter widget is built using a modern framework. It is like a react. In this, we start with the widget to create any application. Each component in the screen is a widget. The widget describes this of what his outlook should be given his present configuration and condition. Widget shows were similar to its idea and current setup and state.

In this article, we will Explore Flip Animation In Flutter Using the flip_card package With the help of the package, we can easily achieve flutter flip animation card and describes his some properties and how to use them in your flutter applications. So let’s get started.

Table Of Contents:

Flip Animation

Code Implementation

Code File

Conclusion

Flip Animation:

This Component that provides flip card animation. It is used to hide and show a product. The card will flip when touched. We can flip it vertically or in the horizontal direction. Let us understand some of its properties.

Properties of the Flip Card:

The following are the basic properties of the Flip Card.

1. front: With the help of front properties, we rotate our card 90 degrees from back to front.
2. back: With the help of back properties, we rotate our card 90–180 degrees from front to back.
3. speed: We use speed properties to manage the speed of the card.
4. fliponTouch: We use the fliponTouch properties when we do not have to rotate the card or image. And it is a bool type.
5. direction: We can rotate it vertically and horizontally using the direction property.

Demo Module:

This demo module video uses a flip card package. In which there are two different containers, which when pressed, will rotate vertically and horizontally

Implementation :

You need to implement it in your code respectively:

Create a new dart file called flip_animation_demo.dart inside the lib folder.

Step 1: Add dependencies.

Add dependencies to pubspec — yaml file.

dependencies:
     flip_card: ^0.4.4

Step 2: import the package :

import 'package:flip_card/flip_card.dart';

Step 3: Run flutter package get

In this screen, we have two different containers. In which we have used the flip card package and wrap the container with FlipCard. In this, we have rotated it vertically and horizontally with the help of the direction property. And there is different colour and text on the front and backside of the container.

Let us understand this with the help of a reference.

FlipCard(
  direction: FlipDirection.HORIZONTAL,

  front: Stack(
    alignment: Alignment.center,
    children: [
      Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(10)),
          color: Colors.orange.shade200,
        ),
      ),
      Text(
        'Front',
        style: TextStyle(
            color: Colors.white,
            fontSize: 28,
            fontWeight: FontWeight.w600),
      ),
    ],
  ),
  back: Stack(
    alignment: Alignment.center,
    children: [
      Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(10)),
          color: Colors.blue.shade400,
        ),
      ),
      Text(
        'Back',
        style: TextStyle(
            color: Colors.white,
            fontSize: 28,
            fontWeight: FontWeight.w600),
      ),
    ],
  ),
),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File:

import 'dart:ui';

import 'package:flip_card/flip_card.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';

class FlipAnimationDemo extends StatefulWidget {
  @override
  _FlipAnimationDemoState createState() => _FlipAnimationDemoState();
}

class _FlipAnimationDemoState extends State<FlipAnimationDemo> {
  double _height;
  double _width;

  @override
  Widget build(BuildContext context) {
    _height = MediaQuery.of(context).size.height;
    _width = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        title: Text('Flip Animation Demo'),
      ),
      body: Container(
        width: _width,
        height: _height,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Column(
              children: [
                Text(
                  'Vertical Flip Animation',
                  style: TextStyle(
                      color: Colors.black,
                      fontSize: 18,
                      fontStyle: FontStyle.italic,
                      fontWeight: FontWeight.w600,
                      letterSpacing: 0.5),
                ),
                Container(
                  width: 180,
                  height: 180,
                  margin: EdgeInsets.only(top: 20),
                  child: FlipCard(
                    direction: FlipDirection.VERTICAL, // default
                    front: Stack(
                      alignment: Alignment.center,
                      children: [
                        Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.all(Radius.circular(10)),
                            color: Colors.blue.shade400,
                          ),
                        ),
                        Text(
                          'Front',
                          style: TextStyle(
                              color: Colors.white,
                              fontSize: 28,
                              fontWeight: FontWeight.w600),
                        ),
                      ],
                    ),
                    back: Stack(
                      alignment: Alignment.center,
                      children: [
                        Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.all(Radius.circular(10)),
                            color: Colors.orange.shade200,
                          ),
                        ),
                        Text(
                          'Back',
                          style: TextStyle(
                              color: Colors.white,
                              fontSize: 28,
                              fontWeight: FontWeight.w600),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
            Column(
              children: [
                Text(
                  'Horizontal Flip Animation',
                  style: TextStyle(
                      color: Colors.black,
                      fontSize: 18,
                      fontStyle: FontStyle.italic,
                      fontWeight: FontWeight.w600,
                      letterSpacing: 0.5),
                ),
                Container(
                  width: 180,
                  height: 180,
                  margin: EdgeInsets.only(top: 20),
                  child: FlipCard(
                    direction: FlipDirection.HORIZONTAL,

                    front: Stack(
                      alignment: Alignment.center,
                      children: [
                        Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.all(Radius.circular(10)),
                            color: Colors.orange.shade200,
                          ),
                        ),
                        Text(
                          'Front',
                          style: TextStyle(
                              color: Colors.white,
                              fontSize: 28,
                              fontWeight: FontWeight.w600),
                        ),
                      ],
                    ),
                    back: Stack(
                      alignment: Alignment.center,
                      children: [
                        Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.all(Radius.circular(10)),
                            color: Colors.blue.shade400,
                          ),
                        ),
                        Text(
                          'Back',
                          style: TextStyle(
                              color: Colors.white,
                              fontSize: 28,
                              fontWeight: FontWeight.w600),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Conclusion:

In this article, I have explained a Flip Animation demo, which you can modify and experiment with according to your own, this little introduction was from the Flip Animation demo from our side.

I hope this blog will provide you with sufficient information in Trying up the Flip Animation in your flutter project. We will show you the Flip Animation is?, and working on it in your flutter applications, So please try it.

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

If we got something wrong? Let me know in the comments. we would love to improve.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us
And read more articles from FlutterDevs.com

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

Hello friends, I have written my new blog on Animated Cross Fade In Flutter. We will also implement a demo of the Animated Cross Fade, and describes his properties, and how to use them in your flutter applications. So let’s get started.

Table Of Contents:

Flutter

Animated Cross Fade

Code Implementation

Code File

Conclusion

Flutter :

“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time, Flutter offers great developer tools, with amazing hot reload”.

Animated Cross Fade:

The Cross Fade widget which is a crossfade between given children and animates itself between its shapes. Crossfade is animated in the same place and changes its shape and colour. And we can use it in any other widget I can do such as text images, etc. The animation is controlled through the crossFadeState parameter. Let us understand some of its properties.

Properties of the Animated Cross Fade:

1.firstChild: First Child Properties that represents the first widget of the tree. And what it appears before the second widget is erased by the transition.

2. secondChild: The secondChild properties will represent the second widget to which the first child will transitions.

3. firstCurve/secondCurve: The animation effects first curve and second curve first child and second child. The default value of both of these is Curves.linear.

4.sizeCurve: The sizeCurve is the curve used to animate between the size of the fading-out child and the size of the fading-in child..

5. alignment: Alignment property defines how the children should align.

6. crossFadeState: The CrossFadeState itself determines which child to show and which second to show CrossFadeState.The child that is visible when crossFadeState is CrossFadeState.showSecond. It fades in when transitioning crossFadeState from CrossFadeState.showFirst to CrossFadeState.showSecond and vice versa.

7. duration: In Duration property, we can set the time taken in animation.

8. reverseDuration: TheReverse duration property we can set the time taken in animation to be completed in reverse order.

9. layoutBuilder: You can use a custom layout builder for positioning the widget during the transition.

Demo Module:

Code Implementation:

In this screen, we have taken two images. Which we have initialized inside the first child and second child properties. And clicking on the image shows the second image to be animated. The stateful widget is required to implement the AnimatedCrossFade widget.

Let us understand this with the help of a reference.

First, we will define a bool variable.

bool _firstChild = false;

Implemented the AnimatedCrossFade widget.Which has defined its duration inside crossFadeState.

AnimatedCrossFade(
  firstCurve: Curves.easeInCubic,
  secondCurve: Curves.easeInCirc,
  firstChild: InkWell(
    onTap: () {
      setState(() {
        _firstChild = !_firstChild;
      });
    },
    child: Container(
      child: ClipOval(
        child: CircleAvatar(
          maxRadius: 100,
          child: Image.asset(
            'assets/images/logo.png',
            fit: BoxFit.fill,
          ),
        ),
      ),
      alignment: Alignment.center,
    ),
  ),
  secondChild: InkWell(
    onTap: () {
      setState(() {
        _firstChild = !_firstChild;
      });
    },
    child: Container(
      height: 250,
      width: 250,
      child: Image.asset(
        'assets/images/event_2.png',
        fit: BoxFit.cover,
      ),
      color: Colors.amberAccent.shade700,
    ),
  ),
  crossFadeState:
      _firstChild ? CrossFadeState.showFirst : CrossFadeState.showSecond,
  duration: Duration(seconds: 2),
  layoutBuilder: (
    Widget topChild,
    Key topChildKey,
    Widget bottomChild,
    Key bottomChildKey,
  ) {
    return Stack(
      clipBehavior: Clip.none,
      alignment: Alignment.center,
      children: [
        PositionedDirectional(
          child: bottomChild,
          key: bottomChildKey,
          top: 0,
        ),
        PositionedDirectional(
          child: topChild,
          key: topChildKey,
        ),
      ],
    );
  },
),

The AnimatedCrossFade widget results can be seen in the given below image.

Code File:

import 'package:flutter/material.dart';

class CrossFadeAnimationDemo extends StatefulWidget {
  @override
  _CrossFadeAnimationDemoState createState() => _CrossFadeAnimationDemoState();
}

class _CrossFadeAnimationDemoState extends State<CrossFadeAnimationDemo> {
  bool _firstChild = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        title:Text('CrossFade Animation'),
      ),
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              margin: EdgeInsets.all(16.0),
              width: double.infinity,
              height: 60,
              color: Colors.orange.shade200,
            ),
            AnimatedCrossFade(
              firstCurve: Curves.easeInCubic,
              secondCurve: Curves.easeInCirc,
              firstChild: InkWell(
                onTap: () {
                  setState(() {
                    _firstChild = !_firstChild;
                  });
                },
                child: Container(
                  child: ClipOval(
                    child: CircleAvatar(
                      maxRadius: 100,
                      child: Image.asset(
                        'assets/images/logo.png',
                        fit: BoxFit.fill,
                      ),
                    ),
                  ),
                  alignment: Alignment.center,
                ),
              ),
              secondChild: InkWell(
                onTap: () {
                  setState(() {
                    _firstChild = !_firstChild;
                  });
                },
                child: Container(
                  height: 250,
                  width: 250,
                  child: Image.asset(
                    'assets/images/event_2.png',
                    fit: BoxFit.cover,
                  ),
                  color: Colors.amberAccent.shade700,
                ),
              ),
              crossFadeState:
                  _firstChild ? CrossFadeState.showFirst :    CrossFadeState.showSecond,
              duration: Duration(seconds: 2),
              layoutBuilder: (
                Widget topChild,
                Key topChildKey,
                Widget bottomChild,
                Key bottomChildKey,
              ) {
                return Stack(
                  clipBehavior: Clip.none,
                  alignment: Alignment.center,
                  children: [
                    PositionedDirectional(
                      child: bottomChild,
                      key: bottomChildKey,
                      top: 0,
                    ),
                    PositionedDirectional(
                      child: topChild,
                      key: topChildKey,
                    ),
                  ],
                );
              },
            ),
            Container(
              margin: EdgeInsets.all(16.0),
              width: double.infinity,
              height: 60,
              color: Colors.red.shade200,
            ),
          ],
        ),
      ),
    );
  }
}

Conclusion:

In this article, I have explained an Animated CrossFade demo, which you can modify and experiment with according to your own, this little introduction was from the Animated CrossFade widget from our side.

I hope this blog will provide you with sufficient information in Trying up the Animated CrossFade widget in your flutter project. We will show you the Animated CrossFade widget is?, and working on it in your flutter applications, So please try it.

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

If we got something wrong? Let me know in the comments. we would love to improve.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us
And read more articles from FlutterDevs.com

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

In this article, we will explore the Percent Indicator in flutter using the percent indicator package. With the help of the package, we can easily achieve flutter animated percent progress indicators. So let’s get started

We will implement a demo of the percent Indicator that can be easily embedded in your flutter applications.

percent_indicator | Flutter Package
Circular and Linear percent indicators Circle percent indicator Linear percent indicator Toggle animation Custom…pub.dev

Table Of Contents :

Flutter

Percent Indicator

Implementation

Code Implement

Code File

Conclusion

Flutter :

“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time, Flutter offers great developer tools, with amazing hot reload”.

Percent Indicator :

The flutter percentage indicator package produces a progress bar indicator that is different or linear from the default progress bar indicator that looks more beautiful. It is used to display the progress indicator time in any application, such as download, installation, uploading, etc. In this plugin, linear indicator and circular indicator are the two important indicators that cover it. Let’s look at its important indicator.

Two ways of percent indicator

1. CircularProgressIndicator: The CircularProgressIndicator is a widget that shows progress with a circle. It is a circular progress bar that indicates whether the application is busy or on hold.
2. LinearProgressIndicator: The LinearProgressIndicator is a widget that shows a progress bar in a linear direction and shows that the application is in progress.

Some of the important Percent Indicator attributes:

• progressColor — Progress color properties are used for the progress bar so that the progress line can be easily visible and you can change the progress color as per your choice.
• percent — The percent defines the percentage as long as the progress bar is animated. It takes a double value from 0 -> 1.
• radius — Radius properties define the size of the circle.
• center — Center properties define the widget that is in the centre of the progress bar. It can be used by both linear and circular indicators.

Demo Module:

Implementation :

Step 1: Add dependencies.

Add dependencies to pubspec — yaml file.

dependencies:
 percent_indicator: "^2.1.7+2"

Step 2: import the package :

import 'package:percent_indicator/percent_indicator.dart';

Step 3: Run flutter package get

Code Implementation :

Create a new dart file called percent_indicator_demo.dart inside the lib folder

In this screen, we have shown both the indicator and the circular indicator. In which centre properties are used in which progress bar per cent is initialized. Let us understand this in detail with the help of a reference.

First of all, we have set the percentage timer in the init state which will increase the timer when the progress bar in running them in your application.

@override
void initState() {
  Timer timer;
  timer = Timer.periodic(Duration(milliseconds:1000),(_){
    setState(() {
      percent+=10;
      if(percent >= 100){
        timer.cancel();
        // percent=0;
      }
    });
  });
  super.initState();
}

Now we have taken the circular percent indicator, which has given the background color, the progress color separately, and showed the progress percentage at the centre which will update the progress percentage.

CircularPercentIndicator(
  radius: 120.0,
  lineWidth: 10.0,
  animation: true,
  percent: percent/100,
  center: Text(
    percent.toString() + "%",
    style: TextStyle(
        fontSize: 20.0,
        fontWeight: FontWeight.w600,
        color: Colors.black),
  ),
  backgroundColor: Colors.grey[300],
  circularStrokeCap: CircularStrokeCap.round,
  progressColor: Colors.redAccent,
)

Now we have taken the circular percent indicator, which has given the background color, the progress color separately, and showed the progress percentage at the centre which will update the progress percentage.

LinearPercentIndicator( //leaner progress bar
    animation: true,
    animationDuration: 1000,
    lineHeight: 20.0,
    percent:percent/100,
    center: Text(
      percent.toString() + "%",
      style: TextStyle(
          fontSize: 12.0,
          fontWeight: FontWeight.w600,
          color: Colors.black),
    ),
    linearStrokeCap: LinearStrokeCap.roundAll,
    progressColor: Colors.blue[400],
    backgroundColor: Colors.grey[300],
  ),
),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File :

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:percent_indicator/circular_percent_indicator.dart';
import 'package:percent_indicator/linear_percent_indicator.dart';
class PercentIndicatorDemo extends StatefulWidget {
  @override
  _PercentIndicatorDemoState createState() => _PercentIndicatorDemoState();
}

class _PercentIndicatorDemoState extends State<PercentIndicatorDemo> {

  double percent = 0.0;

  double _height;
  double _width;

  @override
  void initState() {
    Timer timer;
    timer = Timer.periodic(Duration(milliseconds:1000),(_){
      setState(() {
        percent+=10;
        if(percent >= 100){
          timer.cancel();
          // percent=0;
        }
      });
    });
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    _height = MediaQuery.of(context).size.height;
    _width = MediaQuery.of(context).size.width;

    return Scaffold(
        appBar: AppBar(
            title:Text("Percent Indicator Demo"),
            backgroundColor: Colors.redAccent
        ),
        body:Container(
            child:Column(
              mainAxisAlignment:MainAxisAlignment.spaceEvenly,
              crossAxisAlignment:CrossAxisAlignment.center,
              children: <Widget>[

                Column(
                  children: [
                    Text(
                      'Circular Percent Indicator',
                      style: TextStyle(
                          fontStyle: FontStyle.italic,
                          fontWeight: FontWeight.w700,
                          fontSize: 15),
                    ),
                    SizedBox(
                      height: 40,
                    ),
                    Container(
                        padding: EdgeInsets.all(10),
                        child: CircularPercentIndicator(
                          radius: 120.0,
                          lineWidth: 10.0,
                          animation: true,
                          percent: percent/100,
                          center: Text(
                            percent.toString() + "%",
                            style: TextStyle(
                                fontSize: 20.0,
                                fontWeight: FontWeight.w600,
                                color: Colors.black),
                          ),
                          backgroundColor: Colors.grey[300],
                          circularStrokeCap: CircularStrokeCap.round,
                          progressColor: Colors.redAccent,
                        )
                    ),
                  ],
                ),


                Column(
                  children: [
                    Text(
                      'Linear Percent indicator',
                      style: TextStyle(
                          fontStyle: FontStyle.italic,
                          fontWeight: FontWeight.w700,
                          fontSize: 15),
                    ),
                    SizedBox(
                      height: 40,
                    ),

                    Container(
                      margin: EdgeInsets.only(left:30,right:30),
                      alignment:Alignment.center,
                      child: LinearPercentIndicator( //leaner progress bar
                        animation: true,
                        animationDuration: 1000,
                        lineHeight: 20.0,
                        percent:percent/100,
                        center: Text(
                          percent.toString() + "%",
                          style: TextStyle(
                              fontSize: 12.0,
                              fontWeight: FontWeight.w600,
                              color: Colors.black),
                        ),
                        linearStrokeCap: LinearStrokeCap.roundAll,
                        progressColor: Colors.blue[400],
                        backgroundColor: Colors.grey[300],
                      ),
                    ),
                  ],
                ),
              ],
            )
        )
    );
  }
}

Conclusion :

In this article, I have explained a Percent Indicator in a flutter, which you can modify and experiment with according to your own, this little introduction was from the Percent Indicator demo from our side.

I hope this blog will provide you with sufficient information in Trying up the Percent Indicator in your flutter project. We will show you the Percent Indicator is?, and working on it in your flutter applications, So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.