How to use this gallery

Pick a widget from the grouped list (Buttons, Inputs, Navigation, Surfaces, Layout, Feedback). Interact with the preview to feel the state change, then hit Copy code and paste the snippet into your Flutter project. Search is instant — try chip, dialog, or AppBar.

When to use the IDE previewer instead

For @Preview functions on your own widgets, use Flutter’s official Widget Previewer (stable in 3.47). This page is for browsing framework Material patterns without opening an IDE.

FAQ

Are these real Flutter widgets running in the browser?

The previews are faithful Material 3-style recreations with real interaction (switches, chips, tabs, selection). The Dart on the right is the production API you paste into a Flutter app. For a full engine preview, use the official Flutter Widget Previewer in your IDE — this page is the fast lookup and copy layer.

Can I use the Dart snippets commercially?

Yes. They are standard Flutter framework APIs (Material widgets). Copy them into any project without attribution.

How do I find a widget quickly?

Use the search box in the left rail. It matches widget name, group, description, and code. On mobile the catalog collapses above the preview.