Skip to main content

Custom Components and Styling

Custom components

DhiWise auto-detects custom components in your app design. It lets you customise and style components as per your needs and choice.

It offers different properties for which you can set parameters and use them for your app later. Below are the supported properties for custom components:

ShapeAdd different shapes for a component
PaddingAdd different padding values
VariantManage different variants for a component
FontStyleAdd different styles for fonts for a component

DhiWise manages custom components in your app and helps in removing redundant code, which results in quality code.

You can add these properties in your component and add different values to it and use them whenever required as per your designing requirements.

Supported components: Button, EditText, FloatingEditText, SearchView, Dropdown, Radio, Checkbox, FloatingActionButton, IconButton, Switch.


Styling is used to manage the theme of an app. Styling includes the app’s colors, fonts and images used in it. In Styling, you can add, edit or view all your app’s colors, fonts and images easily.

Go to dashboard and select a screen or a page, on the top-left, there are tabs namely UI file, Component, and Styling.

Select Styling, all the colours, fonts, and assets being used in the app will be listed category-wise.


In colors you can see all the colors used in the app, with their Name, Primary theme, and Dark theme. Under the theme, the color which is set with its color code in hex value and opacity is mentioned.

By clicking on the color, a picker opens, from which you can change color, see its color format(RGB, HSV, HSL) with each value, and Hex color code.


Supported color formats RGB, HSV, and HSL.



Here all your app's fonts are listed with their Name, Weight, Style, and Type. You can also Upload custom fonts.



All images used in the app are shown here with their Name and Type, you can Add new assets or Replace an existing one by modifying them.

For Image, it will auto-identify the image according to its constructor's type as per the Flutter image class, i.e. whether it is network image or file or an asset.



All the strings of the app are listed here, from which you can modify its value and see all the constant keys being set or also can add a new string right here from the Styling section in String.


A string constant file will be generated with all this strings in the app’s code under localization folder.