Skip to main content

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

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.

Example banner

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.

Example banner

Along with the global properties, AutoCompleteTextfield supports the below properties.

AttributeDescription
backgroundColorDefines the AutoCompleteTextField background color, specified using HEX values
hintTextDefines placeholder text
hintTextColorDefines color for placeholder text, specified in HEX values
hintTextFontSizeDefines font size for the placeholder text in pixels in pixels
hintTextFontFamilyDefines font family for the placeholder text
hintTextLetterSpacingDefines the spacing between the placeholder text letters in pixels
hintTextFontWeightDefines the font weight for the placeholder text in pixels
underlineColorDefines the color for the underline below the AutoCompleteTextfield
prefixDefines the prefix text
prefixHeightDefines the height for the prefix in pixels
prefixWidthDefines the width for the prefix in pixels
prefixMarginLeftDefines left margin for the prefix in pixels
prefixMarginTopDefines top margin for the prefix in pixels
prefixMarginBottomDefines bottom margin for the prefix in pixels
prefixMarginRightDefines right margin for the prefix in pixels
suffixDefines the suffix text
suffixHeightDefines the height for the suffix in pixels
suffixWidthDefines the width for the suffix in pixels
suffixMarginLeftDefines left margin for the suffix in pixels
suffixMarginRightDefines right margin for the suffix in pixels
suffixMarginTopDefines top margin for the suffix in pixels
suffixMarginBottomDefines 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.

Example banner

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.

Example banner

Along with the global properties, Button supports the below properties.

AttributeDescription
textSpecifies Button’s text
textColorDefines Button’s text color, specified using HEX values
backgroundColor Defines the Button background color, specified using HEX values
prefixDefines the prefix text
prefixHeightDefines the height for the prefix in pixels
prefixWidthDefines the width for the prefix in pixels
prefixMarginLeftDefines left margin for the prefix in pixels
prefixMarginTopDefines top margin for the prefix in pixels
prefixMarginBottomDefines bottom margin for the prefix in pixels
prefixMarginRightDefines right margin for the prefix in pixels
suffixDefines the suffix text
suffixHeightDefines the height for the suffix in pixels
suffixWidthDefines the width for the suffix in pixels
suffixMarginLeftDefines left margin for the suffix in pixels
suffixMarginRightDefines right margin for the suffix in pixels
suffixMarginTopDefines top margin for the suffix in pixels
suffixMarginBottomDefines 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.

Example banner

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.

Example banner

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.

Example banner

Along with the global properties, CarouselSlider supports the below properties.

AttributeDescription
ColorSelect 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.

Example banner

Along with the global properties, CheckBox supports the below properties.

AttributeDescription
textSpecifies the text displayed beside the CheckBox
textColorDefines the text for CheckBox, specified using HEX values
fontSizeDefines 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.

Example banner

Along with the global properties, CircleImage supports the below properties.

AttributeDescription
imageNameSpecifies a name for the CircleImage
underlineTopLeftCornerRadiusDefines the underlined top left corner radius in pixels
underlineTopRightCornerRadiusDefines the underlined top right corner radius in pixels
underlineBottomLeftCornerRadiusDefines the underlined bottom left corner radius in pixels
underlineBottomRightCornerRadiusDefines the underlined bottom right corner radius in pixels
topLeftCornerRadiusDefines the top left corner radius in pixels
topRightCornerRadiusDefines the top right corner radius in pixels
bottomLeftCornerRadiusDefines the bottom left corner radius in pixels
bottomRightCornerRadiusDefines 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.

Example banner

Along with the global properties, Column supports the below properties.

AttributeDescription
verticalAligmentDefines the vertical alignment for the Column
verticalAligment : center|spaceBetween|spaceEvenly|start|end
horizontalAligmentDefines 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.

Example banner

AttributeDescription
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.

Example banner

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.

Example banner

Along with the global properties, DropDown supports the below properties.

AttributeDescription
backgroundColorDefines the AutoCompleteTextField background color, specified using HEX values
hintTextDefines a placeholder text that suggests what sort of input the field accepts.
hintTextColorDefines the color of hint text, specified using HEX values.
hintTextFontSizeDefines font size for the placeholder text in pixels in pixels
hintTextFontFamilyDefines font family for the placeholder text
hintTextLetterSpacingDefines the spacing between the placeholder text letters in pixels
hintTextFontWeightDefines the font weight for the placeholder text in pixels
underlineColorDefines the color for the underline below the AutoCompleteTextfield
prefixDefines the prefix text
prefixHeightDefines the height for the prefix in pixels
prefixWidthDefines the width for the prefix in pixels
prefixMarginLeftDefines left margin for the prefix in pixels
prefixMarginTopDefines top margin for the prefix in pixels
prefixMarginBottomDefines bottom margin for the prefix in pixels
prefixMarginRightDefines right margin for the prefix in pixels
suffixDefines the suffix text
suffixHeightDefines the height for the suffix in pixels
suffixWidthDefines the width for the suffix in pixels
suffixMarginLeftDefines left margin for the suffix in pixels
suffixMarginRightDefines right margin for the suffix in pixels
suffixMarginTopDefines top margin for the suffix in pixels
suffixMarginBottomDefines 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.

