MDG Season of Code 2019 

Flutter Libraries 
October 16, 2019 

Overview 
Since Flutter is growing rapidly, but still lacking ample libraries, so this project will be a 
contribution to the flutter community. The project consists of different awesome 
animation libraries in Flutter, some implemented in android and some not.  

I will be making four different animation libraries, which are as following: 

● Animated card sort. 

● Card/Icon breaking animation. 
● Text Liquid Fill (while loading). 
● Skid Right Layout Manager. 

App Specification 
- Animated card sort 

● Nowadays, every app reloads the page for sorting while this animation will be a 
kind of virtualization of the sorting process. 
● While sorting the particular listviews item, this library will push the items out of 
the screen from the right and the new item will replace its position by doing the 
transition from the left through animation. 
- Icon breaking animation 
● Whenever any icons are deleted then this library would delete it with breaking 
animation. 
● The animation will be like breaking the icon in pieces and spread it around with 
fading. 

 
 2  

- Text Liquid Fill (while loading) 

● While loading any new window, this library will simply show a text which will be 
filled by liquid animation till the new window opens. 
- Skid Right Layout Manager 
● This library is already implemented in Android and I will be extending it for 
Flutter. 
● Here the views will be in the form of the tilted stack and on swiping one view out, 
the other view will come up with proper animation. 

For Animated card sort: 

- In animated card sort, I will be implementing the simple sort algorithm to sort all the 
items in the listview and then on a particular list item, I would replace it with the new 
item which has got that position on sorting. 
- The replace action would be done by a fading transition of the old list item and a new list 
item would emerge from the left. 
- This process will be performed synchronously to all the list items which will be a great 
animation for the user to visualize sorting. 

For Icon breaking animation: 

- In this library, I will make a group of icons and a delete option will be provided for 
deleting any icon. 
- Whenever the user performs click on the icon then the library would create an animation 
to break the icon in pieces which will be implemented using the algorithm for generating 
the particles and spreading it on all instances on the screen. 

For Text Liquid Fill: 

- In this library, I will initially implement the filling of liquid animation for a particular 
outlined character of the alphabet and then will try to implement it for words. 
- This library will become useful while loading some pages or retrieving data from any API 
where some time is needed to get the data. 

 
 3  

For Skid Right Layout Manager: 

- For this library, first I will go through its implementation in android and after 
understanding will implement the same for the Flutter. 
- This library can be useful while watching the list of pages like in the Inshorts or any other 
app. 
- Skid Right Layout Manager implemented in Android: 

Milestones 
Here is the timeline for building of libraries from scratch: 

1. Project Planning Phase 

 
● 21-26 October: 
○ Understanding the concepts behind working of Flutter libraries 
○ Do research on different technical aspects for making the Flutter libraries. 
○ Deciding the part of the project which is executable. 
● 27 October - 3 November: 
○ Learning about how to make different libraries in Flutter. 
○ Discuss the implementation of the project with MDG seniors. 
○ Decide the final deliverables of the project. 
 

 
 4  

2. Coding Phase 
 
● 25 November - 4 December 
○ Implement the Animated card sort library in Flutter for a simple List of 
cards containing the Text views. 
● 5 December - 10 December 
○ Implement the breaking animation library in Flutter for simple listview 
items. 
● 11 December - 19 December  
○ Implement the Text Liquid Fill animation library by adding it to the 
outlined text which will be filled while loading. 
● 20 December - 28 December 
○ Implement the Skid Right Layout Manager library from the help of the 
implemented android library. 
● 29 December - 31 December 
○ Work on removing some bugs or changes required in the libraries. 
 
3. Release Phase 
 
● 1 January - 14 January 
○ Feedback from the mentor about the made Flutter libraries. 
○ Do final changes if required in the code. 
○ Release the library. 

About Me 
I am Hemil Panchiwala, a 2nd-year undergraduate student pursuing B.Tech Computer Science 
Engineering. I am very interested in mobile development from my 1st year. I have also worked 
on web development. I am keenly interested in Android and Flutter, Reactjs, Nodejs. I have 
worked in different areas of Android like networking, media playing, widgets and also learnt the 
testing of apps by espresso. 

 
 5  

Projects 
Face-Emojify: A
​ n android application that detects the emoji according to the facial expression 
and replaces the face with that emoji. 

My-Virtual-Garden: ​An android application with the widget that gives a virtual experience of 
planting the plants in the garden, observing its growth and even watering plants. 

Fast-File-Sharer (Web Application): A

​ React-based web application for sharing files 
immediately with my own server and databases. 

Classical-Music-Quiz App: A
​ n android application that takes the quiz by playing a tune of any 
musician and the user has to identify the musician through the options. This was mainly made 
to learn different concepts of media in android. 

Squawker: A
​ n android application that was made as a part of the Advanced android course on 
Udacity which introduced was mainly focused on learning FCM. 

Github: h
​ ttps://github.com/hemilpanchiwala 

Codechef: h
​ ttps://www.codechef.com/users/hemilmodi54321 

Online Courses Done:- 

- Udemy’s Learn Flutter & Dart to Build iOS & Android Apps 
- Udacity’s Advanced Android App Development 
- Udacity’s Android Basics 5-courses 
- Andrew NG’s machine learning course  
- UD-120 Intro to Machine Learning 
- Udemy’s The Complete Web Developer course 

 
 6  

Contact Details 
Add your contact details which must include: 

● Name: Hemil Panchiwala 

● Enrollment No.: 18114031 
● Email: hemilmodi54321@gmail.com 
● Phone No.: 6351570657 
● Branch: CSE 2nd Year