Widgetbook
@widgetbook.bsky.social
The collaboration platform for Flutter frontend teams
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 🚀
Chain those variations together and get automated screenshot testing with Widgetbook Cloud's addons and knobs configurations 🚀
May 20, 2025 at 8:15 PM
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 🚀
Chain those variations together and get automated screenshot testing with Widgetbook Cloud's addons and knobs configurations 🚀
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 🚀
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 🚀
May 19, 2025 at 3:12 PM
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 🚀
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 🚀
#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 🧪👇🏻
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 🧪👇🏻
May 16, 2025 at 3:00 PM
#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 🧪👇🏻
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 🧪👇🏻
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 🚀👇🏻
Control input data & interactively test all states of your complex UI by mocking dependencies in your isolated #Widgetbook use cases 🚀👇🏻
May 13, 2025 at 1:08 PM
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 🚀👇🏻
Control input data & interactively test all states of your complex UI by mocking dependencies in your isolated #Widgetbook use cases 🚀👇🏻
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 👇🏻
That's easily possible via Widgetbook Cloud's knobs configurations. Here's how 👇🏻
May 12, 2025 at 3:35 PM
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 👇🏻
That's easily possible via Widgetbook Cloud's knobs configurations. Here's how 👇🏻
#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 🧪👇🏻
✅ 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 🧪👇🏻
May 7, 2025 at 1:52 PM
#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 🧪👇🏻
✅ 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 🧪👇🏻
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
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
May 6, 2025 at 4:16 PM
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
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
#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 👇🏻
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 👇🏻
May 2, 2025 at 5:56 PM
#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 👇🏻
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 👇🏻
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 🚀💪🏼
Build layout-flipping resilient #Flutter UIs by using built-in Directional widgets, and #Widgetbook's #LocalizationAddon for an inclusive UI testing workflow 🚀💪🏼
April 30, 2025 at 3:02 PM
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 🚀💪🏼
Build layout-flipping resilient #Flutter UIs by using built-in Directional widgets, and #Widgetbook's #LocalizationAddon for an inclusive UI testing workflow 🚀💪🏼
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 🚀
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 🚀
April 29, 2025 at 3:53 PM
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 🚀
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 🚀
#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 📐👇🏻
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 📐👇🏻
April 28, 2025 at 12:18 PM
#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 📐👇🏻
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 📐👇🏻
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
Prevent this early in the development process by using a string knob in your dedicated #Widgetbook UI testing environment 🚀👇🏻
#FlutterDev
April 25, 2025 at 3:11 PM
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
Prevent this early in the development process by using a string knob in your dedicated #Widgetbook UI testing environment 🚀👇🏻
#FlutterDev
#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
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
April 24, 2025 at 2:26 PM
#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
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
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
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
April 23, 2025 at 1:57 PM
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
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
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
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
April 23, 2025 at 1:57 PM
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
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
Next, add your app as a path dependency to your #Widgetbook workspace to be able to import widgets from it
2/5
2/5
April 23, 2025 at 1:57 PM
Next, add your app as a path dependency to your #Widgetbook workspace to be able to import widgets from it
2/5
2/5
Start by creating a #Flutter app that acts as your dedicated UI testing workspace and uses the #Widgetbook open source Flutter packages
1/5
1/5
April 23, 2025 at 1:57 PM
Start by creating a #Flutter app that acts as your dedicated UI testing workspace and uses the #Widgetbook open source Flutter packages
1/5
1/5