Flutter Widget 目录

你可以在下方以字母顺序查看各个 Widget 的使用方法,几乎包括了所有与 Flutter 相关的 widget。除此之外你还可以查阅 核心 Widget 目录

我们每周都会在 Youtube Flutter 频道 发布关于 Widget 的系列视频,你可以前去观看学习。每一个短视频都介绍了一个不同的 Flutter Widget。关于更多系列视频,也欢迎查看我们的 学习 Flutter 的视频列表

Widget 视频的每周播放列表

Flutter Widget 目录 - 图1 AbsorbPointer A widget that absorbs pointers during hit testing. When absorbing is true, this widget prevents its subtree from receiving pointer events by terminating hit testing at itself. It still consumes space during layout and paints its child as usual. It just prevents its children from being the target of located events, because it returns true from RenderBox.hitTest.

Documentation

Flutter Widget 目录 - 图2 AlertDialog Alerts are urgent interruptions requiring acknowledgement that inform the user about a situation. The AlertDialog widget implements this component.

Documentation

Flutter Widget 目录 - 图3 Align A widget that aligns its child within itself and optionally sizes itself based on the child's size.

Documentation

Flutter Widget 目录 - 图4 AnimatedBuilder A general-purpose widget for building animations. AnimatedBuilder is useful for more complex widgets that wish to include an animation as part of a larger build function. To use AnimatedBuilder, simply construct the widget and pass it a builder function.

Documentation

Flutter Widget 目录 - 图5 AnimatedContainer A container that gradually changes its values over a period of time.

Documentation

Flutter Widget 目录 - 图6 AnimatedCrossFade A widget that cross-fades between two given children and animates itself between their sizes.

Documentation

Flutter Widget 目录 - 图7 AnimatedDefaultTextStyle Animated version of DefaultTextStyle which automatically transitions the default text style (the text style to apply to descendant Text widgets without explicit style) over a given duration whenever the given style changes.

Documentation

Flutter Widget 目录 - 图8 AnimatedListState The state for a scrolling container that animates items when they are inserted or removed.

Documentation

Flutter Widget 目录 - 图9 AnimatedModalBarrier A widget that prevents the user from interacting with widgets behind itself.

Documentation

Flutter Widget 目录 - 图10 AnimatedOpacity Animated version of Opacity which automatically transitions the child's opacity over a given duration whenever the given opacity changes.

Documentation

Flutter Widget 目录 - 图11 AnimatedPhysicalModel Animated version of PhysicalModel.

Documentation

Flutter Widget 目录 - 图12 AnimatedPositioned Animated version of Positioned which automatically transitions the child's position over a given duration whenever the given position changes.

Documentation

Flutter Widget 目录 - 图13 AnimatedSize Animated widget that automatically transitions its size over a given duration whenever the given child's size changes.

Documentation

Flutter Widget 目录 - 图14 AnimatedWidget A widget that rebuilds when the given Listenable changes value.

Documentation

Flutter Widget 目录 - 图15 AnimatedWidgetBaseState A base class for widgets with implicit animations.

Documentation

Flutter Widget 目录 - 图16 Appbar A Material Design app bar. An app bar consists of a toolbar and potentially other widgets, such as a TabBar and a FlexibleSpaceBar.

Documentation

Flutter Widget 目录 - 图17 AspectRatio A widget that attempts to size the child to a specific aspect ratio.

Documentation

Flutter Widget 目录 - 图18 AssetBundle Asset bundles contain resources, such as images and strings, that can be used by an application. Access to these resources is asynchronous so that they can be transparently loaded over a network (e.g., from a NetworkAssetBundle) or from the local file system without blocking the application's user interface.

Documentation

Flutter Widget 目录 - 图19 BackdropFilter A widget that applies a filter to the existing painted content and then paints child. This effect is relatively expensive, especially if the filter is non-local, such as a blur.

Documentation

Flutter Widget 目录 - 图20 Baseline A widget that positions its child according to the child's baseline.

Documentation

