Card with Chart
Card widget in flutter is a sheet of Material used to represent all the similar information in a single block in a compressed way, it is also possible to show results through some types of graphs, such as linear, area and bar graphs, any type of summary data projection.
You can find a more in depth explanation about the card with chart on this page: https://apexcharts.com/javascript-chart-demos/dashboards/modern/
Properties of Card
Property Name | Data type | Type | Description |
Card title | Text | Expression | To set the title of the card. |
Title style | Text | Dropdown | Defines the HTML Tag style for the title text. (H1, H2, H3, H4, H5, H6). |
Subtitle | Text | Expression | To set the subtitle of the card. |
Subtitle style. | Text | Dropdown | Defines the HTML Tag style for the subtitle text. (H1, H2, H3, H4, H5, H6). |
Card content | Text | Expression | The content of the card. |
Content style | Text | Dropdown | Defines the HTML Tag style for the subtitle text. (H1, H2, H3, H4, H5, H6). |
Show chart | Boolean | Expression | To show or not, the chart in the card. |
Chart position | Text | Dropdown | Determines the positioning of the chart in the card. (2 – right, -1 - left.) |
Type | Text | Dropdown | Defines which graph type is displayed on the card. (Bar, line, area). |
Data Source | List | Expression | The list of the data source. |
Label | Text | Expression | Set the label of the list. |
Value | Number | Expression | Set the value of the list. |
Series name | Text | Expression | The series of the list. |
Clickable | Boolean |
| If enabled the card will be a clickable object. |
On click | Text | Dropdown | Defines the action to take after the user clicks the card. (Exit, flowchart, navigation, Refresh). |
Exit | Button |
| To click the button of selected value. |
Flowchart | Flowchart |
| Set the flowchart to the following card. |
Navigation | Navigation item |
| Set the navigation to the following card. |
Background color on hover | Text | Expression | Defines the background color change when hovering a card. Works with: Hexadecimal colors Hexadecimal colors with transparency RGB colors RGBA colors HSL colors HSLA colors Predefined/Cross-browser color names |
Body padding | Number | Expression | Adds padding to the chart according to the number in pixels. (Default value = 0) |
Border radius | Number | Expression | Sets a specific border radius for the rounded corners (Default is 0px for non-round corners) |
Show Box shadow | Boolean | Expression | "Card" effect, makes it look like the card is floating. true |
Border Style | Text | Dropdown | he border-style property specifies what kind of border to display. (Solid, dotted, dashed, double, groove, ridge). |
Border color | Text | Expression | The color can be set by:
name - specify a color name, like "red" HEX - specify a HEX value, like "#ff0000" RGB - specify a RGB value, like "rgb(255,0,0)" HSL - specify a HSL value, like "hsl(0, 100%, 50%)" transparent |
Border Width | Number | Expression | The width can be set as a specific number of pixels. Default value: 0(Set to 1 or higher for the border to appear) |
Chart Color | Text | Expression | Defines the color of the Chart. Only works when provided with either hex or rgb/rgba format. Color names are not supported. |
Header background color | Text | Expression | Defines the background color of the header using CSS Legal Color Values. Works with: Hexadecimal colors Hexadecimal colors with transparency RGB colors RGBA colors HSL colors HSLA colors Predefined/Cross-browser color names |
Body background color | Text | Expression | Defines the background color of the card body using CSS Legal Color Values. Works with: Hexadecimal colors Hexadecimal colors with transparency RGB colors RGBA colors HSL colors HSLA colors Predefined/Cross-browser color names |
Title icon | Text | Expression | Uses the FontAwesome library Example: "fa fa-info-circle" size modifiers are not needed. |
Title text color | Text | Expression | Defines the color of the title icon and text using CSS Legal Color Values. Works with: Hexadecimal colors Hexadecimal colors with transparency RGB colors RGBA colors HSL colors HSLA colors Predefined/Cross-browser color names |
Title icon size | Text | Dropdown | Defines the size for the title icon using FontAwesome sizing modifier. (Fa-2x, Fa-xs, Fa-sm, Fa-lg, Fa-3x, Fa-4x). |
Tooltip content | Text | Expression | Tooltip for the info icon, use it to describe the contents of the card. If no value is set the tooltip and its icon won't show up. |
Tooltip icon | Text | Expression | Uses the FontAwesome library Example: "fa fa-info-circle"(This is the default Icon used when undefined) size modifiers are not needed. |
Tooltip icon color | Text | Expression | Defines the color of the icon using CSS Legal Color Values. Works with: Hexadecimal colors Hexadecimal colors with transparency RGB colors RGBA colors HSL colors HSLA colors Predefined/Cross-browser color names |
Tooltip icon size | Text | Dropdown | Defines the size for the tooltip icon using FontAwesome sizing modifier. (Fa-2x, Fa-xs, Fa-sm, Fa-lg, Fa-3x, Fa-4x). |
Subtitle icon | Text | Expression | Uses the FontAwesome library Example: "fa fa-info-circle" size modifiers are not needed. |
Subtitle icon color | Text | Expression | Defines the color of the icon using CSS Legal Color Values. Works with: Hexadecimal colors Hexadecimal colors with transparency RGB colors RGBA colors HSL colors HSLA colors Predefined/Cross-browser color names |
Subtitle icon size | Text | Dropdown | Defines the size for the subtitle icon using FontAwesome sizing modifier. (Fa-2x, Fa-xs, Fa-sm, Fa-lg, Fa-3x, Fa-4x). |
Last updated
