The gskinner team is well known in the Flutter community for combining innovative design with creative coding to build robust, beautiful applications. Over the past 20 years, our experienced designers and developers have consistently been challenged by our clients to push the boundaries of their platforms. When FlutterFlow came to us to apply this experience to their platform, we were intrigued by the potential to empower our designers and narrow the gap between the design and production phase. Starting fresh, we embarked on this journey and were surprised by what we learned along the way.
Over the last few months, we’ve been working closely with the FlutterFlow team on a small collection of app vignettes to push the boundaries of their platform for creating complex and expressive interfaces, while helping to showcase some exciting new features. This collaboration culminated at the FlutterFlow Developer Conference '24 where we showcased the vignettes during the keynote. If you haven't seen it yet, here's a quick rundown on Youtube.
We’ve been really impressed with the versatility of FlutterFlow and how quickly we were able to become proficient users. Initially, developers played a pivotal role in establishing the foundation and proving out complex functionalities, while designers focused primarily on building the UI within FlutterFlow. As the project progressed, designers became increasingly comfortable with the platform, taking on more responsibilities and contributing significantly to the development process, even writing custom actions and functions with the help of Code Copilot. By the final vignette, design was able to take implementation from start to finish independently, adding a variety of unique components and interactions along the way.
The creation of reusable components and functions streamlined the development process, empowering designers to experiment and even create some complex features themselves. This collaborative approach not only accelerated development but also fostered a deeper understanding of the platform for everyone.
Today we’re excited to announce that all three app vignettes are now free on the FlutterFlow Marketplace, and can be copied to your own workspace to learn from, use, or extend. By design, each of these projects only relies on FlutterFlow's native capabilities, minimizing the need for custom widgets and preserving the user experience within the UI builder and action flow editor. In this post, we’ll highlight some of the key features that can be found in each. A more in-depth technical deep dive will be coming soon, so keep an eye out for that.
AI Caption Generator Vignette
Our first vignette is a Caption Generator that uses AI to make creative social media style captions for photos. A key objective was to showcase a multimodal API call, so we crafted a request that would include an image, as well as a prompt derived from a variety of inputs.
The GPT prompt includes inputs you’d expect to find — character length, emoji and hashtag amounts. Then the whole thing is influenced by mood and tone value to customize the writing style.
We wanted a fun, lively UI for this, and the introduction of Gesture Detector support was key — unlocking a ton of flexibility to implement unique designs inside FlutterFlow, without using custom widgets.
From this vignette you can expect:
- A custom slider component that uses both Drag Update and Tap gesture actions to retrieve localPosition. Swap out the track, thumb, or the segment tick marks to suit your design.
- A new dual-axis style control with a custom action to transform X and Y Pan gesture coordinates into prompt weightings.
- An example of a multimodal API call for OpenAI
Get this project here.
Smart Home Hub Vignette
The second vignette is modeled around a smart home hub, a familiar UI packed with opportunities for interaction. For the visual design, we wanted a level of complexity that could challenge the capabilities of the FlutterFlow UI Builder, but implementing the complex aesthetic was straightforward and didn’t require any custom widgets to achieve.
We experimented with different ways to control values more naturally using Drag gestures, and found the delta particularly useful in this case. This worked really well when setting adjustments to slider style controls with no visible bounds.
From this vignette you can expect:
- Multi-function light tile component to toggle state and allow inline brightness adjustment with the Drag Update gesture.
- Reusable device template that swaps in custom controls with the Widget Builder parameter.
- A radial thermostat component built entirely with FlutterFlow Builder widgets. Its Drag gesture relies on delta to accumulatively increment/decrement values.
Get this project here.
Fitness Onboarding Vignette
For the final vignette, we applied our learnings so far to create a practical and responsive onboarding flow. We explored innovative design approaches, including skeuomorphic elements, to craft a unique and engaging experience.
Custom accordion and a multi-select chip control gave us plenty of opportunities to play with animations. Implementing and testing animations in the builder made it easy to come up with something that looked and felt good. We also snuck in an interesting little background effect that implicitly animates as the PageView index progresses.
From this vignette you can expect:
- A simple multi-step onboarding flow built in the PageView widget, with custom keyboard shortcuts to help navigate the flow.
- Three unique approaches to gesture-based selectors in the age, height and weight controls, complete with haptics that help give a real tactile feel.
- An embedded Spline 3D scene, customized by the user's inputs.
Get this project here.
Head over to the FlutterFlow Marketplace today and grab all three vignettes for free! We hope you can use them as a starting point for your own projects, learn from the code, or simply get inspired.
