https://appikorn-widgets.web.app/assets/js/184d6496.371fd1cf.js

1"use strict";(self.webpackChunkdocumentation=self.webpackChunkdocumentation||[]).push([[9667],{7632:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>r,contentTitle:()=>c,default:()=>a,frontMatter:()=>s,metadata:()=>l,toc:()=>o});const l=JSON.parse('{"id":"widgets/input_chip_appi","title":"InputChipAppi","description":"A customizable input chip widget for displaying selectable and deletable tags or options in Flutter applications.","source":"@site/docs/widgets/input_chip_appi.md","sourceDirName":"widgets","slug":"/widgets/input_chip_appi","permalink":"/docs/widgets/input_chip_appi","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":15,"frontMatter":{"id":"input_chip_appi","slug":"/widgets/input_chip_appi","sidebar_position":15,"title":"InputChipAppi"},"sidebar":"tutorialSidebar","previous":{"title":"SelectorListAppi","permalink":"/docs/widgets/selector_list_appi"},"next":{"title":"SearchChipAppi","permalink":"/docs/widgets/search_chip_appi"}}');var d=i(4848),t=i(8453);const s={id:"input_chip_appi",slug:"/widgets/input_chip_appi",sidebar_position:15,title:"InputChipAppi"},c="InputChipAppi",r={},o=[{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 Input Chip",id:"basic-input-chip",level:3},{value:"Deletable Chip",id:"deletable-chip",level:3},{value:"Chip with Avatar",id:"chip-with-avatar",level:3},{value:"Custom Styled Chip",id:"custom-styled-chip",level:3},{value:"Chip with Custom Delete Icon",id:"chip-with-custom-delete-icon",level:3},{value:"Interactive Chip List",id:"interactive-chip-list",level:3},{value:"Disabled Chip",id:"disabled-chip",level:3},{value:"Best Practices",id:"best-practices",level:2}];function h(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,t.R)(),...e.components};return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(n.header,{children:(0,d.jsx)(n.h1,{id:"inputchipappi",children:"InputChipAppi"})}),"\n",(0,d.jsx)(n.p,{children:"A customizable input chip widget for displaying selectable and deletable tags or options in 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:"Interactive Chips"}),": Tap to select/deselect with visual feedback"]}),"\n",(0,d.jsxs)(n.li,{children:[(0,d.jsx)(n.strong,{children:"Deletable"}),": Optional delete functionality with customizable delete icon"]}),"\n",(0,d.jsxs)(n.li,{children:[(0,d.jsx)(n.strong,{children:"Custom Styling"}),": Configurable colors, shapes, and visual properties"]}),"\n",(0,d.jsxs)(n.li,{children:[(0,d.jsx)(n.strong,{children:"Avatar Support"}),": Optional leading avatar or icon"]}),"\n",(0,d.jsxs)(n.li,{children:[(0,d.jsx)(n.strong,{children:"Flexible Content"}),": Support for text labels and custom styling"]}),"\n",(0,d.jsxs)(n.li,{children:[(0,d.jsx)(n.strong,{children:"Material Design"}),": Follows Material Design chip guidelines"]}),"\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:"InputChipAppi(\n  label: 'Flutter',\n  selected: true,\n  onSelected: (bool selected) {\n    setState(() {\n      isSelected = selected;\n    });\n  },\n  onDeleted: () {\n    // Remove chip logic\n  },\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:"label"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"Widget"})}),(0,d.jsxs)(n.td,{children:[(0,d.jsx)(n.strong,{children:"Required."})," The primary content of the chip (usually Text)"]})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"avatar"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"Widget?"})}),(0,d.jsx)(n.td,{children:"Optional leading widget (usually CircleAvatar or Icon)"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"selected"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"bool"})}),(0,d.jsx)(n.td,{children:"Whether the chip is selected (default: false)"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"onSelected"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"ValueChanged<bool>?"})}),(0,d.jsx)(n.td,{children:"Callback when chip selection changes"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"onDeleted"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"VoidCallback?"})}),(0,d.jsx)(n.td,{children:"Callback when delete button is pressed"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"deleteIcon"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"Widget?"})}),(0,d.jsx)(n.td,{children:"Custom delete icon (default: Icons.cancel)"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"deleteIconColor"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"Color?"})}),(0,d.jsx)(n.td,{children:"Color of the delete icon"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"deleteButtonTooltipMessage"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"String?"})}),(0,d.jsx)(n.td,{children:"Tooltip message for delete button"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"onPressed"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"VoidCallback?"})}),(0,d.jsx)(n.td,{children:"Callback when chip is pressed"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"pressElevation"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"double?"})}),(0,d.jsx)(n.td,{children:"Elevation when chip is pressed"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"disabledColor"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"Color?"})}),(0,d.jsx)(n.td,{children:"Color when chip is disabled"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"selectedColor"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"Color?"})}),(0,d.jsx)(n.td,{children:"Color when chip is selected"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"tooltip"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"String?"})}),(0,d.jsx)(n.td,{children:"Tooltip message for the chip"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"shape"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"ShapeBorder?"})}),(0,d.jsx)(n.td,{children:"Custom shape for the chip"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"clipBehavior"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"Clip"})}),(0,d.jsx)(n.td,{children:"Clip behavior for the chip (default: Clip.none)"})]}),(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:"backgroundColor"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"Color?"})}

1),(0,d.jsx)(n.td,{children:"Background color of the chip"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"padding"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"EdgeInsets?"})}),(0,d.jsx)(n.td,{children:"Internal padding of the chip"})]}),(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:"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:"elevation"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"double?"})}),(0,d.jsx)(n.td,{children:"Elevation of the chip"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"shadowColor"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"Color?"})}),(0,d.jsx)(n.td,{children:"Shadow color of the chip"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"selectedShadowColor"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"Color?"})}),(0,d.jsx)(n.td,{children:"Shadow color when selected"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"showCheckmark"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"bool?"})}),(0,d.jsx)(n.td,{children:"Whether to show checkmark when selected"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"checkmarkColor"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"Color?"})}),(0,d.jsx)(n.td,{children:"Color of the checkmark"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"labelStyle"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"TextStyle?"})}),(0,d.jsx)(n.td,{children:"Text style for the label"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"labelPadding"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"EdgeInsets?"})}),(0,d.jsx)(n.td,{children:"Padding around the label"})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"side"})}),(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"BorderSide?"})}),(0,d.jsx)(n.td,{children:"Border side of the chip"})]})]})]}),"\n",(0,d.jsx)(n.h2,{id:"examples",children:"Examples"}),"\n",(0,d.jsx)(n.h3,{id:"basic-input-chip",children:"Basic Input Chip"}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-dart",children:"bool isSelected = false;\n\nInputChipAppi(\n  label: Text('Technology'),\n  selected: isSelected,\n  onSelected: (bool selected) {\n    setState(() {\n      isSelected = selected;\n    });\n  },\n)\n"})}),"\n",(0,d.jsx)(n.h3,{id:"deletable-chip",children:"Deletable Chip"}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-dart",children:"List<String> tags = ['Flutter', 'Dart', 'Mobile'];\n\nWrap(\n  spacing: 8,\n  children: tags.map((tag) => \n    InputChipAppi(\n      label: Text(tag),\n      onDeleted: () {\n        setState(() {\n          tags.remove(tag);\n        });\n      },\n      deleteIcon: Icon(Icons.close, size: 18),\n    ),\n  ).toList(),\n)\n"})}),"\n",(0,d.jsx)(n.h3,{id:"chip-with-avatar",children:"Chip with Avatar"}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-dart",children:"InputChipAppi(\n  avatar: CircleAvatar(\n    backgroundColor: Colors.blue,\n    child: Text('F', style: TextStyle(color: Colors.white)),\n  ),\n  label: Text('Flutter Developer'),\n  selected: true,\n  selectedColor: Colors.blue[100],\n  onSelected: (bool selected) {\n    // Handle selection\n  },\n)\n"})}),"\n",(0,d.jsx)(n.h3,{id:"custom-styled-chip",children:"Custom Styled Chip"}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-dart",children:"InputChipAppi(\n  label: Text(\n    'Premium Feature',\n    style: TextStyle(\n      fontWeight: FontWeight.bold,\n      color: Colors.white,\n    ),\n  ),\n  backgroundColor: Colors.purple,\n  selectedColor: Colors.purple[700],\n  shape: RoundedRectangleBorder(\n    borderRadius: BorderRadius.circular(20),\n  ),\n  elevation: 4,\n  pressElevation: 8,\n  onSelected: (bool selected) {\n    // Handle selection\n  },\n)\n"})}),"\n",(0,d.jsx)(n.h3,{id:"chip-with-custom-delete-icon",children:"Chip with Custom Delete Icon"}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-dart",children:"InputChipAppi(\n  label: Text('Removable Tag'),\n  avatar: Icon(Icons.tag, size: 20),\n  deleteIcon: Icon(\n    Icons.remove_circle,\n    color: Colors.red,\n    size: 20,\n  ),\n  deleteButtonTooltipMessage: 'Remove this tag',\n  onDeleted: () {\n    // Handle deleti

1on\n  },\n  side: BorderSide(color: Colors.grey),\n)\n"})}),"\n",(0,d.jsx)(n.h3,{id:"interactive-chip-list",children:"Interactive Chip List"}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-dart",children:"class ChipData {\n  final String label;\n  final IconData icon;\n  bool isSelected;\n  \n  ChipData(this.label, this.icon, {this.isSelected = false});\n}\n\nList<ChipData> chipList = [\n  ChipData('Work', Icons.work),\n  ChipData('Personal', Icons.person),\n  ChipData('Important', Icons.star),\n  ChipData('Travel', Icons.flight),\n];\n\nWrap(\n  spacing: 8,\n  runSpacing: 8,\n  children: chipList.map((chipData) =>\n    InputChipAppi(\n      avatar: Icon(chipData.icon, size: 18),\n      label: Text(chipData.label),\n      selected: chipData.isSelected,\n      onSelected: (bool selected) {\n        setState(() {\n          chipData.isSelected = selected;\n        });\n      },\n      selectedColor: Colors.blue[100],\n      checkmarkColor: Colors.blue,\n    ),\n  ).toList(),\n)\n"})}),"\n",(0,d.jsx)(n.h3,{id:"disabled-chip",children:"Disabled Chip"}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-dart",children:"InputChipAppi(\n  label: Text('Disabled Chip'),\n  onSelected: null, // Disabled\n  disabledColor: Colors.grey[300],\n  avatar: Icon(Icons.block, color: Colors.grey),\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:["Use ",(0,d.jsx)(n.code,{children:"Wrap"})," widget to automatically handle chip overflow to new lines"]}),"\n",(0,d.jsx)(n.li,{children:"Provide clear visual feedback for selected vs unselected states"}),"\n",(0,d.jsx)(n.li,{children:"Use appropriate spacing between chips for better touch targets"}),"\n",(0,d.jsx)(n.li,{children:"Consider using icons or avatars to make chips more recognizable"}),"\n",(0,d.jsx)(n.li,{children:"Implement proper state management for chip selection"}),"\n",(0,d.jsx)(n.li,{children:"Use consistent styling across all chips in your app"}),"\n",(0,d.jsx)(n.li,{children:"Provide tooltips for better accessibility"}),"\n",(0,d.jsx)(n.li,{children:"Consider the context when deciding between selectable and deletable chips"}),"\n"]})]})}function a(e={}){const{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,d.jsx)(n,{...e,children:(0,d.jsx)(h,{...e})}):h(e)}},8453:(e,n,i)=>{i.d(n,{R:()=>s,x:()=>c});var l=i(6540);const d={},t=l.createContext(d);function s(e){const n=l.useContext(t);return l.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(d):e.components||d:s(e.components),l.createElement(t.Provider,{value:n},e.children)}}}]);