React Native and Flutter widget equivalent components
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. |