Supported Widgets
You can quickly make changes to your design with Smart Editor. After downloading designs from Figma, you may immediately start building an app. If your Figma design requires any changes, you can instantly make them and they will be automatically incorporated into your code. You may also easily add and remove items from your design. Smart Editor provides support for the following widgets.
Global Attributes
Attribute | Description |
---|---|
height | The height attribute specifies the height of the component in pixels. |
width | The width attribute specifies the width of the component in pixels. |
marginLeft | The marginLeft property sets the left margin of the component in pixels. |
marginRight | The marginRight property sets the right margin of the component in pixels. |
marginTop | The marginTop property sets the top margin of the component in pixels. |
marginBottom | The marginBottom property sets the bottom margin of the component in pixels. |
AppBar
AppBar is the topmost widget for any screen which represents the top layer containing basic navigations of the app like open drawer button, go to profile button, etc.
AppBar supports all global properties.
AutoCompleteTextField
A widget that allows you to make a selection by inputting some text and selecting from a set of possible solutions.
Along with the global properties, AutoCompleteTextfield supports the below properties.
Attribute | Description |
---|---|
backgroundColor | Defines the AutoCompleteTextField background color, specified using HEX values |
hintText | Defines placeholder text |
hintTextColor | Defines color for placeholder text, specified in HEX values |
hintTextFontSize | Defines font size for the placeholder text in pixels in pixels |
hintTextFontFamily | Defines font family for the placeholder text |
hintTextLetterSpacing | Defines the spacing between the placeholder text letters in pixels |
hintTextFontWeight | Defines the font weight for the placeholder text in pixels |
underlineColor | Defines the color for the underline below the AutoCompleteTextfield |
prefix | Defines the prefix text |
prefixHeight | Defines the height for the prefix in pixels |
prefixWidth | Defines the width for the prefix in pixels |
prefixMarginLeft | Defines left margin for the prefix in pixels |
prefixMarginTop | Defines top margin for the prefix in pixels |
prefixMarginBottom | Defines bottom margin for the prefix in pixels |
prefixMarginRight | Defines right margin for the prefix in pixels |
suffix | Defines the suffix text |
suffixHeight | Defines the height for the suffix in pixels |
suffixWidth | Defines the width for the suffix in pixels |
suffixMarginLeft | Defines left margin for the suffix in pixels |
suffixMarginRight | Defines right margin for the suffix in pixels |
suffixMarginTop | Defines top margin for the suffix in pixels |
suffixMarginBottom | Defines bottom margin for the suffix in pixels |
BottomBar
A bottom bar is a widget at the bottom of the app.
It has a row of small widgets which are used to navigate between different pages of the app.
BottomBar supports all the global properties.
Button
A button allows users to take action and make choices with a single tap.
They can be used in any part of our user interface, including dialogs, forms, cards, toolbars, etc.
Along with the global properties, Button supports the below properties.
Attribute | Description |
---|---|
text | Specifies Button’s text |
textColor | Defines Button’s text color, specified using HEX values |
backgroundColor | Defines the Button background color, specified using HEX values |
prefix | Defines the prefix text |
prefixHeight | Defines the height for the prefix in pixels |
prefixWidth | Defines the width for the prefix in pixels |
prefixMarginLeft | Defines left margin for the prefix in pixels |
prefixMarginTop | Defines top margin for the prefix in pixels |
prefixMarginBottom | Defines bottom margin for the prefix in pixels |
prefixMarginRight | Defines right margin for the prefix in pixels |
suffix | Defines the suffix text |
suffixHeight | Defines the height for the suffix in pixels |
suffixWidth | Defines the width for the suffix in pixels |
suffixMarginLeft | Defines left margin for the suffix in pixels |
suffixMarginRight | Defines right margin for the suffix in pixels |
suffixMarginTop | Defines top margin for the suffix in pixels |
suffixMarginBottom | Defines bottom margin for the suffix in pixels |
Calendar
Displays a calendar of days for a specific month and lets you choose a day.
Flutter supports the table_calendar widget for calendar.
Calendar supports all the global properties.
Card
A card is a piece of material used to represent a group of connected items, such as an album, a geographical location, a meal, contact information, and so on.
CarouselSlider
The Slider is a slideshow for cycling through a series of content.
It provides a straightforward recycler-like structure by working within a Motion Layout.
Along with the global properties, CarouselSlider supports the below properties.
Attribute | Description |
---|---|
Color | Select the background color for the element, specified using HEX values. |
Checkbox
A checkbox is a graphical widget that allows you to make a binary decision, that is, a decision between two mutually exclusive possibilities.
Along with the global properties, CheckBox supports the below properties.
Attribute | Description |
---|---|
text | Specifies the text displayed beside the CheckBox |
textColor | Defines the text for CheckBox, specified using HEX values |
fontSize | Defines font size for text in pixels |
CircleImage
A circular image view is commonly used for displaying an avatar or profile pic.
In Flutter, this is equivalent to Image wrapped with ClipRect.
Along with the global properties, CircleImage supports the below properties.
Attribute | Description |
---|---|
imageName | Specifies a name for the CircleImage |
underlineTopLeftCornerRadius | Defines the underlined top left corner radius in pixels |
underlineTopRightCornerRadius | Defines the underlined top right corner radius in pixels |
underlineBottomLeftCornerRadius | Defines the underlined bottom left corner radius in pixels |
underlineBottomRightCornerRadius | Defines the underlined bottom right corner radius in pixels |
topLeftCornerRadius | Defines the top left corner radius in pixels |
topRightCornerRadius | Defines the top right corner radius in pixels |
bottomLeftCornerRadius | Defines the bottom left corner radius in pixels |
bottomRightCornerRadius | Defines the bottom right corner radius in pixels |
Column
A Column is a widget used to display child widgets in a vertical manner.
This is the widget to use if you want multiple widgets to be displayed in the same vertical column.
They run from top to bottom.
Along with the global properties, Column supports the below properties.
Attribute | Description |
---|---|
verticalAligment | Defines the vertical alignment for the Column verticalAligment : center|spaceBetween|spaceEvenly|start|end |
horizontalAligment | Defines the vertical alignment for the ColumnDefines the vertical alignment for the Column horizontalAligment : center|spaceBetween|spaceEvenly|start|end |
Dialog
The dialog is a type of a widget that appears on the window or screen and might ask for a decision or include any important information.
The moment a dialog box appears, all other functions are disabled until you either close it or respond.
Attribute | Description |
---|---|
Color | Select the background color for the element, specified using HEX values. |
Drawer
You can browse various pages of the application using Flutter's navigation drawer.
It is a sliding left menu that, when displayed, takes up half of the screen and typically contains the application's most crucial links.
It may be accessed by either using the swipe gesture or the menu icon in the app bar.
Dropdown
A dropdown button allows you to choose from a list of options. The button displays the presently chosen item as well as an arrow that leads to a menu where you can pick another item.
Along with the global properties, DropDown supports the below properties.
Attribute | Description |
---|---|
backgroundColor | Defines the AutoCompleteTextField background color, specified using HEX values |
hintText | Defines a placeholder text that suggests what sort of input the field accepts. |
hintTextColor | Defines the color of hint text, specified using HEX values. |
hintTextFontSize | Defines font size for the placeholder text in pixels in pixels |
hintTextFontFamily | Defines font family for the placeholder text |
hintTextLetterSpacing | Defines the spacing between the placeholder text letters in pixels |
hintTextFontWeight | Defines the font weight for the placeholder text in pixels |
underlineColor | Defines the color for the underline below the AutoCompleteTextfield |
prefix | Defines the prefix text |
prefixHeight | Defines the height for the prefix in pixels |
prefixWidth | Defines the width for the prefix in pixels |
prefixMarginLeft | Defines left margin for the prefix in pixels |
prefixMarginTop | Defines top margin for the prefix in pixels |
prefixMarginBottom | Defines bottom margin for the prefix in pixels |
prefixMarginRight | Defines right margin for the prefix in pixels |
suffix | Defines the suffix text |
suffixHeight | Defines the height for the suffix in pixels |
suffixWidth | Defines the width for the suffix in pixels |
suffixMarginLeft | Defines left margin for the suffix in pixels |
suffixMarginRight | Defines right margin for the suffix in pixels |
suffixMarginTop | Defines top margin for the suffix in pixels |
suffixMarginBottom | Defines bottom margin for the suffix in pixels |
EditText
We often use EditText in our applications in order to provide an input or text field, especially in forms.
Along with the global properties, EditText supports the below properties.
Attribute | Description |
---|---|
text | Specifies EditText’s text |
textColor | Defines EditText’s text color, specified using HEX values |
backgroundColor | Defines the AutoCompleteTextField background color, specified using HEX values |
hintText | Defines placeholder text |
hintTextColor | Defines color for placeholder text, specified in HEX values |
hintTextFontSize | Defines font size for the placeholder text in pixels in pixels |
hintTextFontFamily | Defines font family for the placeholder text |
hintTextLetterSpacing | Defines the spacing between the placeholder text letters in pixels |
hintTextFontWeight | Defines the font weight for the placeholder text in pixels |
underlineColor | Defines the color for the underline below the AutoCompleteTextfield |
prefix | Defines the prefix text |
prefixHeight | Defines the height for the prefix in pixels |
prefixWidth | Defines the width for the prefix in pixels |
prefixMarginLeft | Defines left margin for the prefix in pixels |
prefixMarginTop | Defines top margin for the prefix in pixels |
prefixMarginBottom | Defines bottom margin for the prefix in pixels |
prefixMarginRight | Defines right margin for the prefix in pixels |
suffix | Defines the suffix text |
suffixHeight | Defines the height for the suffix in pixels |
suffixWidth | Defines the width for the suffix in pixels |
suffixMarginLeft | Defines left margin for the suffix in pixels |
suffixMarginRight | Defines right margin for the suffix in pixels |
suffixMarginBottom | Defines bottom margin for the suffix in pixels |
suffixMarginTop | Defines top margin for the suffix in pixels |
Fab
A floating action button(Fab) is a widget that floats on top of other widgets on the screen.
Along with the global properties, Fab supports the below properties.
Attribute | Description |
---|---|
imageName | Specifies a name for the FloatingActionButton |
imageHeight | Defines the height of the image for the FloatingActionButton |
imageWidth | Defines the width of the image for the FloatingActionButton |
FloatingTextField
When the input field is empty and unfocused, the label is displayed on top of the input field.
When the input field receives focus, the label moves above, vertically adjacent to, or to the center of the input field.
Along with the global properties, FloatingTextfield supports the below properties.
Attribute | Description |
---|---|
text | Specifies EditText’s text |
textColor | Defines EditText’s text color, specified using HEX values |
backgroundColor | Defines the AutoCompleteTextField background color, specified using HEX values |
hintText | Defines placeholder text |
hintTextColor | Defines color for placeholder text, specified in HEX values |
hintTextFontSize | Defines font size for the placeholder text in pixels in pixels |
hintTextFontFamily | Defines font family for the placeholder text |
hintTextLetterSpacing | Defines the spacing between the placeholder text letters in pixels |
hintTextFontWeight | Defines the font weight for the placeholder text in pixels |
underlineColor | Defines the color for the underline below the AutoCompleteTextfield |
prefix | Defines the prefix text |
prefixHeight | Defines the height for the prefix in pixels |
prefixWidth | Defines the width for the prefix in pixels |
prefixMarginLeft | Defines left margin for the prefix in pixels |
prefixMarginTop | Defines top margin for the prefix in pixels |
prefixMarginBottom | Defines bottom margin for the prefix in pixels |
prefixMarginRight | Defines right margin for the prefix in pixels |
suffix | Defines the suffix text |
suffixHeight | Defines the height for the suffix in pixels |
suffixWidth | Defines the width for the suffix in pixels |
suffixMarginLeft | Defines left margin for the suffix in pixels |
suffixMarginRight | Defines right margin for the suffix in pixels |
suffixMarginBottom | Defines bottom margin for the suffix in pixels |
suffixMarginTop | Defines top margin for the suffix in pixels |
Grid
Grid is a Flutter widget that displays objects in a 2-D array (two-dimensional rows and columns).
It will be used to display objects in a Grid, as the name implies. By tapping on the desired item in the grid list, we can select it.
Along with the global properties, Grid supports the below properties.
Attribute | Description |
---|---|
id | Specifies a name for the Grid |
itemCount | Specifies the count for the number of Grid items |
nestedScrolling | Specifies whether scrolling is enabled or not |
orientation | Specifies the direction of the Grid items orientation : Vertical|Horizontal |
itemSpacing | Specifies the amount of space between the Grid items in pixels |
HorizontalScroll
A horizontal scroll bar makes it possible for you to scroll the content of a window to the left or right.
HorizontalScroll supports all global properties.
IconButton
An icon button is a picture printed on a Material widget that reacts when pressed. Icon buttons are commonly used in the AppBar and many other places in the screen design.
Along with the global properties, IconButton supports the below properties.
Attribute | Description |
---|---|
imageName | Specifies the name of the image displayed on the widget |
imageHeight | Specifies the height of the icon’s image |
imageWidth | Specifies the width of the icon’s image |
Image
You can modify image attributes like width, height, margin-top, margin-bottom, margin-left, and margin-right using the image property.
You just need to select the image on your screen and you will be redirected to the image property where you can modify your image size and margin.
Along with the global properties, Image supports the below properties.
Attribute | Description |
---|---|
imageName | Specifies a name for the Image |
Line
A thin horizontal line, with padding on either side. In the material design language, this represents a divider.
Dividers can be used in lists, Drawers, and elsewhere to separate content.
Line supports all global properties.
List
The most popular elements of any web or mobile application are lists.
It is a group of objects which can be vertical or horizontal.
Along with the global properties, List supports the below properties.
Attribute | Description |
---|---|
id | Specifies a name for the List |
orientation | Specifies the direction of the Grid items orientation : Vertical|Horizontal |
itemSpace | Specifies the space between the desired item in pixels. |
itemCount | Specifies the count for the number of List items |
nestedScrolling | Specifies whether scrolling is enabled or not |
Map
A Map widget is used for integrating google maps into your app.
Along with the global properties, Map supports the below properties.
Attribute | Description |
---|---|
enableZoom | If the widget for the map allows zooming, it will be indicated by the enableZoom : true attribute. enablezoom : true|false |
enableMarker | The enableMarker attribute defines whether the Map’s marker should be visible or not at certain coordinated points. enableMarker : true|false |
OtpView
Used for a specific purpose, such as when one-time password verification is necessary.
Along with the global properties, OtpView supports the below properties.
Attribute | Description |
---|---|
totalCount | Defines the number of views for the OtpView |
otpShape | Defines the shape for the OtpView otpShape : Circle LineShape Rectangle |
PageElement
The Pager widget helps you to switch between different screens in their Flutter app.
This is a page-by-page scrollable list.
Along with the global properties, PageElement supports the below properties.
Attribute | Description |
---|---|
tabScreen | Specifies the attached tab screen |
PagerIndicator
Flutter Pager indications are the dots that appear at the top or bottom of the mobile screen. The number of pages in a series is indicated by pager indicators, which also indicate which page is presently being displayed.
Along with the global properties, PagerIndicator supports the below properties.
Attribute | Description |
---|---|
indicatorHeight | Defines the indicator height in pixels |
indicatorWidth | Defines the indicator width in pixels |
activeColor | Defines the color for the active tab |
totalCount | Specifies the count of pages in series |
Radio
A radio button, often known as an options button, is a button that stores a Boolean value.
It lets you to select only one option from a list of possibilities.
Along with the global properties, Radio supports the below properties.
Attribute | Description |
---|---|
text | Specifies the text to be displayed. |
textColor | Specifies the text color specified using HEX values. |
fontSize | Defines the font size for the text in pixels |
fontFamily | Defines the font family for the text |
fontWeight | Defines the font weight for the text in pixels |
RatingBar
The Rating Bar, as the name suggests, is used to rate content within the app.
As a rating bar/indicator item, any widget can be utilized.
It allows for a vertical arrangement also.
You have the option of setting a minimum and maximum rating.
Along with the global properties, RatingBar supports the below properties.
Attribute | Description |
---|---|
selectedRating | Specifies the count for the number of the selected ratings |
totalRating | Specifies the count for the number of ratings |
Row
A widget that displays its children in a horizontal array.
This is the widget to use if you want multiple widgets to be displayed in the same horizontal row.
They run from left to right.
Along with the global properties, Row supports the below properties.
Attribute | Description |
---|---|
verticalAligment | Defines the vertical alignment of an element verticalAligment : center|spaceBetween|spaceEvenly|start|end |
horizontalAligment | Defines the horizontal alignment of an element horizontalAlignment : center|spaceBetween|spaceEvenly|start|end |
ScrollView
ScrollView is used to scroll multiple widgets as children of the parent.
ScrollView supports all global properties.
SearchView
Search view widgets provide an edit area where you can add any term and filter out the list based on the input term quickly.
Along with the global properties, SearchView supports the below properties.
Attribute | Description |
---|---|
fontSize | Defines the text's font size in pixels. |
letterSpacing | Specifies space between the letters. |
fontWeight | Set the font weight for an element. |
fontFamily | Specifies the font for an element. |
hintText | Defines a text that suggests what sort of input the field accepts. |
hintTextColor | Defines the color of hint text, specified using HEX values. |
hintTextFontSize | Defines the hint text's font size in pixels. |
hintTextFontFamily | Specifies the font for a hint text. |
hintTextLetterSpacing | Specifies space between the letters for a hint text. |
hintTextFontWeight | Specifies the font weight for a hint text. |
backgroundColor | Specifies the background color for the element. |
underlineColor | Defines the color for the underline below the AutoCompleteTextfield |
prefix | Defines the prefix text |
prefixHeight | Defines the height for the prefix in pixels |
prefixWidth | Defines the width for the prefix in pixels |
prefixMarginLeft | Defines left margin for the prefix in pixels |
prefixMarginTop | Defines top margin for the prefix in pixels |
prefixMarginRight | Defines right margin for the prefix in pixels |
prefixMarginBottom | Defines bottom margin for the prefix in pixels |
suffix | Defines the suffix text |
suffixHeight | Defines the height for the suffix in pixels |
suffixWidth | Defines the width for the suffix in pixels |
suffixMarginLeft | Defines left margin for the suffix in pixels |
suffixMarginTop | Defines top margin for the suffix in pixels |
suffixMarginRight | Defines right margin for the suffix in pixels |
suffixMarginBottom | Defines bottom margin for the suffix in pixels |
SeekBar
In Flutter, a SeekBar is a material design widget that allows you to select a range of values.
A SeekBar is an extension of ProgressBar that adds a draggable thumb.
With a SeekBar, you can choose from a continuous or discrete collection of values.
Along with the global properties, SeekBar supports the below properties.
Attribute | Description |
---|---|
percentage | Specifies how much of the progress has been completed |
endRange | Sets the end range for the SeekBar |
startRange | Sets the start range for the SeekBar |
id | Specifies a name for the SeekBar |
progressColor | Specifies the color of the progress for the SeekBar |
progressBorderRadius | Defines the radius for the progress border in pixels |
Stack
Stack is a widget with children that are positioned relative to the box's edges.
This widget is super useful if you want to easily overlap multiple children, such as having some text and an image overlaid with a gradient and a button at the bottom.
Stack supports all global properties.
Staggered
Staggered Grid View is a layout for displaying data in a grid format.
It is made up of containers that are arranged in rows and columns of various sizes.
Along with the global properties, Staggered supports the below properties.
Attribute | Description |
---|---|
id | Specifies a name for the Staggered Grid |
itemSpacing | Specifies the space between the items of the Grid |
spanCount | Specifies the number of columns in the Grid |
nestedScrolling | Specifies whether scrolling is enabled or not |
Switch
A switch is a two-state user interface element that can be toggled between ON (Checked) and OFF (Unchecked).
It's a button with a thumb slider that you can move back and forth to select an ON or OFF option.
Along with the global properties, Switch supports the below properties.
Attribute | Description |
---|---|
trackHeight | Defines the height for the Switch’s track bar |
trackWidth | Defines the width for the Switch’s track bar |
trackColor | Specifies the color for the Switch's track in HEX values |
activeTrackColor | Specifies color for the track when the Switch is ON |
trackBorderRadius | Defines the radius for the Switch border in pixels |
thumbHeight | Specifies the height for the Switch thumb ball |
thumbWidth | Specifies the width for the Switch thumb ball |
thumbColor | Specifies the color for the Switch thumb ball |
activeThumbColor | Specifies the color of the Switch thumb ball when it is ON |
thumbBorderRadius | Defines the radius for the thumb border in pixels |
Tab
It is used to switch between multiple child views using interactive user interface elements.
The tabs are mostly used for navigating on mobile devices.
Along with the global properties, Tab supports the below properties.
Attribute | Description |
---|---|
selectedTextColor | Defines the text color for the selected tab label |
unSelectedTextColor | Defines the text color for the unselected tab label |
indicatorType | Defines the appearance of the selected tab indicator Underline | Line | Fill | customBackground |
selectedBackgroundColor | Defines the background color for the Tab |
indicatorTopLeftCornerRadius | Defines the top left corner radius for the indicator in pixels |
indicatorTopRightCornerRadius | Defines the top right corner radius for the indicator in pixels |
indicatorBottomLeftRadius | Defines the bottom left corner radius for the indicator in pixels |
indicatorBottomRightCornerRadius | Defines the bottom right corner radius for the indicator in pixels |
indicatorBorderColor | Defines the color of the line that appears below the selected tab |
indicatorBorderWeight | Defines the thickness of the line that appears below the selected tab |
Text
The Text widget displays a string of text with a single style. It is also used to show certain information to the user.
If you want to edit your text’s string, you must select the text element on the screen, and you will be redirected to the property for that text, where you can modify it and even add new ones.
Along with the global properties, Text supports the below properties.
Attribute | Description |
---|---|
text | Specifies the text to be displayed for the Text |
hasMultipleLine | Specifies whether the Text contains multiple lines or not true | false |
textColor | Defines the text color for the displayed text in HEX values |
fontSize | Defines the font size for the Text in pixels |
fontFamily | Defines the font family for the Text |
fontWeight | Defines the font weight for the Text in pixels |
letterSpacing | Specifies space between the letters in the Text |
WebView
This plugin is used in the Flutter application to display web pages.
A WebView supports all global properties.
Got a question? Ask here.