Flutter Widget 目录 - 图21 BottomNavigationBar Bottom navigation bars make it easy to explore and switch between top-level views in a single tap. The BottomNavigationBar widget implements this component.

Documentation

Flutter Widget 目录 - 图22 BottomSheet Bottom sheets slide up from the bottom of the screen to reveal more content. You can call showBottomSheet() to implement a persistent bottom sheet or showModalBottomSheet() to implement a modal bottom sheet.

Documentation

Flutter Widget 目录 - 图23 ButtonBar A horizontal arrangement of buttons.

Documentation

Flutter Widget 目录 - 图24 Card A Material Design card. A card has slightly rounded corners and a shadow.

Documentation

Flutter Widget 目录 - 图25 Center A widget that centers its child within itself.

Documentation

Flutter Widget 目录 - 图26 Checkbox Checkboxes allow the user to select multiple options from a set. The Checkbox widget implements this component.

Documentation

Flutter Widget 目录 - 图27 Chip A Material Design chip. Chips represent complex entities in small blocks, such as a contact.

Documentation

Flutter Widget 目录 - 图28 CircularProgressIndicator A material design circular progress indicator, which spins to indicate that the application is busy.

Documentation

Flutter Widget 目录 - 图29 ClipOval A widget that clips its child using an oval.

Documentation

Flutter Widget 目录 - 图30 ClipPath A widget that clips its child using a path.

Documentation

Flutter Widget 目录 - 图31 ClipRect A widget that clips its child using a rectangle.

Documentation

Flutter Widget 目录 - 图32 Column Layout a list of child widgets in the vertical direction.

Documentation

Flutter Widget 目录 - 图33 ConstrainedBox A widget that imposes additional constraints on its child.

Documentation

Flutter Widget 目录 - 图34 Container A convenience widget that combines common painting, positioning, and sizing widgets.

Documentation

Flutter Widget 目录 - 图35 CupertinoActionSheet An iOS-style modal bottom action sheet to choose an option among many.

Documentation

Flutter Widget 目录 - 图36 CupertinoActivityIndicator An iOS-style activity indicator. Displays a circular 'spinner'.

Documentation

Flutter Widget 目录 - 图37 CupertinoAlertDialog An iOS-style alert dialog.

Documentation

Flutter Widget 目录 - 图38 CupertinoButton An iOS-style button.

Documentation

Flutter Widget 目录 - 图39 CupertinoDatePicker An iOS-style date or date and time picker.

Documentation

Flutter Widget 目录 - 图40 CupertinoDialog An iOS-style dialog.

Documentation

Flutter Widget 目录 - 图41 CupertinoDialogAction A button typically used in a CupertinoAlertDialog.

Documentation

Flutter Widget 目录 - 图42 CupertinoFullscreenDialogTransition An iOS-style transition used for summoning fullscreen dialogs.

Documentation

Flutter Widget 目录 - 图43 CupertinoNavigationBar An iOS-style top navigation bar. Typically used with CupertinoPageScaffold.

Documentation

Flutter Widget 目录 - 图44 CupertinoPageScaffold Basic iOS style page layout structure. Positions a navigation bar and content on a background.

Documentation

Flutter Widget 目录 - 图45 CupertinoPageTransition Provides an iOS-style page transition animation.

Documentation

Flutter Widget 目录 - 图46 CupertinoPicker An iOS-style picker control. Used to select an item in a short list.

Documentation

Flutter Widget 目录 - 图47 CupertinoPopupSurface Rounded rectangle surface that looks like an iOS popup surface, such as an alert dialog or action sheet.

Documentation

Flutter Widget 目录 - 图48 CupertinoScrollbar An iOS-style scrollbar that indicates which portion of a scrollable widget is currently visible.

Documentation

Flutter Widget 目录 - 图49 CupertinoSegmentedControl An iOS-style segmented control. Used to select mutually exclusive options in a horizontal list.

Documentation

Flutter Widget 目录 - 图50 CupertinoSlider Used to select from a range of values.

Documentation

Flutter Widget 目录 - 图51 CupertinoSwitch An iOS-style switch. Used to toggle the on/off state of a single setting.

