Sustainfulness is an mobile app for Android and iOS.
⬇️ Android: Download the sustainfulness.apk
⬇️ iOS: If you need to test iOS, please contact us!
- Apple requires paid Developer accounts in order to sign and release an iOS for other to test, we we weren't able to get this setup in time for devpost deadline.
- We tested that the app works great on iOS though
For judges, please reach out so we can add your email as a Tester for Google wallet integration!
➡️ See youtube video: https://www.youtube.com/watch?v=wDzpevscH3o
Our App is a combination of Flutter and Web technologies.
- Flutter allows us to easily build apps for both android and ios with the same shared codebase, it also provides a great set of Widgets for building responsive views for mobile apps.
- Web allowed us to use technologies that might not be supported yet on Flutter like three.js, WebGL.
Animations are powered by flutter_animate package. Animations are a big part of makes this app a delight and fun to use!
For making the card fun to interact with, we added touch control where you can tap & hold to tilt the card. As well as gyro controls, if you tilt you phone the card preview tilts as well! Powered by Tilt controls: flutter_titlt.
For our 3D energy catching game, we utilized three.js and web. webview_flutter integrate Flutter App and Web together, as well as handle the communications between them.
- The code for the three.js game lives at /docs folder. Since Github pages convetion serves from a folder named
docs
. - And it's hosted on https://jimicy.github.io/sustainfulness/ which our Flutter app loads via a Webview
For logic, we separated business logic from UI by utilizing the Bloc pattern. This makes it easier to do separate of concerns and refactor UI without needing to ensure business logic doesn't get broke in the process. For persisting data to the devices, hydrated_bloc allowed use to easily persistent our Bloc (business logic data) by swapping the class to HydratedBloc class!
Here's a medium article describing the process of building this Flutter app!
- https://medium.com/@jimicy/our-experience-developing-sustainfulness-flutter-545cb919546f
- A deeper technical breakdown and what others can learn from other for their Flutter apps!
Animated splash screen fades element delightfully in and out
Splash screen #1 | Splash screen #2 |
---|---|
3D energy catching game | Reward screen | Revealed Daily card |
---|---|---|
Key flutter packages:
Tutorials followed: