Bishal Singh

Flutter Widgets List

9 minute read · 160 views · 7 likes

Note: This article was published over a year ago. Information within may have changed since then. While efforts are made to keep content current, please verify critical details before making decisions based on this information.

Comprehensive Guide to Flutter Widgets for Professional App Development

Flutter's widget-based architecture is the cornerstone of its flexible and powerful UI framework. Widgets serve as the essential components for crafting rich, responsive, and visually appealing user interfaces. This guide organizes and describes key Flutter widgets, reshuffled for a fresh perspective, to help developers understand their functionality and use cases for professional app development.

A. Layout Widgets

These widgets provide structure and organization for arranging other widgets in the UI.

  • Stack: Overlaps child widgets, allowing layered compositions.
  • GridView: Displays a scrollable grid of widgets.
  • ListView: Creates a scrollable list of widgets arranged linearly.
  • Wrap: Wraps child widgets to the next line when space is insufficient.
  • Table: Arranges child widgets in a tabular grid structure.
  • Flow: Enables custom layouts with flow-based positioning logic.
  • CustomScrollView: Provides a customizable scrollable area with slivers.
  • SliverList: A scrollable list designed for use within a CustomScrollView.
  • SliverGrid: A scrollable grid for use within a CustomScrollView.
  • SliverAppBar: A collapsible app bar for scrollable views.
  • SliverToBoxAdapter: Adapts a non-sliver widget for use in a sliver context.
  • SliverPadding: Adds padding around a sliver widget.
  • SliverFillRemaining: Fills remaining space in a scrollable area.
  • IndexedStack: Displays one child from a stack of widgets based on an index.
  • LayoutBuilder: Builds widgets dynamically based on parent constraints.
  • SingleChildScrollView: Provides a scrollable container for a single child.
  • ListBody: Arranges children in a linear sequence, typically for lists.
  • SafeArea: Ensures content avoids system UI elements like notches or status bars.

B. Basic Widgets

These core widgets form the foundation for constructing user interfaces.

  • Container: A versatile widget with padding, margins, borders, and decorations.
  • Text: Displays styled text with customizable font, size, and color properties.
  • Row: Arranges child widgets horizontally in a linear layout.
  • Column: Arranges child widgets vertically in a linear layout.
  • Padding: Adds customizable space around a child widget.
  • Center: Centers its child within its allocated space.
  • Align: Positions its child within its bounds using alignment properties.
  • Expanded: Expands a child to fill available space in a flex container.
  • Flexible: Allows a child to resize flexibly within a flex container.
  • SizedBox: Defines a box with fixed width and height.
  • Spacer: Occupies flexible space to separate widgets in a Row or Column.
  • AspectRatio: Enforces a specific aspect ratio for its child.
  • ConstrainedBox: Applies minimum and maximum size constraints to its child.
  • Baseline: Aligns a child based on its text baseline.
  • FittedBox: Scales and positions its child to fit within its bounds.
  • FractionallySizedBox: Sizes its child relative to the parent’s dimensions.
  • IntrinsicHeight: Forces its child to match its intrinsic height.
  • IntrinsicWidth: Forces its child to match its intrinsic width.
  • LimitedBox: Restricts child size when unconstrained.
  • Offstage: Hides its child without removing it from the widget tree.
  • OverflowBox: Allows a child to overflow its parent’s boundaries.
  • Transform: Applies transformations like rotation or scaling to its child.

C. Material & Cupertino Widgets

