Stift Flutter App: The Calendar for Tablets
Welcome to Stift. Use your tablet pen the way it should be used: Draw your appointments instead of typing them.
Flutter App
This App is completely built with Dart / Flutter.
Preview
Stylus or finger drawing
This app detects whether you are using a stylus or your finger to draw on the calendar.
Tech Specs
- State Management: Riverpod
- Database: Firebase, Firestore
Some Tech Insights
- The app uses the Listener-Widget to recognize the use of a pen instead of a finger with Flutter.
- I ended up using the InteractiveViewer widget to pinch-zoom with two fingers which works pretty well but it still limits the desired behaviour.
- Example: If you turn off drawing with your fingers and draw only with the pen, you should be able to scroll through the calendar with one finger. This does not work with the InteractiveViewer since the Listener catches the one-finger touch event instead of the InteractiveViewer
The Limits of Riverpod
Whenever you draw on the calendar, the Listener-Widget detects the exact position to draw a colorful point. This Listener-Event triggers a few hundred times per second and i saved the exact position inside a Riverpod StateNotifier. Another widget is listening on that state and paints the colorful point. first: it worked but the update mechanism was just too slow. The drawing was painted on the screen too late and it looked super laggy.
I solved this issue with a classic Flutter StatefulWidget and the setState(...)
method. Please try it out, it works pretty well.
Run Locally
- Since this app relies on firebase, you need to create a firebase project and replace the google-services.json.
- Also enable the Firestore Database.
- You also need to create a keystore file and insert the key.properties file or remove the signing configs inside the build.gradle
- it's probably easier to just disable the signing in
/android/app/build.gradle
- it's probably easier to just disable the signing in
Google services files:
/lib/firebase_options.dart
/ios/GoogleService-Info.plist
/android/app/google-services.json
FVM: Flutter version management
Check out /.fvm/fvm_config.json
to see the used Flutter version.
If you're already using FVM, then just install the used version with $ fvm install
. This will automatically install the project's flutter version.
Download and try the App
Rate the App
I would also be very happy if you could leave a rating in the App Store. This would really help to make the app a bit more popular. Thanks a lot! 🤝