1"use strict";(self.webpackChunkdocumentation=self.webpackChunkdocumentation||[]).push([[8964],{202:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>c,contentTitle:()=>r,default:()=>h,frontMatter:()=>o,metadata:()=>t,toc:()=>d});const t=JSON.parse('{"id":"widgets/selector_list_appi","title":"SelectorListAppi","description":"A flexible horizontal selector widget that displays items as chips or cards with optional icons, supporting single selection and customizable styling.","source":"@site/docs/widgets/selector_list_appi.md","sourceDirName":"widgets","slug":"/widgets/selector_list_appi","permalink":"/docs/widgets/selector_list_appi","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":29,"frontMatter":{"id":"selector_list_appi","slug":"/widgets/selector_list_appi","sidebar_position":29,"title":"SelectorListAppi"},"sidebar":"tutorialSidebar","previous":{"title":"SelectorGridAppi","permalink":"/docs/widgets/selector_grid_appi"},"next":{"title":"InputChipAppi","permalink":"/docs/widgets/input_chip_appi"}}');var s=i(4848),l=i(8453);const o={id:"selector_list_appi",slug:"/widgets/selector_list_appi",sidebar_position:29,title:"SelectorListAppi"},r="SelectorListAppi",c={},d=[{value:"Features",id:"features",level:2},{value:"Usage",id:"usage",level:2},{value:"Basic Selector List",id:"basic-selector-list",level:3},{value:"Selector List with Icons",id:"selector-list-with-icons",level:3},{value:"Customized Selector List",id:"customized-selector-list",level:3},{value:"Parameters",id:"parameters",level:2},{value:"Behavior",id:"behavior",level:2},{value:"Selection",id:"selection",level:3},{value:"Layout",id:"layout",level:3},{value:"Styling",id:"styling",level:3},{value:"Best Practices",id:"best-practices",level:2},{value:"Examples",id:"examples",level:2},{value:"Category Selection",id:"category-selection",level:3},{value:"Priority Selector",id:"priority-selector",level:3},{value:"Status Filter",id:"status-filter",level:3},{value:"Time Period Selector",id:"time-period-selector",level:3},{value:"Form Integration",id:"form-integration",level:3},{value:"Scrollable Long List",id:"scrollable-long-list",level:3},{value:"Custom Styled Selector",id:"custom-styled-selector",level:3},{value:"See Also",id:"see-also",level:2}];function a(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,l.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"selectorlistappi",children:"SelectorListAppi"})}),"\n",(0,s.jsx)(n.p,{children:"A flexible horizontal selector widget that displays items as chips or cards with optional icons, supporting single selection and customizable styling."}),"\n",(0,s.jsx)(n.h2,{id:"features",children:"Features"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Horizontal Layout"}),": Displays items in a scrollable horizontal list"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Single Selection"}),": Select one item from the list"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Icon Support"}),": Optional icons for each item"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Flexible Sizing"}),": Customizable width, height, and spacing"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Scrollable"}),": Automatically scrollable when content exceeds container width"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Custom Styling"}),": Configurable text colors, alignment, and dimensions"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Form Integration"}),": Works seamlessly with form validation"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Responsive Design"}),": Adapts to different screen sizes and orientations"]}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,s.jsx)(n.h3,{id:"basic-selector-list",children:"Basic Selector List"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-dart",children:"SelectorListAppi(\n selected: _selectedOption,\n dat: ['Option 1', 'Option 2', 'Option 3', 'Option 4'],\n onTap: (selectedValue) {\n setState(() => _selectedOption = selectedValue);\n },\n)\n"})}),"\n",(0,s.jsx)(n.h3,{id:"selector-list-with-icons",children:"Selector List with Icons"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-dart",children:"SelectorListAppi(\n selected: _selectedCategory,\n dat: ['Home', 'Work', 'Personal', 'Travel'],\n icons: [\n Icons.home,\n Icons.work,\n Icons.person,\n Icons.flight,\n ],\n onTap: (selectedValue) {\n setState(() => _selectedCategory = selectedValue);\n },\n)\n"})}),"\n",(0,s.jsx)(n.h3,{id:"customized-selector-list",children:"Customized Selector List"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-dart",children:"SelectorListAppi(\n selected: _selectedPriority,\n dat: ['Low', 'Medium', 'High', 'Critical'],\n heading: 'Priority Level',\n mandatory: true,\n minWidth: 80,\n chipHeight: 45,\n spacing: 12,\n iconHeight: 20,\n iconWidth: 20,\n selectedTextColor: Colors.white,\n unselectedTextColor: Colors.grey[600],\n crossAlignment: CrossAxisAlignment.center,\n onTap: (selectedValue) {\n setState(() => _selectedPriority = selectedValue);\n },\n)\n"})}),"\n",(0,s.jsx)(n.h2,{id:"parameters",children:"Parameters"}),"\n",(0,s.jsxs)(n.p,{children:["| Name | Type | Description | Default |\n|------|------|-------------|---------||\n| ",(0,s.jsx)(n.code,{children:"selected"})," | ",(0,s.jsx)(n.code,{children:"String"})," | ",(0,s.jsx)(n.strong,{children:"Required."})," Currently selected value | - |\n| ",(0,s.jsx)(n.code,{children:"dat"})," | ",(0,s.jsx)(n.code,{children:"List<String>"})," | ",(0,s.jsx)(n.strong,{children:"Required."})," List of options to display | - |\n| ",(0,s.jsx)(n.code,{children:"onTap"})," | ",(0,s.jsx)(n.code,{children:"Function(String)"})," | ",(0,s.jsx)(n.strong,{children:"Required."})," Callback when an item is tapped | - |\n| ",(0,s.jsx)(n.code,{children:"icons"})," | ",(0,s.jsx)(n.code,{children:"List<IconData>?"})," | Optional list of icons for each item | ",(0,s.jsx)(n.code,{children:"null"})," |\n| ",(0,s.jsx)(n.code,{children:"heading"})," | ",(0,s.jsx)(n.code,{children:"String?"})," | Optional heading text above the selector | ",(0,s.jsx)(n.code,{children:"null"})," |\n| ",(0,s.jsx)(n.code,{children:"mandatory"})," | ",(0,s.jsx)(n.code,{children:"bool?"})," | Whether the field is required (shows asterisk) | ",(0,s.jsx)(n.code,{children:"false"})," |\n| ",(0,s.jsx)(n.code,{children:"minWidth"})," | ",(0,s.jsx)(n.code,{children:"double?"})," | Minimum width for each chip | ",(0,s.jsx)(n.code,{children:"null"})," |\n| ",(0,s.jsx)(n.code,{children:"chipHeight"})," | ",(0,s.jsx)(n.code,{children:"double?"})," | Height of each chip | ",(0,s.jsx)(n.code,{children:"null"})," |\n| ",(0,s.jsx)(n.code,{children:"spacing"})," | ",(0,s.jsx)(n.code,{children:"double?"})," | Horizontal spacing between chips | ",(0,s.jsx)(n.code,{children:"8.0"})," |\n| ",(0,s.jsx)(n.code,{children:"iconPadding"})," | ",(0,s.jsx)(n.code,{children:"EdgeInsets?"})," | Padding around icons | ",(0,s.jsx)(n.code,{children:"null"})," |\n| ",(0,s.jsx)(n.code,{children:"iconHeight"})," | ",(0,s.jsx)(n.code,{children:"double?"})," | Height of icons | ",(0,s.jsx)(n.code,{children:"null"})," |\n| ",(0,s.jsx)(n.code,{children:"iconWidth"})," | ",(0,s.jsx)(n.code,{children:"double?"})," | Width of icons | ",(0,s.jsx)(n.code,{children:"null"})," |\n| ",(0,s.jsx)(n.code,{children:"crossAlignment"})," | ",(0,s.jsx)(n.code,{children:"CrossAxisAlignment?"})," | Vertical alignment of items | ",(0,s.jsx)(n.code,{children:"CrossAxisAlignment.center"})," |\n| ",(0,s.jsx)(n.code,{children:"scrollable"})," | ",(0,s.jsx)(n.code,{children:"bool?"})," | Whether the list should be scrollable | ",(0,s.jsx)(n.code,{children:"true"})," |\n| ",(0,s.jsx)(n.code,{children:"selectedTextColor"})," | ",(0,s.jsx)(n.code,{children:"Color?"})," | Text color for selected item | ",(0,s.jsx)(n.code,{children:"null"})," |\n| ",(0,s.jsx)(n.code,{children:"unselectedTextColor"})," | ",(0,s.jsx)(n.code,{children:"Color?"})," | Text color for unselected items | ",(0,s.jsx)(n.code,{children:"null"})," |"]}),"\n",(0,s.jsx)(n.h2,{id:"behavior",children:"Behavior"}),"\n",(0,s.jsx)(n.h3,{id:"selection",children:"Selection"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"Only one item can be selected at a time"}),"\n",(0,s.jsx)(n.li,{children:"Tapping an item selects it and deselects others"}),"\n",(0,s.jsx)(n.li,{children:"Selected item is visually highlighted"}),"\n",(0,s.jsx)(n.li,{children:"Callback is triggered on every selection change"}),"\n"]}),"\n",(0,s.jsx)(n.h3,{id:"layout",children:"Layout"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"Items are arranged horizontally"}),"\n",(0,s.jsx)(n.li,{children:"Automatically scrollable when content exceeds container width"}),"\n",(0,s.jsx)(n.li,{children:"Spacing between items is customizable"}),"\n",(0,s.jsx)(n.li,{children:"Icons (if provided) are displayed above text labels"}),"\n"]}),"\n",(0,s.jsx)(n.h3,{id:"styling",children:"Styling"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"Selected and unselected items have different visual states"}),"\n",(0,s.jsx)(n.li,{children:"Text colors can be customized for both states"}),"\n",(0,s.jsx)(n.li,{children:"Icon and chip dimensions are configurable"}),"\n",(0,s.jsx)(n.li,{children:"Supports custom alignment and spacing"}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"best-practices",children:"Best Practices"}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Item Count"}),": Keep the number of items reasonable for horizontal scrolling"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Icon Consistency"}),": If using icons, provide them for all items or none"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Text Length"}),": Keep item labels short for better horizontal layout"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Spacing"}),": Use appropriate spacing for touch targets (minimum 44px)"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Color Contrast"}),": Ensure good contrast between selected/unselected states"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Accessibility"}),": Provide meaningful labels and ensure proper touch targets"]}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"examples",children:"Examples"}),"\n",(0,s.jsx)(n.h3,{id:"category-selection",children:"Category Selection"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-dart",children:"SelectorListAppi(\n selected: _selectedCategory,\n dat: ['All', 'Work', 'Personal', 'Shopping', 'Health'],\n icons: [\n Icons.apps,\n Icons.work,\n Icons.person,\n Icons.shopping_cart,\n Icons.health_and_safety,\n ],\n heading: 'Category',\n chipHeight: 50,\n spacing: 10,\n iconHeight: 24,\n iconWidth: 24,\n selectedTextColor: Colors.white,\n unselectedTextColor: Colors.grey[700],\n onTap: (category) {\n setState(() => _selectedCategory = category);\n _filterByCategory(category);\n },\n)\n"})}),"\n",(0,s.jsx)(n.h3,{id:"priority-selector",children:"Priority Selector"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-dart",children:"SelectorListAppi(\n selected: _selectedPriority,\n dat: ['Low', 'Medium', 'High', 'Urgent'],\n heading: 'Priority',\n mandatory: true,\n minWidth: 70,\n chipHeight: 40,\n spacing: 8,\n selectedTextColor: Colors.white,\n unselectedTextColor: Colors.black87,\n onTap: (priority) {\n setState(() => _selectedPriority = priority);\n _updateTaskPriority(priority);\n },\n)\n"})}),"\n",(0,s.jsx)(n.h3,{id:"status-filter",children:"Status Filter"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-dart",children:"SelectorListAppi(\n selected: _selectedStatus,\n dat: ['Pending', 'In Progress', 'Completed', 'Cancelled'],\n icons: [\n Icons.schedule,\n Icons.play_arrow,\n Icons.check_circle,\n Icons.cancel,\n ],\n heading: 'Filter by Status',\n chipHeight: 45,\n spacing: 12,\n iconHeight: 20,\n iconWidth: 20,\n crossAlignment: CrossAxisAlignment.center,\n selectedTextColor: Colors.white,\n unselectedTextColor: Colors.grey[600],\n onTap: (status) {\n setState(() => _selectedStatus = status);\n _applyStatusFilter(status);\n },\n)\n"})}),"\n",(0,s.jsx)(n.h3,{id:"time-period-selector",children:"Time Period Selector"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-dart",children:"SelectorListAppi(\n selected: _selectedPeriod,\n dat: ['Today', 'This Week', 'This Month', 'This Year'],\n heading: 'Time Period',\n minWidth: 90,\n chipHeight: 38,\n spacing: 10,\n selectedTextColor: Colors.blue[700],\n unselectedTextColor: Colors.grey[500],\n onTap: (period) {\n setState(() => _selectedPeriod = period);
1\n _loadDataForPeriod(period);\n },\n)\n"})}),"\n",(0,s.jsx)(n.h3,{id:"form-integration",children:"Form Integration"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-dart",children:"Column(\n crossAxisAlignment: CrossAxisAlignment.start,\n children: [\n SelectorListAppi(\n selected: _selectedType,\n dat: ['Income', 'Expense', 'Transfer'],\n icons: [\n Icons.arrow_downward,\n Icons.arrow_upward,\n Icons.swap_horiz,\n ],\n heading: 'Transaction Type',\n mandatory: true,\n chipHeight: 50,\n spacing: 15,\n iconHeight: 24,\n iconWidth: 24,\n selectedTextColor: Colors.white,\n unselectedTextColor: Colors.black87,\n onTap: (type) {\n setState(() => _selectedType = type);\n _updateFormFields(type);\n },\n ),\n SizedBox(height: 20),\n SelectorListAppi(\n selected: _selectedFrequency,\n dat: ['Once', 'Daily', 'Weekly', 'Monthly'],\n heading: 'Frequency',\n minWidth: 80,\n chipHeight: 40,\n spacing: 10,\n selectedTextColor: Colors.green[700],\n unselectedTextColor: Colors.grey[600],\n onTap: (frequency) {\n setState(() => _selectedFrequency = frequency);\n },\n ),\n ],\n)\n"})}),"\n",(0,s.jsx)(n.h3,{id:"scrollable-long-list",children:"Scrollable Long List"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-dart",children:"SelectorListAppi(\n selected: _selectedCountry,\n dat: [\n 'USA', 'Canada', 'UK', 'Germany', 'France', \n 'Italy', 'Spain', 'Australia', 'Japan', 'India'\n ],\n heading: 'Select Country',\n scrollable: true,\n minWidth: 80,\n chipHeight: 42,\n spacing: 8,\n selectedTextColor: Colors.white,\n unselectedTextColor: Colors.black54,\n onTap: (country) {\n setState(() => _selectedCountry = country);\n _loadCountryData(country);\n },\n)\n"})}),"\n",(0,s.jsx)(n.h3,{id:"custom-styled-selector",children:"Custom Styled Selector"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-dart",children:"SelectorListAppi(\n selected: _selectedTheme,\n dat: ['Light', 'Dark', 'Auto'],\n icons: [\n Icons.light_mode,\n Icons.dark_mode,\n Icons.auto_mode,\n ],\n heading: 'Theme Preference',\n chipHeight: 55,\n spacing: 15,\n iconHeight: 28,\n iconWidth: 28,\n iconPadding: EdgeInsets.only(bottom: 4),\n crossAlignment: CrossAxisAlignment.center,\n selectedTextColor: Colors.white,\n unselectedTextColor: Colors.grey[700],\n onTap: (theme) {\n setState(() => _selectedTheme = theme);\n _applyTheme(theme);\n },\n)\n"})}),"\n",(0,s.jsx)(n.h2,{id:"see-also",children:"See Also"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.a,{href:"./search_chip_appi",children:"SearchChipAppi"})," - For searchable chip selection"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.a,{href:"./drop_down_field_appi",children:"DropDownFieldAppi"})," - For dropdown-style selection"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.a,{href:"./button_appi",children:"ButtonAppi"})," - For button-style interactions"]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},8453:(e,n,i)=>{i.d(n,{R:()=>o,x:()=>r});var t=i(6540);const s={},l=t.createContext(s);function o(e){const n=t.useContext(l);return t.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(s):e.components||s:o(e.components),t.createElement(l.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.