Example banner

Along with the global properties, EditText supports the below properties.

AttributeDescription
textSpecifies EditText’s text
textColor Defines EditText’s text color, specified using HEX values
backgroundColorDefines the AutoCompleteTextField background color, specified using HEX values
hintTextDefines placeholder text
hintTextColorDefines color for placeholder text, specified in HEX values
hintTextFontSizeDefines font size for the placeholder text in pixels in pixels
hintTextFontFamilyDefines font family for the placeholder text
hintTextLetterSpacingDefines the spacing between the placeholder text letters in pixels
hintTextFontWeight Defines the font weight for the placeholder text in pixels
underlineColorDefines the color for the underline below the AutoCompleteTextfield
prefixDefines the prefix text
prefixHeightDefines the height for the prefix in pixels
prefixWidthDefines the width for the prefix in pixels
prefixMarginLeftDefines left margin for the prefix in pixels
prefixMarginTopDefines top margin for the prefix in pixels
prefixMarginBottomDefines bottom margin for the prefix in pixels
prefixMarginRightDefines right margin for the prefix in pixels
suffixDefines the suffix text
suffixHeightDefines the height for the suffix in pixels
suffixWidthDefines the width for the suffix in pixels
suffixMarginLeftDefines left margin for the suffix in pixels
suffixMarginRightDefines right margin for the suffix in pixels
suffixMarginBottomDefines bottom margin for the suffix in pixels
suffixMarginTopDefines 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.

Example banner

Along with the global properties, Fab supports the below properties.

AttributeDescription
imageNameSpecifies a name for the FloatingActionButton
imageHeightDefines the height of the image for the FloatingActionButton
imageWidthDefines 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.

Example banner

Along with the global properties, FloatingTextfield supports the below properties.

AttributeDescription
textSpecifies EditText’s text
textColorDefines EditText’s text color, specified using HEX values
backgroundColorDefines the AutoCompleteTextField background color, specified using HEX values
hintTextDefines placeholder text
hintTextColorDefines color for placeholder text, specified in HEX values
hintTextFontSizeDefines font size for the placeholder text in pixels in pixels
hintTextFontFamilyDefines font family for the placeholder text
hintTextLetterSpacingDefines the spacing between the placeholder text letters in pixels
hintTextFontWeightDefines the font weight for the placeholder text in pixels
underlineColorDefines the color for the underline below the AutoCompleteTextfield
prefixDefines the prefix text
prefixHeightDefines the height for the prefix in pixels
prefixWidthDefines the width for the prefix in pixels
prefixMarginLeftDefines left margin for the prefix in pixels
prefixMarginTopDefines top margin for the prefix in pixels
prefixMarginBottomDefines bottom margin for the prefix in pixels
prefixMarginRightDefines right margin for the prefix in pixels
suffixDefines the suffix text
suffixHeightDefines the height for the suffix in pixels
suffixWidthDefines the width for the suffix in pixels
suffixMarginLeftDefines left margin for the suffix in pixels
suffixMarginRightDefines right margin for the suffix in pixels
suffixMarginBottomDefines bottom margin for the suffix in pixels
suffixMarginTopDefines 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.

Example banner

Along with the global properties, Grid supports the below properties.

AttributeDescription
idSpecifies a name for the Grid
itemCountSpecifies the count for the number of Grid items
nestedScrollingSpecifies whether scrolling is enabled or not
orientationSpecifies the direction of the Grid items
orientation : Vertical|Horizontal
itemSpacingSpecifies 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.

Example banner

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.

AttributeDescription
imageNameSpecifies the name of the image displayed on the widget
imageHeightSpecifies the height of the icon’s image
imageWidthSpecifies 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.

Example banner

Along with the global properties, Image supports the below properties.

AttributeDescription
imageNameSpecifies 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.

Example banner

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.

Example banner

Along with the global properties, List supports the below properties.

AttributeDescription
idSpecifies a name for the List
orientationSpecifies the direction of the Grid items
orientation : Vertical|Horizontal
itemSpaceSpecifies the space between the desired item in pixels.
itemCountSpecifies the count for the number of List items
nestedScrollingSpecifies whether scrolling is enabled or not

Map

A Map widget is used for integrating google maps into your app.

Example banner

Along with the global properties, Map supports the below properties.

AttributeDescription
enableZoom If the widget for the map allows zooming, it will be indicated by the enableZoom : true attribute.
enablezoom : true|false
enableMarkerThe 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.

Example banner

Along with the global properties, OtpView supports the below properties.

AttributeDescription
totalCountDefines the number of views for the OtpView
otpShapeDefines 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.

Example banner

Along with the global properties, PageElement supports the below properties.

AttributeDescription
tabScreenSpecifies 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.

Example banner

Along with the global properties, PagerIndicator supports the below properties.

AttributeDescription
indicatorHeightDefines the indicator height in pixels
indicatorWidthDefines the indicator width in pixels
activeColorDefines the color for the active tab
totalCountSpecifies 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.

