React Native and Flutter widget equivalent components

Domains: Flutter

The following table lists commonly-used React Native components mapped to the corresponding Flutter widget and common widget properties.

React Native Component Flutter Widget Description
Button Raised Button A basic raised button.
  onPressed [required] The callback when the button is tapped or otherwise activated.
  Child The button’s label.
     
Button Flat Button A basic flat button.
  onPressed [required] The callback when the button is tapped or otherwise activated.
  Child The button’s label.
     
ScrollView ListView A scrollable list of widgets arranged linearly.
  children ( <Widget> [ ]) List of child widgets to display.
  controller [ Scroll Controller ] An object that can be used to control a scrollable widget.
  itemExtent [ double ] If non-null, forces the children to have the given extent in the scroll direction.
  scroll Direction [ Axis ] The axis along which the scroll view scrolls.
     
FlatList ListView. builder() The constructor for a linear array of widgets that are created on demand.
  itemBuilder [required] [ Indexed Widget Builder] helps in building the children on demand. This callback is called only with indices greater than or equal to zero and less than the itemCount.
  itemCount [ int ] improves the ability of the ListView to estimate the maximum scroll extent.
     
Image Image A widget that displays an image.
  image [required] The image to display.
  Image. asset Several constructors are provided for the various ways that an image can be specified.
  width, height, color, alignment The style and layout for the image.
  fit Inscribing the image into the space allocated during layout.
     
Modal ModalRoute A route that blocks interaction with previous routes.
  animation The animation that drives the route’s transition and the previous route’s forward transition.
     
Activity Indicator Circular Progress Indicator A widget that shows progress along a circle.
  strokeWidth The width of the line used to draw the circle.
  backgroundColor The progress indicator’s background color. The current theme’s ThemeData.backgroundColor by default.
     
Activity Indicator Linear Progress Indicator A widget that shows progress along a circle.
  value The value of this progress indicator.
     
Refresh Control Refresh Indicator A widget that supports the Material “swipe to refresh” idiom.
  color The progress indicator’s foreground color.
  onRefresh A function that’s called when a user drags the refresh indicator far enough to demonstrate that they want the app to refresh.
     
View Container A widget that surrounds a child widget.
     
View Column A widget that displays its children in a vertical array.
     
View Row A widget that displays its children in a horizontal array.
     
View Center A widget that centers its child within itself.
     
View Padding A widget that insets its child by the given padding.
  padding [required] [ EdgeInsets ] The amount of space to inset the child.
     
Touchable Opacity Gesture Detector A widget that detects gestures.
  onTap A callback when a tap occurs.
  onDoubleTap A callback when a tap occurs at the same location twice in quick succession.
     
Text Input Text Input The interface to the system’s text input control.
  controller [ Text Editing Controller ] used to access and modify text.
     
Text Text The Text widget that displays a string of text with a single style.
  data [ String ] The text to display.
  textDirection [ Text Align ] The direction in which the text flows.
     
Switch Switch A material design switch.
  value [required] [ boolean ] Whether this switch is on or off.
  onChanged [required] [ callback ] Called when the user toggles the switch on or off.
     
Slider Slider Used to select from a range of values.
  value [required] [ double ] The current value of the slider.
  onChanged [required] Called when the user selects a new value for the slider.

Similar pages

Page structure
Terms

Widget

Flutter

Animation

Route

Text widget

ListView