Flutter 30 days Challenge (Flutter UI Kit)
version 1.0.0, Download the apk here.
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.
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)
- Install package dependencies:
flutter pub get
- Run the project by running command:
flutter run
- Use one of these commands to build the project:
flutter build ios
flutter build apk
flutter build appbundle
- 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
Authors
Aman Negi(Aster Joules) - Initial work
Feel Free to Contract
- Gmail : asterjoules@gmail.com
- Instagram : Aster Joules
- My Portfolio Website : https://amannegi.github.io/ - In Progress
Contribute
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 ☕.
Licensing
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:
-
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
No permission is granted to sell/copies of the software/codebase.
-
No permission is granted to publish/distribute the software/codebase.
-
No permission is granted to republish the same software/codebase.