hoangduongit1997 / flutter_30_days

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Flutter 30 days Challenge (Flutter UI Kit)

version 1.0.0, Download the apk here.

Buy Me A Coffee

Flutter 30 days challenge is an app build during the #30daysofflutterchallenge. It contains several demo UI's which I took a challenge for a particular date. You can the code for each page in this repository. I focused on writing clean and reusable code. I refactored and tried to keep the structure clean and understandable.

Topics Covered

  • Gesture Detector : Gesture Detector has been used to detect horizontal drags to navigate across screens.

  • Custom Painter & Clipper : To achieve custom layout and shapes custom clippers and painters are used. You can find the painters used here.

  • Animations and Delayed Animation : Complex and abstract animations are created using Intervals and AnimationController. Find the related code here.

  • Stack & Positioned : Stack and Positioned are extensively used in the UI build, as it's very helpful in every situation.

  • Slivers : Slivers are used to get custom scrollable screens and layouts. You can find the related code here.

  • Value Notifier & Value Listenable Builder : Value notifiers and Value listeners are used to transmit and listen to data, and to effectively manage state.

  • PageView, ListView, GridView : To create list of items/pages the listView, gridview and pageview were used with custom animations to show custom effects.

Pages/Screenshots of the application

The name of each file is linked with the .dart file of the page for easy navigation.

Login Page SignUp Page Auth Page
Chair Home Page Sliver Page Categories Page
Search Page Progress Page Explore Books Page
Adventure Page Stepper Page Plant Page
Ticket Page Sushi Page Furniture Page
Furniture Detail Page Settings Page Trip Page
Motivation Page Hydration Page Property Page
Home Page Navigator Page Welcome Page
Navigator Easy View Side Drawer About Us Dialog

Project Structure

   ├── pages/   # This folder contains all the pages.
   ├── pages/auth/   #This folder contains auth related files.
   ├── dialogs/   # This folder contains dialogs used in the app.
   ├── helper/   # This folder contains helper methods and classes.
   ├── painter/   # This folder contains the custom painter classes.
   ├── layout/   #This folder layout related pages.
   ├── bottomSheet/ # Contains all the bottom sheets used in the app.
   ├── route_generator # Contains all the routes used in the app.
   ├── globals.dart   # Contains all globally used variables. 
   └── main.dart   # Root file of the project

Project Setup

In order to set up the project, please follow below steps:

Flutter setup

Built on Flutter Version: 2.0.3 (stable)

  1. Install package dependencies:
flutter pub get
  1. Run the project by running command:

flutter run
  1. Use one of these commands to build the project:
flutter build ios
flutter build apk
flutter build appbundle
  1. If any issue (run the below command to troubleshoot):
flutter doctor

For help getting started with Flutter, check online documentation, which offers great tutorials, samples, guidance on mobile development, and a full API reference. If you run into any issues or questions, feel free to reach out to us via email at asterjoules@gmail.com.

Flutter packages used in flutter_30_days:

  • google_fonts
  • feature_discovery
  • mdi
  • url_launcher
  • shared_preferences


Aman Negi(Aster Joules) - Initial work

Feel Free to Contract


If I could help you in any way possible, you can contribute. Your contributions motivate me to make my other projects open source.
Buy me a .


Copyright 2021 Aster Joues

This is an open-source project meant for learning so it's a humble request to not sell or republish the application anywhere.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use and copy, subject to the following conditions:

  1. The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

  2. No permission is granted to sell/copies of the software/codebase.

  3. No permission is granted to publish/distribute the software/codebase.

  4. No permission is granted to republish the same software/codebase.

ezoic increase your site revenue




Language:Dart 99.7%Language:Swift 0.2%Language:Kotlin 0.1%Language:Objective-C 0.0%