A Tasking Listing App can be defined as a better version of a To-Do App. Not only does the Tasking Listing App follow the CRUD principle, it also consists of a lot of screens from a Calendar to Timeline.
This Task Listing App is a complete UI theme that you can use to build your own productivity app.
Walkthrough
This is a simple Tasking Listing App built using Flutter. Here is a brief walkthrough of the app:
The app starts with a login screen where the user needs to login using their credentials. If the user does not have any login credentials, the user will need to go to the Sign Up screen and register as a new user. Login and Sign Up screens include validation and a date picker.
Once logged in, the app navigates to the Home Screen where the user will be able to see the list of tasks. The user can also create, display, and update tasks on this screen.
The Task Listing App also contains a Calendar screen where the user can see the tasks sorted on the basis of day, week, and month.
This Task Listing App also lets you group your tasks. This screen also has an implementation of a Carousel. This feature will also be explained in this post.
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.
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.
holeLabel 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
wpDiscuz