Flutter Widgets: The Complete Catalog with Code Examples

Flutter ships dozens of built-in widgets for handling input, layout, navigation, and visual feedback. This guide organizes the widgets covered on this site into five practical groups, with a short summary of what each one does and a link to the full tutorial with code examples. Use it as a starting point when you’re not sure which widget fits the UI you’re building.

Input & Forms

Widgets for collecting and validating user input.

• TextField — the standard single-line text input widget, the base for almost every form field in Flutter.
• Multiline TextField — configuring a TextField to grow across several lines, useful for comments or descriptions.
• Retrieving a TextField’s Value — reading what the user typed using a TextEditingController.
• Clearing a TextField — resetting input programmatically, e.g. after a form submits.
• Show/Hide Password — toggling the obscureText property for password fields.
• Prefix & Suffix Icons — adding icons inside a TextField, such as a search icon or a clear button.
• Numeric & String Validation — validating input format before accepting it.
• Hide Keyboard on Tap — dismissing the on-screen keyboard when the user taps outside a field.
• Checkbox — a simple boolean toggle widget.
• CheckboxListTile — a checkbox paired with a label in a single list row.
• Radio — single-choice selection from a group of options.
• DropdownButton — a tappable dropdown for choosing one value from a list.
• Slider — selecting a numeric value by dragging along a track.
• RangeSlider — the two-handle version of Slider, for picking a min/max range.
• ToggleButtons — a row of buttons where one or more can be selected at once.

Layout & Structure

The building blocks used to arrange every Flutter screen.

• Container — the general-purpose box widget for padding, margin, color, and decoration.
• Container with Text — a practical walkthrough of styling a Container around text content.
• Container Border — adding and styling a border via BoxDecoration.
• Row — arranging children horizontally.
• Column — arranging children vertically.
• Center — centering a single child within its parent.
• Scaffold — the top-level structure widget that provides the app bar, body, drawer, and floating action button slots.
• AppBar — the top navigation bar, usually placed inside a Scaffold.
• Drawer — a slide-out side navigation panel.
• Card — a Material-style panel with rounded corners and elevation, used to group related content.

Lists & Scrolling

Widgets for displaying scrollable or embedded content.

• GridView — laying out scrollable content in a grid instead of a single column.
• WebView — embedding a web page inside a Flutter screen.

Navigation & Tabs

Moving users between screens and sections of your app.

• Simple TabBar — the basic setup for tabbed navigation with TabBar and TabBarView.
• Custom TabBar — styling tabs beyond the Material defaults.
• TabBar with Image — adding icons or images to individual tabs.
• Bottom Navigation Bar — the bottom-of-screen navigation pattern (a different widget from TabBar, used for switching between top-level sections).
• SnackBar — a brief message that appears at the bottom of the screen.
• Navigate on Button Click — the basic pattern for pushing a new screen with Navigator.

Styling & Feedback

Visual polish, feedback widgets, and buttons.

• BoxShadow — adding drop shadows to a Container via BoxDecoration.
• Rounded Corners on Images — clipping an image to rounded corners.
• Tooltip — a floating label shown on long-press or hover, for accessibility and hints.
• Icon — displaying a Material or custom icon.
• Image — loading and displaying images from assets or the network.
• Progress Indicators — circular and linear indicators for loading states.
• Progress Bars — a focused example of a determinate linear progress bar.
• Banner — the Material diagonal ribbon widget, often used for labels like “New” or “Sale”.
• Banner Location — controlling where a Banner is anchored on screen.
• Removing the Debug Banner — turning off the “DEBUG” ribbon that appears in development builds.
• Splash Screen — the screen shown while your app launches.
• ElevatedButton — the standard raised Material button.
• TextButton — a flat, text-only button, typically used for lower-emphasis actions.

What’s Next

Widgets handle the UI layer, but most real apps also need to manage state as that UI changes — how you pass data between the screens and widgets covered above. We’re publishing a dedicated guide on Flutter state management (setState, Provider, Riverpod, and Bloc) soon; check back here for the link once it’s live.