Skip to content

iamcaominhtien/white-shark-flutter-cook-book

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

WHITE SHARK FLUTTER COOKBOOK

The white shark is my name :>, and this is the project that I have created with some designs that I love, such as the zoom drawer (based on the flutter_zoom_drawer package), tinder cards design, or physics simulation. The code I wrote may not be fully optimized, but I am improving it daily. To see any design source code, click on the title.

True to its name, I explore applying animation effects to routing instead of traditional routing methods. These animations can be left-to-right, right-to-left, top-to-down, and so on. When navigating to a new page using an animated page route, you can use gestures to close the page. For example, if the page opened with a left-to-right animation, closing the page would involve a right-to-left animation.
Furthermore, I have also developed additional routing techniques for card detail animation. When clicking on a card detail, it gradually zooms in and displays more information (if available). Please watch the illustrated video for a clearer understanding.

video_2023-10-02_12-05-45.mp4

The design is based on the Tinder card style, where you "swipe right" to "match" and "swipe left" to "unmatch." The swiping effect is achieved using Transform techniques in Flutter.

Screenrecorder-2023-10-02-09-20-47-290.mp4

The design is based on the guidance from the Flutter Cookbook, but instead of using Align to position the DraggleCard, I utilize the Position and Stack widgets. I have made further improvements compared to the Flutter Cookbook example, allowing you to drag and drop the DraggleCard into any predefined area on the screen.

Screenrecorder-2023-10-02-09-21-05-663.mp4

The design is based on the flutter_zoom_drawer package available on pub.dev, but I did not use the source code from the package. Instead, I developed my own source code based on the core concepts of the GestureDetector widget and various Transform techniques in Flutter.

Screenrecorder-2023-10-02-09-21-22-68.mp4

The design is inspired by the ripple effect on the water's surface, with a centre consisting of a circle or heart shape.

Screenrecorder-2023-10-02-09-21-41-684.mp4

Excel view (Still a work in progress)

The design is based on Google Sheets, and I am working on improving the performance when loading an Excel file with a large number of rows and columns.

Screenrecorder-2023-10-02-09-22-09-517.mp4

Events calendar (Still a work in progress)

The design is inspired by a Facebook post I read, where the rows represent hours of the day, and the columns contain the names of people whose events you want to track throughout the day.

Screenrecorder-2023-10-02-09-22-32-428.mp4

The design is based on the Date Picker in Flutter. I encountered difficulties customizing the default Date Picker interface, so I decided to develop my own source code for it.

Screenrecorder-2023-10-02-09-22-58-156.mp4