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.