https://appikorn-widgets.web.app/assets/js/44e2f92c.b3c5b887.js

1"use strict";(self.webpackChunkdocumentation=self.webpackChunkdocumentation||[]).push([[8632],{3645:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>o,contentTitle:()=>r,default:()=>h,frontMatter:()=>l,metadata:()=>i,toc:()=>a});const i=JSON.parse('{"id":"widgets/radio_button_appi","title":"RadioButtonAppi","description":"A customizable radio button widget with enhanced styling and group management for Flutter applications.","source":"@site/docs/widgets/radio_button_appi.md","sourceDirName":"widgets","slug":"/widgets/radio_button_appi","permalink":"/docs/widgets/radio_button_appi","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":27,"frontMatter":{"id":"radio_button_appi","slug":"/widgets/radio_button_appi","sidebar_position":27,"title":"RadioButtonAppi"},"sidebar":"tutorialSidebar","previous":{"title":"CheckboxAppi","permalink":"/docs/widgets/checkbox_appi"},"next":{"title":"ToggleSwitchAppi","permalink":"/docs/widgets/toggle_switch_appi"}}');var d=t(4848),s=t(8453);const l={id:"radio_button_appi",slug:"/widgets/radio_button_appi",sidebar_position:27,title:"RadioButtonAppi"},r="RadioButtonAppi",o={},a=[{value:"Features",id:"features",level:2},{value:"Usage",id:"usage",level:2},{value:"Parameters",id:"parameters",level:2},{value:"Examples",id:"examples",level:2},{value:"Basic Radio Button Group",id:"basic-radio-button-group",level:3},{value:"Custom Styled Radio Buttons",id:"custom-styled-radio-buttons",level:3},{value:"Radio Button with Complex Values",id:"radio-button-with-complex-values",level:3},{value:"Disabled Radio Button",id:"disabled-radio-button",level:3},{value:"Best Practices",id:"best-practices",level:2}];function c(e){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,s.R)(),...e.components};return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(n.header,{children:(0,d.jsx)(n.h1,{id:"radiobuttonappi",children:"RadioButtonAppi"})}),"\n",(0,d.jsx)(n.p,{children:"A customizable radio button widget with enhanced styling and group management for Flutter applications."}),"\n",(0,d.jsx)(n.h2,{id:"features",children:"Features"}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsxs)(n.li,{children:[(0,d.jsx)(n.strong,{children:"Group Selection"}),": Mutually exclusive selection within a group"]}),"\n",(0,d.jsxs)(n.li,{children:[(0,d.jsx)(n.strong,{children:"Custom Styling"}),": Configurable colors, sizes, and visual properties"]}),"\n",(0,d.jsxs)(n.li,{children:[(0,d.jsx)(n.strong,{children:"Interactive States"}),": Hover and focus effects"]}),"\n",(0,d.jsxs)(n.li,{children:[(0,d.jsx)(n.strong,{children:"Flexible Layout"}),": Optional label text with customizable positioning"]}),"\n",(0,d.jsxs)(n.li,{children:[(0,d.jsx)(n.strong,{children:"Accessibility"}),": Built-in accessibility support"]}),"\n",(0,d.jsxs)(n.li,{children:[(0,d.jsx)(n.strong,{children:"Type Safety"}),": Generic type support for values"]}),"\n"]}),"\n",(0,d.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-dart",children:"enum PaymentMethod { card, cash, digital }\nPaymentMethod selectedMethod = PaymentMethod.card;\n\nRadioButtonAppi<PaymentMethod>(\n  value: PaymentMethod.card,\n  groupValue: selectedMethod,\n  onChanged: (PaymentMethod? value) {\n    setState(() {\n      selectedMethod = value!;\n    });\n  },\n  label: 'Credit Card',\n)\n"})}),"\n",(0,d.jsx)(n.h2,{id:"parameters",children:"Parameters"}),"\n",(0,d.jsxs)(n.table,{children:[(0,d.jsx)(n.thead,{children:(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.th,{children:"Parameter"}),(0,d.jsx)(n.th,{children:"Type"}),(0,d.jsx)(n.th,{children:"Description"})]})}),(0,d.jsxs)(n.tbody,{children:[(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"value"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"T"})}),(0,d.jsxs)(n.td,{children:[(0,d.jsx)(n.strong,{children:"Required."})," The value this radio button represents"]})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"groupValue"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"T?"})}),(0,d.jsxs)(n.td,{children:[(0,d.jsx)(n.strong,{children:"Required."})," The currently selected value in the group"]})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"onChanged"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"ValueChanged<T?>?"})}),(0,d.jsxs)(n.td,{children:[(0,d.jsx)(n.strong,{children:"Required."})," Callback when radio button is selected"]})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"label"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"String?"})}),(0,d.jsx)(n.td,{children:"Optional text label displayed next to radio button"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"activeColor"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"Color?"})}),(0,d.jsx)(n.td,{children:"Color when radio button is selected (default: primary color)"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"focusColor"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"Color?"})}),(0,d.jsx)(n.td,{children:"Color when radio button is focused"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"hoverColor"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"Color?"})}),(0,d.jsx)(n.td,{children:"Color when radio button is hovered"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"overlayColor"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"MaterialStateProperty<Color?>?"})}),(0,d.jsx)(n.td,{children:"Color for different interaction states"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"splashRadius"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"double?"})}),(0,d.jsx)(n.td,{children:"Radius of the splash effect"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"materialTapTargetSize"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"MaterialTapTargetSize?"})}),(0,d.jsx)(n.td,{children:"Size of the tap target"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"visualDensity"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"VisualDensity?"})}),(0,d.jsx)(n.td,{children:"Visual density for spacing"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"focusNode"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"FocusNode?"})}),(0,d.jsx)(n.td,{children:"Focus node for keyboard navigation"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"autofocus"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"bool"})}),(0,d.jsx)(n.td,{children:"Whether to autofocus (default: false)"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"toggleable"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"bool"})}),(0,d.jsx)(n.td,{children:"Whether the radio can be deselected (default: false)"})]})]})]}),"\n",(0,d.jsx)(n.h2,{id:"examples",children:"Examples"}),"\n",(0,d.jsx)(n.h3,{id:"basic-radio-button-group",children:"Basic Radio Button Group"}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-dart",children:"enum Gender { male, female, other }\nGender? selectedGender;\n\nColumn(\n  children: [\n    RadioButtonAppi<Gender>(\n      value: Gender.male,\n      groupValue: selectedGender,\n      onChanged: (Gender? value) {\n        setState(() {\n          selectedGender = value;\n        });\n      },\n      label: 'Male',\n    ),\n    RadioButtonAppi<Gender>(\n      value: Gender.female,\n      groupValue: selectedGender,\n      onChanged: (Gender? value) {\n        setState(() {\n          selectedGender = value;\n        });\n      },\n      label: 'Female',\n    ),\n    RadioButtonAppi<Gender>(\n      value: Gender.other,\n      groupValue: selectedGender,\n      onChanged: (Gender? value) {\n        setState(() {\n          selectedGender = value;\n        });\n      },\n      label: 'Other',\n    ),\n  ],\n)\n"})}),"\n",(0,d.jsx)(n.h3,{id:"custom-styled-radio-buttons",children:"Custom Styled Radio Buttons"}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-dart",children:"int selectedOption = 1;\n\nRadioButtonAppi<int>(\n  value: 1,\n  groupValue: selectedOption,\n  onChanged: (int? value) {\n    setState(() {\n      selectedOption = value!;\n    });\n  },\n  label: 'Option 1',\n  activeColor: Colors.green,\n  splashRadius: 25,\n)\n"})}),"\n",(0,d.jsx)(n.h3,{id:"radio-button-with-complex-values",children:"Radio Button with Complex Values"}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-dart",children:"class Option {\n  final Str

1ing id;\n  final String title;\n  final String description;\n  \n  Option(this.id, this.title, this.description);\n}\n\nOption? selectedOption;\nList<Option> options = [\n  Option('1', 'Basic Plan', 'Essential features'),\n  Option('2', 'Pro Plan', 'Advanced features'),\n  Option('3', 'Enterprise', 'All features'),\n];\n\nColumn(\n  children: options.map((option) => \n    RadioButtonAppi<Option>(\n      value: option,\n      groupValue: selectedOption,\n      onChanged: (Option? value) {\n        setState(() {\n          selectedOption = value;\n        });\n      },\n      label: '${option.title} - ${option.description}',\n    ),\n  ).toList(),\n)\n"})}),"\n",(0,d.jsx)(n.h3,{id:"disabled-radio-button",children:"Disabled Radio Button"}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-dart",children:"RadioButtonAppi<String>(\n  value: 'disabled',\n  groupValue: null,\n  onChanged: null, // Disabled\n  label: 'This option is disabled',\n)\n"})}),"\n",(0,d.jsx)(n.h2,{id:"best-practices",children:"Best Practices"}),"\n",(0,d.jsxs)(n.ul,{children:["\n",(0,d.jsxs)(n.li,{children:["Always use the same ",(0,d.jsx)(n.code,{children:"onChanged"})," callback pattern for all radio buttons in a group"]}),"\n",(0,d.jsxs)(n.li,{children:["Ensure all radio buttons in a group share the same ",(0,d.jsx)(n.code,{children:"groupValue"})]}),"\n",(0,d.jsx)(n.li,{children:"Use descriptive labels that clearly explain each option"}),"\n",(0,d.jsx)(n.li,{children:"Consider using enums for type-safe value management"}),"\n",(0,d.jsxs)(n.li,{children:["Group related radio buttons visually (e.g., in a ",(0,d.jsx)(n.code,{children:"Column"})," or ",(0,d.jsx)(n.code,{children:"RadioListTile"}),")"]}),"\n",(0,d.jsx)(n.li,{children:"Provide at least one selected option by default when appropriate"}),"\n",(0,d.jsxs)(n.li,{children:["Use ",(0,d.jsx)(n.code,{children:"toggleable: true"})," only when deselection makes sense in your use case"]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,d.jsx)(n,{...e,children:(0,d.jsx)(c,{...e})}):c(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>l,x:()=>r});var i=t(6540);const d={},s=i.createContext(d);function l(e){const n=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(d):e.components||d:l(e.components),i.createElement(s.Provider,{value:n},e.children)}}}]);