Documentation

Flutter Widget 目录 - 图52 CupertinoTabBar An iOS-style bottom tab bar. Typically used with CupertinoTabScaffold.

Documentation

Flutter Widget 目录 - 图53 CupertinoTabScaffold Tabbed iOS app structure. Positions a tab bar on top of tabs of content.

Documentation

Flutter Widget 目录 - 图54 CupertinoTabView Root content of a tab that supports parallel navigation between tabs. Typically used with CupertinoTabScaffold.

Documentation

Flutter Widget 目录 - 图55 CupertinoTextField An iOS-style text field.

Documentation

Flutter Widget 目录 - 图56 CupertinoTimerPicker An iOS-style countdown timer picker.

Documentation

Flutter Widget 目录 - 图57 CustomMultiChildLayout A widget that uses a delegate to size and position multiple children.

Documentation

Flutter Widget 目录 - 图58 CustomPaint A widget that provides a canvas on which to draw during the paint phase.

Documentation

Flutter Widget 目录 - 图59 CustomScrollView A ScrollView that creates custom scroll effects using slivers.

Documentation

Flutter Widget 目录 - 图60 CustomSingleChildLayout A widget that defers the layout of its single child to a delegate.

Documentation

Flutter Widget 目录 - 图61 DataTable Data tables display sets of raw data. They usually appear in desktop enterprise products. The DataTable widget implements this component.

Documentation

Flutter Widget 目录 - 图62 Date & Time Pickers Date pickers use a dialog window to select a single date on mobile. Time pickers use a dialog to select a single time (in the hours:minutes format) on mobile.

Documentation

Flutter Widget 目录 - 图63 DecoratedBox A widget that paints a Decoration either before or after its child paints.

Documentation

Flutter Widget 目录 - 图64 DecoratedBoxTransition Animated version of a DecoratedBox that animates the different properties of its Decoration.

Documentation

Flutter Widget 目录 - 图65 DefaultTextStyle The text style to apply to descendant Text widgets without explicit style.

Documentation

Flutter Widget 目录 - 图66 Dismissible A widget that can be dismissed by dragging in the indicated direction. Dragging or flinging this widget in the DismissDirection causes the child to slide out of view. Following the slide animation, if resizeDuration is non-null, the Dismissible widget animates its height (or width, whichever is perpendicular to the dismiss direction) to zero over the resizeDuration.

Documentation

Flutter Widget 目录 - 图67 Divider A one logical pixel thick horizontal line, with padding on either side.

Documentation

