Reading time: 2 minutes
We’ve spent the last few months developing Sagwee, a chatbot platform with live agent support and QR-code-based interactions. As a team working with Flutter on such a large-scale project, we’ve encountered numerous challenges and valuable learning moments along the way. Here’s what we’ve learned, along with insights that might help you if you’re tackling a similar project.
State Management
We initially started with Provider and explored several state management solutions before ultimately choosing Riverpod for its scalability. While Riverpod’s documentation didn’t initially reflect some of Dart’s newer language improvements at that time (like pattern matching), it has since been updated to align with the latest changes. Following the Riverpod repository was incredibly helpful, allowing us to learn and adapt.
Multi-Platform Considerations
We began development with Flutter Web and were pleasantly surprised by its capabilities. However, we wouldn’t recommend using Flutter for a promotional website due to SEO limitations. As Flutter web prioritizes performance, fidelity, and consistency, the output doesn’t align with what search engines need to properly index, as noted in the official documentation.
Certain integrations, like Stripe, weren’t natively supported, which can pose challenges for both web and mobile implementations. At the time of writing, Stripe offers official SDKsonly for React and ES Modules on web, and iOS, Android, and React Native on mobile. While community SDKs are available, including for Flutter, the web version remains experimental, with only a subset of features available.
App Store policies also restrict payment functionalities outside their store on Android and iOS, leading to errors when trying to integrate Stripe as we would on the web. As a result, we decided to offer a limited version of the app as a message companion, requiring sign-ups to be made via the web version. We’re actively working on full mobile support.
Another feature that proved invaluable was Flutter’s SafeArea widget, which ensured our screens displayed properly across various devices.
For Flutter Web, if you need selectable text, be sure to use the SelectableText widget. We’ve found it particularly useful for sections of our app, such as the chat view, where users might want to copy text.
Overall, starting with Web allowed us to test our Proof of Concept (POC) with real users before refining the app for Android and iOS.
Performance Optimization: How We Handled Memory Leaks & Improved App Performance
Throughout the development of Sagwee, performance optimization was a key focus. One of the biggest challenges we encountered was managing memory leaks, especially in a multi-platform app.
Initially, we noticed that some parts of the app, particularly the real-time updates in the chatbot feature, were consuming more memory than expected. By using tools like DevTools, we were able to identify and resolve performance bottlenecks.
We also leveraged ListView.builder to display chat messages more efficiently, significantly reducing memory usage. As Flutter’s team notes when working with long lists, “The standard ListView constructor works well for small lists. To work with lists that contain a large number of items, it’s best to use the ListView.builder constructor.”
Lessons Learned
-
Flutter Web is a great starting point for proof of concept, but mobile platforms require more consideration when it comes to integration and payment systems.
-
Managing state in Flutter can be challenging, but choosing the right approach (like Riverpod for us) can make scaling easier.
-
Optimizing performance early on is critical for maintaining a seamless user experience—especially when real-time data is involved.
Looking Forward
As we continue to improve Sagwee, we’re working on adding more features and improvement, which we believe will significantly enhance the platform’s value.
If you want to see Sagwee in action, visit Sagwee.com or check it out in the Google Play Store for registered users.