Example banner

Along with the global properties, Radio supports the below properties.

AttributeDescription
textSpecifies the text to be displayed.
textColorSpecifies the text color specified using HEX values.
fontSizeDefines the font size for the text in pixels
fontFamilyDefines the font family for the text
fontWeightDefines 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.

Example banner

Along with the global properties, RatingBar supports the below properties.

AttributeDescription
selectedRatingSpecifies the count for the number of the selected ratings
totalRatingSpecifies 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.

Example banner

Along with the global properties, Row supports the below properties.

AttributeDescription
verticalAligmentDefines the vertical alignment of an element
verticalAligment : center|spaceBetween|spaceEvenly|start|end
horizontalAligmentDefines 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.

Example banner

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.

Example banner

Along with the global properties, SearchView supports the below properties.

AttributeDescription
fontSizeDefines the text's font size in pixels.
letterSpacingSpecifies space between the letters.
fontWeightSet the font weight for an element.
fontFamilySpecifies the font for an element.
hintTextDefines a text that suggests what sort of input the field accepts.
hintTextColorDefines the color of hint text, specified using HEX values.
hintTextFontSizeDefines the hint text's font size in pixels.
hintTextFontFamilySpecifies the font for a hint text.
hintTextLetterSpacingSpecifies space between the letters for a hint text.
hintTextFontWeightSpecifies the font weight for a hint text.
backgroundColorSpecifies the background color for the element.
underlineColorDefines the color for the underline below the AutoCompleteTextfield
prefixDefines the prefix text
prefixHeightDefines the height for the prefix in pixels
prefixWidthDefines the width for the prefix in pixels
prefixMarginLeftDefines left margin for the prefix in pixels
prefixMarginTopDefines top margin for the prefix in pixels
prefixMarginRightDefines right margin for the prefix in pixels
prefixMarginBottomDefines bottom margin for the prefix in pixels
suffixDefines the suffix text
suffixHeightDefines the height for the suffix in pixels
suffixWidthDefines the width for the suffix in pixels
suffixMarginLeftDefines left margin for the suffix in pixels
suffixMarginTopDefines top margin for the suffix in pixels
suffixMarginRightDefines right margin for the suffix in pixels
suffixMarginBottomDefines 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.

Example banner

Along with the global properties, SeekBar supports the below properties.

AttributeDescription
percentageSpecifies how much of the progress has been completed
endRangeSets the end range for the SeekBar
startRangeSets the start range for the SeekBar
idSpecifies a name for the SeekBar
progressColorSpecifies the color of the progress for the SeekBar
progressBorderRadiusDefines 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.

Example banner

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.

Example banner

Along with the global properties, Staggered supports the below properties.

AttributeDescription
idSpecifies a name for the Staggered Grid
itemSpacingSpecifies the space between the items of the Grid
spanCountSpecifies the number of columns in the Grid
nestedScrollingSpecifies 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.

Example banner

Along with the global properties, Switch supports the below properties.

AttributeDescription
trackHeightDefines the height for the Switch’s track bar
trackWidthDefines the width for the Switch’s track bar
trackColorSpecifies the color for the Switch's track in HEX values
activeTrackColorSpecifies color for the track when the Switch is ON
trackBorderRadiusDefines the radius for the Switch border in pixels
thumbHeightSpecifies the height for the Switch thumb ball
thumbWidthSpecifies the width for the Switch thumb ball
thumbColorSpecifies the color for the Switch thumb ball
activeThumbColorSpecifies the color of the Switch thumb ball when it is ON
thumbBorderRadiusDefines 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.

Example banner

Along with the global properties, Tab supports the below properties.

AttributeDescription
selectedTextColorDefines the text color for the selected tab label
unSelectedTextColorDefines the text color for the unselected tab label
indicatorTypeDefines the appearance of the selected tab indicator
Underline | Line | Fill | customBackground
selectedBackgroundColorDefines the background color for the Tab
indicatorTopLeftCornerRadiusDefines the top left corner radius for the indicator in pixels
indicatorTopRightCornerRadiusDefines the top right corner radius for the indicator in pixels
indicatorBottomLeftRadiusDefines the bottom left corner radius for the indicator in pixels
indicatorBottomRightCornerRadiusDefines the bottom right corner radius for the indicator in pixels
indicatorBorderColorDefines the color of the line that appears below the selected tab
indicatorBorderWeightDefines 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.

Example banner

Along with the global properties, Text supports the below properties.

AttributeDescription
textSpecifies the text to be displayed for the Text
hasMultipleLineSpecifies whether the Text contains multiple lines or not
true | false
textColorDefines the text color for the displayed text in HEX values
fontSizeDefines the font size for the Text in pixels
fontFamilyDefines the font family for the Text
fontWeightDefines the font weight for the Text in pixels
letterSpacingSpecifies space between the letters in the Text

WebView

This plugin is used in the Flutter application to display web pages.

Example banner

A WebView supports all global properties.



Got a question? Ask here.