These widgets provide platform-specific designs for Material (Android) and Cupertino (iOS) aesthetics.

  • Scaffold: Implements the basic Material Design layout structure.
  • MaterialApp: Sets up a Material Design app with navigation and theming.
  • AppBar: Displays a top app bar with title and action buttons.
  • BottomNavigationBar: Provides bottom tab navigation for Material apps.
  • TabBar: Displays a tab bar for navigation.
  • TabBarView: Shows content corresponding to the selected tab.
  • Drawer: A side navigation panel that slides in from the edge.
  • FloatingActionButton: A circular button for primary actions in Material Design.
  • SnackBar: Shows a temporary message at the bottom of the screen.
  • BottomSheet: A panel that slides up from the bottom.
  • Card: A Material Design card with elevation and rounded corners.
  • Chip: A compact element for filters or tags.
  • Divider: A thin horizontal line for separating content.
  • ListTile: A fixed-height row, typically used in lists.
  • Stepper: A widget for multi-step forms or processes.
  • DataTable: Displays data in a tabular format with rows and columns.
  • CheckboxListTile: A ListTile with an integrated checkbox.
  • RadioListTile: A ListTile with a radio button for single selection.
  • SwitchListTile: A ListTile with a toggle switch.
  • ExpansionTile: A list item that expands to show additional content.
  • CupertinoApp: Sets up an iOS-style app with Cupertino theming.
  • CupertinoButton: An iOS-style button.
  • CupertinoPicker: An iOS-style spinning picker for selections.
  • CupertinoSlider: An iOS-style slider for value selection.
  • CupertinoSwitch: An iOS-style toggle switch.
  • CupertinoTabBar: An iOS-style bottom tab bar.
  • CupertinoTextField: An iOS-style text input field.

D. Buttons & Inputs

Widgets for user interaction, including buttons and input fields.

  • TextField: A single-line text input field.
  • TextFormField: A text input field designed for use within forms.
  • Form: Manages form state and validation for input fields.
  • ElevatedButton: A Material Design raised button with elevation.
  • TextButton: A flat, text-based Material button.
  • OutlinedButton: A Material button with an outlined border.
  • IconButton: A button displaying an icon.
  • DropdownButton: Displays a dropdown menu for selection.
  • PopupMenuButton: Shows a pop-up menu with options.
  • ButtonBar: Groups buttons in a horizontal row.
  • RawMaterialButton: A customizable low-level Material button.
  • Checkbox: A toggleable checkbox for boolean input.
  • Radio: A radio button for single-selection options.
  • Slider: A widget for selecting a value within a range.
  • Switch: A toggle switch for on/off states.
  • RichText: Displays text with multiple styles in a single widget.
  • GestureDetector: Detects gestures like taps and swipes.
  • InkWell: Adds Material Design ripple effects on tap.
  • Dismissible: A widget that can be swiped away to remove it.

E. Images & Icons Widgets for displaying visual assets like images and icons.

  • Image: Displays an image from various sources.
  • Icon: Renders a Material or Cupertino icon.
  • CircleAvatar: A circular widget for images or icons.
  • FadeInImage: Loads an image with a fade-in effect.
  • NetworkImage: Loads an image from a URL.
  • AssetImage: Loads an image from the app’s assets.
  • RawImage: A low-level widget for displaying images.
  • ImageIcon: Displays an icon sourced from an image.
  • Placeholder: Represents content that is yet to be loaded.

F. Animations & Motion

Widgets that enable smooth animations and transitions.

  • AnimatedContainer: Animates changes in size, color, or other properties.
  • AnimatedCrossFade: Cross-fades between two child widgets.
  • AnimatedOpacity: Animates changes in opacity.
  • AnimatedSize: Animates size changes of its child.
  • AnimatedPositioned: Animates positional changes within a Stack.
  • AnimatedAlign: Animates alignment changes of its child.
  • AnimatedBuilder: Builds custom animations with an AnimationController.
  • Hero: Creates smooth transitions between screens for shared elements.
  • TweenAnimationBuilder: Animates between two values using a tween.
  • SlideTransition: Slides a widget in or out of view.
  • ScaleTransition: Scales a widget during an animation.
  • RotationTransition: Rotates a widget during an animation.
  • FadeTransition: Fades a widget in or out.
  • AnimatedList: Animates changes in a list dynamically.
  • AnimatedSwitcher: Switches between widgets with an animation.

G. Navigation & Routing

Widgets for managing navigation and screen transitions.

  • Navigator: Manages a stack of screens for navigation.
  • MaterialPageRoute: Provides a standard Material Design page transition.
  • PageView: Enables scrollable page-based navigation.
  • TabController: Controls switching between tabs.
  • WillPopScope: Intercepts back button presses for custom behavior.
  • RouteObserver: Observes and reacts to route changes.

H. Dialogs & Alerts