Flutter Widget 目录 - 图68 DragTarget A widget that receives data when a Draggable widget is dropped. When a draggable is dragged on top of a drag target, the drag target is asked whether it will accept the data the draggable is carrying. If the user does drop the draggable on top of the drag target (and the drag target has indicated that it will accept the draggable's data), then the drag target is asked to accept the draggable's data.

Documentation

Flutter Widget 目录 - 图69 Draggable A widget that can be dragged from to a DragTarget. When a draggable widget recognizes the start of a drag gesture, it displays a feedback widget that tracks the user's finger across the screen. If the user lifts their finger while on top of a DragTarget, that target is given the opportunity to accept the data carried by the draggable.

Documentation

Flutter Widget 目录 - 图70 Drawer A Material Design panel that slides in horizontally from the edge of a Scaffold to show navigation links in an application.

Documentation

Flutter Widget 目录 - 图71 DropdownButton Shows the currently selected item and an arrow that opens a menu for selecting another item.

Documentation

Flutter Widget 目录 - 图72 ExcludeSemantics A widget that drops all the semantics of its descendants. This can be used to hide subwidgets that would otherwise be reported but that would only be confusing. For example, the Material Components Chip widget hides the avatar since it is redundant with the chip label.

Documentation

Flutter Widget 目录 - 图73 Expanded A widget that expands a child of a Row, Column, or Flex.

Documentation

Flutter Widget 目录 - 图74 ExpansionPanel Expansion panels contain creation flows and allow lightweight editing of an element. The ExpansionPanel widget implements this component.

Documentation

Flutter Widget 目录 - 图75 FadeTransition Animates the opacity of a widget.

Documentation

Flutter Widget 目录 - 图76 FittedBox Scales and positions its child within itself according to fit.

Documentation

Flutter Widget 目录 - 图77 FlatButton A flat button is a section printed on a Material Components widget that reacts to touches by filling with color.

Documentation

Flutter Widget 目录 - 图78 FloatingActionButton A floating action button is a circular icon button that hovers over content to promote a primary action in the application. Floating action buttons are most commonly used in the Scaffold.floatingActionButton field.

Documentation

Flutter Widget 目录 - 图79 Flow A widget that implements the flow layout algorithm.

Documentation

Flutter Widget 目录 - 图80 FlutterLogo The Flutter logo, in widget form. This widget respects the IconTheme.

Documentation

Flutter Widget 目录 - 图81 Form An optional container for grouping together multiple form field widgets (e.g. TextField widgets).

Documentation

Flutter Widget 目录 - 图82 FormField A single form field. This widget maintains the current state of the form field, so that updates and validation errors are visually reflected in the UI.

Documentation

Flutter Widget 目录 - 图83 FractionalTranslation A widget that applies a translation expressed as a fraction of the box's size before painting its child.

Documentation

Flutter Widget 目录 - 图84 FractionallySizedBox A widget that sizes its child to a fraction of the total available space. For more details about the layout algorithm, see RenderFractionallySizedOverflowBox.

Documentation

Flutter Widget 目录 - 图85 FutureBuilder Widget that builds itself based on the latest snapshot of interaction with a Future.

Documentation

Flutter Widget 目录 - 图86 GestureDetector A widget that detects gestures. Attempts to recognize gestures that correspond to its non-null callbacks. If this widget has a child, it defers to that child for its sizing behavior. If it does not have a child, it grows to fit the parent instead.

Documentation

Flutter Widget 目录 - 图87 GridView A grid list consists of a repeated pattern of cells arrayed in a vertical and horizontal layout. The GridView widget implements this component.

Documentation

Flutter Widget 目录 - 图88 Hero A widget that marks its child as being a candidate for hero animations.

Documentation

Flutter Widget 目录 - 图89 Icon A Material Design icon.

Documentation

Flutter Widget 目录 - 图90 IconButton An icon button is a picture printed on a Material widget that reacts to touches by filling with color (ink).

Documentation

Flutter Widget 目录 - 图91 IgnorePointer A widget that is invisible during hit testing. When ignoring is true, this widget (and its subtree) is invisible to hit testing. It still consumes space during layout and paints its child as usual. It just cannot be the target of located events, because it returns false from RenderBox.hitTest.

Documentation

Flutter Widget 目录 - 图92 Image A widget that displays an image.

Documentation

Flutter Widget 目录 - 图93 IndexedStack A Stack that shows a single child from a list of children.

Documentation

Flutter Widget 目录 - 图94 IntrinsicHeight A widget that sizes its child to the child's intrinsic height.

Documentation

Flutter Widget 目录 - 图95 IntrinsicWidth A widget that sizes its child to the child's intrinsic width.

Documentation

Flutter Widget 目录 - 图96 LayoutBuilder Builds a widget tree that can depend on the parent widget's size.

Documentation

Flutter Widget 目录 - 图97 LimitedBox A box that limits its size only when it's unconstrained.

Documentation

Flutter Widget 目录 - 图98 LinearProgressIndicator A material design linear progress indicator, also known as a progress bar.

Documentation

Flutter Widget 目录 - 图99 ListBody A widget that arranges its children sequentially along a given axis, forcing them to the dimension of the parent in the other axis.

Documentation

Flutter Widget 目录 - 图100 ListTile A single fixed-height row that typically contains some text as well as a leading or trailing icon.

Documentation

Flutter Widget 目录 - 图101 ListView A scrollable, linear list of widgets. ListView is the most commonly used scrolling widget. It displays its children one after another in the scroll direction. In the cross axis, the children are required to fill the ListView.

Documentation

Flutter Widget 目录 - 图102 LongPressDraggable Makes its child draggable starting from long press.

Documentation

Flutter Widget 目录 - 图103 MaterialApp A convenience widget that wraps a number of widgets that are commonly required for applications implementing Material Design.

Documentation

Flutter Widget 目录 - 图104 MediaQuery Establishes a subtree in which media queries resolve to the given data.

Documentation

Flutter Widget 目录 - 图105 MergeSemantics A widget that merges the semantics of its descendants.

Documentation

Flutter Widget 目录 - 图106 Navigator A widget that manages a set of child widgets with a stack discipline. Many apps have a navigator near the top of their widget hierarchy in order to display their logical history using an Overlay with the most recently visited pages visually on top of the older pages. Using this pattern lets the navigator visually transition from one page to another by moving the widgets around in the overlay. Similarly, the navigator can be used to show a dialog by positioning the dialog widget above the current page.

Documentation

Flutter Widget 目录 - 图107 NestedScrollView A scrolling view inside of which can be nested other scrolling views, with their scroll positions being intrinsically linked.

Documentation

Flutter Widget 目录 - 图108 NotificationListener A widget that listens for Notifications bubbling up the tree.

Documentation

Flutter Widget 目录 - 图109 Offstage A widget that lays the child out as if it was in the tree, but without painting anything, without making the child available for hit testing, and without taking any room in the parent.

Documentation

Flutter Widget 目录 - 图110 Opacity A widget that makes its child partially transparent.

Documentation

Flutter Widget 目录 - 图111 OverflowBox A widget that imposes different constraints on its child than it gets from its parent, possibly allowing the child to overflow the parent.

Documentation

Flutter Widget 目录 - 图112 Padding A widget that insets its child by the given padding.

Documentation

Flutter Widget 目录 - 图113 PageView A scrollable list that works page by page.

Documentation

Flutter Widget 目录 - 图114 Placeholder A widget that draws a box that represents where other widgets will one day be added.

Documentation

Flutter Widget 目录 - 图115 PopupMenuButton Displays a menu when pressed and calls onSelected when the menu is dismissed because an item was selected.

Documentation

Flutter Widget 目录 - 图116 PositionedTransition Animated version of Positioned which takes a specific Animation to transition the child's position from a start position to and end position over the lifetime of the animation.

Documentation

Flutter Widget 目录 - 图117 Radio Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.

Documentation

Flutter Widget 目录 - 图118 RaisedButton A Material Design raised button. A raised button consists of a rectangular piece of material that hovers over the interface.

Documentation

Flutter Widget 目录 - 图119 RawImage A widget that displays a dart:ui.Image directly.

Documentation

Flutter Widget 目录 - 图120 RawKeyboardListener A widget that calls a callback whenever the user presses or releases a key on a keyboard.

Documentation

Flutter Widget 目录 - 图121 RefreshIndicator A Material Design pull-to-refresh wrapper for scrollables.

Documentation

Flutter Widget 目录 - 图122 RichText The RichText widget displays text that uses multiple different styles. The text to display is described using a tree of TextSpan objects, each of which has an associated style that is used for that subtree. The text might break across multiple lines or might all be displayed on the same line depending on the layout constraints.

Documentation

Flutter Widget 目录 - 图123 RotatedBox A widget that rotates its child by a integral number of quarter turns.

Documentation

Flutter Widget 目录 - 图124 RotationTransition Animates the rotation of a widget.

Documentation

Flutter Widget 目录 - 图125 Row Layout a list of child widgets in the horizontal direction.

Documentation

Flutter Widget 目录 - 图126 Scaffold Implements the basic Material Design visual layout structure. This class provides APIs for showing drawers, snack bars, and bottom sheets.

Documentation

Flutter Widget 目录 - 图127 ScaleTransition Animates the scale of transformed widget.

Documentation

Flutter Widget 目录 - 图128 ScrollConfiguration Controls how Scrollable widgets behave in a subtree.

Documentation

Flutter Widget 目录 - 图129 Scrollable Scrollable implements the interaction model for a scrollable widget, including gesture recognition, but does not have an opinion about how the viewport, which actually displays the children, is constructed.

Documentation

Flutter Widget 目录 - 图130 Scrollbar A Material Design scrollbar. A scrollbar indicates which portion of a Scrollable widget is actually visible.

Documentation

Flutter Widget 目录 - 图131 Semantics A widget that annotates the widget tree with a description of the meaning of the widgets. Used by accessibility tools, search engines, and other semantic analysis software to determine the meaning of the application.

Documentation

Flutter Widget 目录 - 图132 SimpleDialog Simple dialogs can provide additional details or actions about a list item. For example they can display avatars icons clarifying subtext or orthogonal actions (such as adding an account).

Documentation

Flutter Widget 目录 - 图133 SingleChildScrollView A box in which a single widget can be scrolled. This widget is useful when you have a single box that will normally be entirely visible, for example a clock face in a time picker, but you need to make sure it can be scrolled if the container gets too small in one axis (the scroll direction).

Documentation

Flutter Widget 目录 - 图134 SizeTransition Animates its own size and clips and aligns the child.

Documentation

Flutter Widget 目录 - 图135 SizedBox A box with a specified size. If given a child, this widget forces its child to have a specific width and/or height (assuming values are permitted by this widget's parent). If either the width or height is null, this widget will size itself to match the child's size in that dimension.

Documentation

Flutter Widget 目录 - 图136 SizedOverflowBox A widget that is a specific size but passes its original constraints through to its child, which will probably overflow.

Documentation

Flutter Widget 目录 - 图137 SlideTransition Animates the position of a widget relative to its normal position.

Documentation

Flutter Widget 目录 - 图138 Slider Sliders let users select from a range of values by moving the slider thumb.

Documentation

Flutter Widget 目录 - 图139 SliverAppBar A material design app bar that integrates with a CustomScrollView.

Documentation

Flutter Widget 目录 - 图140 SnackBar A lightweight message with an optional action which briefly displays at the bottom of the screen.

Documentation

Flutter Widget 目录 - 图141 Stack This class is useful if you want to overlap several children in a simple way, for example having some text and an image, overlaid with a gradient and a button attached to the bottom.

Documentation

Flutter Widget 目录 - 图142 Stepper A Material Design stepper widget that displays progress through a sequence of steps.

Documentation

Flutter Widget 目录 - 图143 StreamBuilder Widget that builds itself based on the latest snapshot of interaction with a Stream.

Documentation

Flutter Widget 目录 - 图144 Switch On/off switches toggle the state of a single settings option. The Switch widget implements this component.

Documentation

Flutter Widget 目录 - 图145 TabBar A Material Design widget that displays a horizontal row of tabs.

Documentation

Flutter Widget 目录 - 图146 TabBarView A page view that displays the widget which corresponds to the currently selected tab. Typically used in conjunction with a TabBar.

Documentation

Flutter Widget 目录 - 图147 Table A widget that uses the table layout algorithm for its children.

Documentation

Flutter Widget 目录 - 图148 Text A run of text with a single style.

Documentation

Flutter Widget 目录 - 图149 TextField Touching a text field places the cursor and displays the keyboard. The TextField widget implements this component.

Documentation

Flutter Widget 目录 - 图150 Theme Applies a theme to descendant widgets. A theme describes the colors and typographic choices of an application.

Documentation

Flutter Widget 目录 - 图151 Tooltip Tooltips provide text labels that help explain the function of a button or other user interface action. Wrap the button in a Tooltip widget to show a label when the widget long pressed (or when the user takes some other appropriate action).

Documentation

Flutter Widget 目录 - 图152 Transform A widget that applies a transformation before painting its child.

Documentation

Flutter Widget 目录 - 图153 WidgetsApp A convenience class that wraps a number of widgets that are commonly required for an application.

Documentation

Flutter Widget 目录 - 图154 Wrap A widget that displays its children in multiple horizontal or vertical runs.

Documentation