iiinova — where your digital self keeps evolving

Widgetbook @widgetbook.bsky.social · 20/05/2025

Testing #Flutter UIs in isolation with Widgetbook addons and knobs gives endless possibilities: themes, locales, screen sizes, dynamic input, and more! Chain those variations together and get automated screenshot testing with Widgetbook Cloud's addons and knobs configurations 🚀

100

Widgetbook @widgetbook.bsky.social · 19/05/2025

Widgetbook Knobs are a great way to validate that your #Flutter widgets don’t break under various conditions and inputs 🧪 Built-in knobs already support common types, but you can go further and create your own, like this enum knob, and match your app’s specific needs 🚀

110

Widgetbook @widgetbook.bsky.social · 16/05/2025

#Flutter UI testing tip: Utilize the #Widgetbook UseCase annotation's *designLink* property and easily access the original #Figma design while reviewing UI changes and detecting UI regressions in your Widgetbook Cloud pull requests 🧪👇🏻

100

Widgetbook @widgetbook.bsky.social · 13/05/2025

Complex #Flutter screens with state dependencies become harder to test in isolation, and that's why they *should* be tested! 🧪 Control input data & interactively test all states of your complex UI by mocking dependencies in your isolated #Widgetbook use cases 🚀👇🏻

100

Widgetbook @widgetbook.bsky.social · 12/05/2025

What if you can automate screenshot testing of specific stages of your complex #Flutter animation without writing any golden tests? That's easily possible via Widgetbook Cloud's knobs configurations. Here's how 👇🏻

321

Widgetbook @widgetbook.bsky.social · 07/05/2025

#Flutter UI testing tip: ✅ You manually test your widgets in many devices in your #Widgetbook using the #ViewportAddon 🚀 Take it further: use the #ViewportAddonConfig and let Widgetbook Cloud automate screenshot testing across all those devices on all your PRs 🧪👇🏻

121

Widgetbook @widgetbook.bsky.social · 06/05/2025

Made a UI change somewhere, and broke the UI somewhere else? Classic UI regression 😪 Avoid this easily in your #Flutter app, without writing golden tests, by integrating Widgetbook Cloud in your testing process 👇🏻 🔗 Learn more and get started for free docs.widgetbook.io/cloud

030

Widgetbook @widgetbook.bsky.social · 02/05/2025

#Flutter animation tip: Test your complex animations in isolation from the rest of the UI by configuring #Widgetbook UseCases for them 🧪 Take it a step further and debug each frame by hooking up a slider knob to the animation controller value 👇🏻

020

Widgetbook @widgetbook.bsky.social · 30/04/2025

Did you know, there are ~12 languages spoken by ~20% of the global population that use right-to-left #RTL layout? Build layout-flipping resilient #Flutter UIs by using built-in Directional widgets, and #Widgetbook's #LocalizationAddon for an inclusive UI testing workflow 🚀💪🏼

122

Widgetbook @widgetbook.bsky.social · 29/04/2025

Who amongst us hasn’t wished they only had to build UIs for one screen size? 😪 Thankfully, #Flutter widgets like #LayoutBuilder make it possible to support many screen sizes 📐 Combine that with #Widgetbook's #ViewportAddon, and responsiveness is your app's default 🚀

110

Widgetbook @widgetbook.bsky.social · 28/04/2025

#Flutter accessibility tip: Avoiding fixed heights on widgets containing text is one of many ways to ensure your UI doesn’t break for user devices with larger text scales 🚧 Use #Widgetbook’s #TextScaleAddon to test all your widgets' behavior for different font sizes 📐👇🏻

131

Widgetbook @widgetbook.bsky.social · 25/04/2025

Ever gotten too confident about a #Flutter UI you built, pushed to production, then discovered that it breaks with longer text? 🚧 😢 Prevent this early in the development process by using a string knob in your dedicated #Widgetbook UI testing environment 🚀👇🏻 #FlutterDev

130

Widgetbook @widgetbook.bsky.social · 24/04/2025

#Flutter tip: Listen to MediaQuery’s #platfromBrightness property to update your UI based on your user device's dark or light mode 🎨 Combine this with #Widgetbook’s ThemeAddon to easily validate that behavior for all widgets across your app, small or complex 🚀 #FlutterDev

272

Widgetbook @widgetbook.bsky.social · 23/04/2025

This is just the beginning 🛣️ Starting from this set up, you can leverage Widgetbook's different OSS features to test your widgets in isolation and in different themes, locales, and many more configurations

110

Widgetbook @widgetbook.bsky.social · 23/04/2025

You can now start exploring your dedicated UI testing workspace by running code generation and your Widgetbook #Flutter app 5/5

110

Widgetbook @widgetbook.bsky.social · 23/04/2025

Lastly, adjust the Widgetbook workspace's main method to return a Widgetbook widget annotated with an #App annotation 4/5

110

Widgetbook @widgetbook.bsky.social · 23/04/2025

You're now ready to add your first use-case! 🚀 Simply add a file in your #Widgetbook app and create a callback that returns your widget, and annotate it with a #UseCase annotation 3/5

110

Widgetbook @widgetbook.bsky.social · 23/04/2025

Next, add your app as a path dependency to your #Widgetbook workspace to be able to import widgets from it 2/5

130

Widgetbook @widgetbook.bsky.social · 23/04/2025

Start by creating a #Flutter app that acts as your dedicated UI testing workspace and uses the #Widgetbook open source Flutter packages 1/5

110