Widgets for displaying pop-up dialogs and alerts.

  • AlertDialog: A Material Design dialog with title, content, and actions.
  • SimpleDialog: A dialog with a list of selectable options.
  • Dialog: A basic dialog container for custom content.
  • CupertinoAlertDialog: An iOS-style alert dialog.
  • ModalBottomSheet: A sheet that slides up from the bottom.
  • AboutDialog: Displays application information.
  • TimePickerDialog: Allows users to select a time.
  • DatePickerDialog: Allows users to select a date.

I. State Management Widgets

Widgets for managing and updating application state.

  • StatefulBuilder: Rebuilds a specific part of the widget tree.
  • InheritedWidget: Shares data down the widget tree.
  • Provider: A simple state management solution.
  • Consumer: Listens to changes in a Provider.
  • Selector: Rebuilds only when specific data changes.
  • ChangeNotifierProvider: Manages mutable state with a ChangeNotifier.
  • FutureProvider: Provides data from a Future.
  • StreamProvider: Provides data from a Stream.
  • ValueListenableBuilder: Rebuilds based on a ValueListenable.
  • StreamBuilder: Builds widgets based on Stream data.
  • FutureBuilder: Builds widgets based on Future data.

J. Styling & Theming

Widgets for customizing the appearance of the UI.

  • Theme: Applies a consistent theme to descendant widgets.
  • MediaQuery: Accesses screen size, orientation, and other device metrics.
  • DefaultTextStyle: Sets default text styles for descendants.
  • CustomPaint: Enables custom drawing using a Canvas.
  • ClipRRect: Clips its child with rounded corners.
  • ClipOval: Clips its child into an oval shape.
  • ClipPath: Clips its child using a custom path.
  • DecoratedBox: Applies decorations like gradients or borders.
  • RotatedBox: Rotates its child in 90-degree increments.
  • BackdropFilter: Applies blur or other filter effects.
  • ShaderMask: Applies shader effects to its child.
  • PhysicalModel: Adds realistic shadows and elevation.
  • Material: Provides a Material Design surface with ink effects.

K. Accessibility

Widgets that enhance app accessibility for all users.

  • Semantics: Adds accessibility labels for screen readers.
  • ExcludeSemantics: Removes semantics from child widgets.
  • MergeSemantics: Combines semantics of descendant widgets.
  • Tooltip: Displays a hint on long-press for accessibility.

L. Advanced UI Components

Widgets for advanced interactions and UI behaviors.

  • ReorderableListView: A list where items can be reordered via drag-and-drop.
  • Draggable: Enables a widget to be dragged.
  • DragTarget: Defines a target for draggable widgets.
  • LongPressDraggable: A draggable widget activated by a long press.
  • InteractiveViewer: Supports zooming and panning gestures.
  • IgnorePointer: Ignores touch events for its child.
  • AbsorbPointer: Absorbs touch events, preventing interaction with children.
  • Opacity: Adjusts the transparency of its child.
  • Visibility: Toggles the visibility of its child.
  • SelectableText: Allows text to be selected and copied.

M. Testing & Debugging

Widgets and tools for testing and debugging Flutter apps.

  • GoldenFileComparator: Compares UI renders to golden image files.
  • TestWidgetsFlutterBinding: Sets up the testing framework for Flutter widgets.

N. Utility Widgets

Miscellaneous widgets that provide additional functionality.

  • Builder: Provides a build context for custom widget creation.
  • PageStorage: Saves and restores scroll positions across navigations.
  • NotificationListener: Listens to scroll or other notification events.
  • KeepAlive: Prevents off-screen widgets from being disposed.
  • Autocomplete: Provides auto-suggestions for text input fields.
  • RefreshIndicator: Implements a pull-to-refresh interaction pattern.

O. Popular Package Widgets

Commonly used widgets from popular Flutter packages.

  • SvgPicture (flutter_svg): Renders scalable vector graphics (SVGs).
  • CachedNetworkImage (cached_network_image): Loads and caches network images.
  • BlocBuilder (flutter_bloc): Builds UI based on BLoC state changes.
  • CarouselSlider (carousel_slider): Displays a scrollable image carousel.
  • FlutterMap (flutter_map): Renders interactive maps.

This guide provides a professional and structured overview of Flutter’s widget ecosystem, enabling developers to efficiently select and apply widgets for robust app development.

Privacy Policy RSS Feed Built with Laravel and Filament Github