MiRadio

The MiRadio component is a Flutter widget that implements a Material Design radio button.

Overview

MiRadio extends MiStatelessWidget, providing a radio button component. Radio buttons allow users to select one option from a set of mutually exclusive choices. When one radio button in a group is selected, the others become deselected. The value of the selected radio button is stored using a key in the application's state, defined by groupValue.

Component Name: radio

JSON key: "component": "radio"

Parameters

Parameter Key	JSON Value Type	Flutter Type	Description	Default Value	Nullable	Requires Build
`value`	`dynamic`	`String`	The value represented by this radio button. When this radio button is selected, the `groupValue` key in the application's state will be updated with this `value`. This can be a literal value or a key (`${key}`) referencing a value in the state.	None	Yes	No
`groupValue`	`dynamic`	`String`	A key (`${key}`) that represents the currently selected value within the group of radio buttons. This key points to a value in the application's state. When a radio button is selected, the value associated with `groupValue` is updated with the selected radio button's `value`.	None	Yes	No
`action`	`dynamic`	`dynamic`	An optional JSON action that is executed when this radio button is selected. This allows for custom actions beyond simply updating the `groupValue`.	None	Yes	No
`color`	`String`	`Color`	The color to use when this radio button is selected. Accepts Flutter color names or hex codes.	Theme default color ("accent" color from the theme)	Yes	No
`width`	`num` (Number)	`double`	The width of the radio button component.	40.0	Yes	No
`height`	`num` (Number)	`double`	The height of the radio button component.	40.0	Yes	No
`padding`	`List<num>`	`EdgeInsets`	Padding around the radio button. Expects a list of numbers for padding values (e.g., `[left, top, right, bottom]`).	None	Yes	No
`margin`	`List<num>`	`EdgeInsets`	Margin around the radio button. Expects a list of numbers for margin values.	None	Yes	No
`alignment`	`String`	`AlignmentGeometry`	Alignment of the radio button within its parent. Accepts alignment keywords (e.g., 'topLeft', 'center').	Defaults to 'topLeft'	Yes	No

Note:

Additional Action Support: The action parameter, when provided, defines a JSON action configuration. This action is dispatched when the radio button is selected. This allows for triggering side effects beyond updating the groupValue.
State Management Integration: The value and groupValue parameters are crucial for state management. groupValue must be a key (${key}). value can be a key or a literal value. When a radio button is selected:
1. The "updateData" action updates the data associated with the groupValue key (in the root of the state) with the selected radio button's value.
2. If an additional action is provided in the JSON configuration, it's executed after the default updateData action.
Inherited Parameters: Parameters like color, alignment, width, height, padding, and margin are inherited from MiStatelessWidget, providing standard styling and layout capabilities.
Mutually Exclusive Selection: Radio buttons, by design, are mutually exclusive within a group. The framework handles this by using the shared groupValue key. When a radio button is selected, the groupValue is updated, ensuring only one radio button within that group can be selected at a time.

Example JSON Configurations

Example 1: Basic Radio Buttons (Hardcoded Values)

{
  "component": "column",
  "children": [
    {
      "component": "radio",
      "groupValue": "${selectedOption}",
      "value": "option1"
    },
    {
      "component": "radio",
      "groupValue": "${selectedOption}",
      "value": "option2"
    },
    {
      "component": "radio",
      "groupValue": "${selectedOption}",
      "value": "option3",
       "action": {
        "actionType": "customLogAction",
        "message": "Option 3 selected!"
      }
    }
  ]
}

Explanation of Example 1:

component: "column": The radio buttons are arranged within a MiColumn, demonstrating a common layout pattern.
"component": "radio" (x3): Three MiRadio components are defined.
groupValue: "${selectedOption}": All three radio buttons share the same groupValue key: ${selectedOption}. This key should exist in your application's state.
value: "option1", value: "option2", value: "option3": Each radio button has a distinct, hardcoded value. When a radio button is selected, the value of ${selectedOption} in the state will be updated to the corresponding "option1", "option2", or "option3".
Radio 3's action: Demonstrates additional action to be performed after the default action.

Example 2: Radio Buttons with Values from State

{
  "component": "column",
  "children": [
    {
      "component": "radio",
      "groupValue": "${userChoice}",
      "value": "${choiceA}"
    },
    {
      "component": "radio",
      "groupValue": "${userChoice}",
      "value": "${choiceB}"
    }
  ]
}

Explanation of Example 2:

component: "column": Uses a MiColumn for layout.
"component": "radio" (x2): Two MiRadio components.
groupValue: "${userChoice}": Both radio buttons share the groupValue key ${userChoice}.
value: "${choiceA}", value: "${choiceB}": The value for each radio button is also a key. This means the actual value will be retrieved from the application's state. For example, if ${choiceA} in the state holds the value "Red", then selecting the first radio button will set ${userChoice} to "Red".

Example 3: Radio Buttons inside a ListView (with Action)

{
  "component": "listView",
  "listKey": "${fruits}",
  "childComponent": {
    "component": "radio",
    "groupValue": "${selectedFruit}",
    "value": "${FRUIT_NAME}",
    "action": {
        "actionType": "showToast",
        "message": "You selected: ${item}"
    }
  }
}

Explanation of Example 3:

component: "listView": This configuration defines a MiListView component, which is used to display a scrollable list of items. In this case, it will display a list of radio buttons.
listKey: "${fruits}": The listKey parameter specifies the key in the application state that holds the list of data to be displayed in the ListView. Here, it's assumed that the state contains a list under the key "fruits".
childComponent: The childComponent defines the structure of each item within the ListView. In this example, each item will be a MiRadio component.
"component": "radio": Within childComponent, each item is defined as a MiRadio component, meaning a radio button will be created for each item in the "fruits" list.
groupValue: "${selectedFruit}": All radio buttons within the list share the same groupValue key, ${selectedFruit}, ensuring that only one fruit can be selected at a time.
value: "${FRUIT_NAME}": For each radio button, the value is set to ${FRUIT_NAME}. It's implied that each item in the "fruits" list is an object (or map) that contains a key called "FRUIT_NAME". The value associated with this key for each item will be used as the value for the corresponding radio button.
action: This defines an action that will be executed when any radio button in the list is selected.
actionType: "showToast": Specifies that a toast message will be displayed as the action.
message: "You selected: ${item}": The message for the toast. ${item} is a special key within the ListView's childComponent scope, referring to the entire data item for the currently selected radio button. If you want to show just the fruit name, you should use ${FRUIT_NAME} here as well, matching the value.

Overview​

Parameters​

Example JSON Configurations​

Overview

Parameters

Example JSON Configurations