Key Features

Let’s take a look at some of the key features of the app.

Splash Screen Animation

The Splash Screen is implemented using Flutter Animation. The key idea here is to increase the size of the icon up to a certain extent, and then decrease it to its original size by changing opacity during the phase transition.

After repeating the process a certain number of times, we navigate to the next screen.

Navigation Animation:

We have used Flutter’s Hero Animation to provide animation while navigation from the Login Screen to the Sign-Up screen of the app.

Hero animations are implemented using two Hero widgets: one describing the widget in the source route, and another describing the widget in the destination route.

It is essential for both the screens that the hero widgets are created with the same tag and have same child asset. The Navigator push and pop operations trigger a hero animation for each pair of heroes with matching tags in the source and destination routes.

For more details you can refer this link- Hero Animations.

Carousel:

Here, the key components are the PageView.builder and AnimatedBuilder. PageView.builder Page Builder creates a scrollable list that works page by page which are created on demand and Animated Builder adds an after effect in it.

Here, the PageView calls the builder method whenever the page is rendered on the screen, animating the appearance of the screen. The builder uses the controller of PageView.Builder to determine the page value at the time of swiping. This way, the app can change the height, width, and the opacity of the next page.

The builder method is defined as shown below:

The builder method calls the AnimatedBuilder , which as the name suggests, builds the animation of the Carousel. The height and width of the container widget depends on the value which is clamped between 0.0 and 1.0 .

By combining both, we can create an awesome Carousel widget as shown below.

We have open sourced the Carousel code. You may find it here.

Animated Circular Chart:

Research shows that humans are able to analyse data far quicker from pictures than from texts. This is why charts are known to be one of the best method for data analysis.

Flutter provides support for Circular charts with animation. We only have to import the package to use it in the Flutter project.

We have used the AnimatedCircularChart class to build this chart. First, the percentage is defined for each of the three categories (Snoozed, Completed, and Overdue) then a new Container widget which contains the AnimatedCircularChart class is returned. This class takes in the following things:

A _chartKey as the key.

as the key. The size of the chart is set by the the Size

The chart expects a CircularStackEntry object that contains the data that needs to be drawn. Each CircularStackEntry is composed of multiple CircularSegmentEntry containing the value of a data point. Here, each CircularSegmentEntry represents an individual slice.

object that contains the data that needs to be drawn. Each is composed of multiple containing the value of a data point. Here, each represents an individual slice. holeLabel is where we can declare any text that we want to place in the middle of the circular chart.

is where we can declare any text that we want to place in the middle of the circular chart. labelStyle provides the style for the text that we have provided in the holeLabel .

For more details you can refer this link:

https://pub.dartlang.org/packages/flutter_circular_chart