https://appikorn-widgets.web.app/assets/js/cc56e429.84847af7.js

1"use strict";(self.webpackChunkdocumentation=self.webpackChunkdocumentation||[]).push([[8340],{1252:(e,n,d)=>{d.r(n),d.d(n,{assets:()=>o,contentTitle:()=>t,default:()=>h,frontMatter:()=>s,metadata:()=>i,toc:()=>c});const i=JSON.parse('{"id":"widgets/drop_down_field_appi","title":"DropDownFieldAppi","description":"A flexible dropdown widget for Flutter with search, filtering, and mobile-friendly bottom sheet support. Automatically adapts to platform - shows bottom sheet on mobile and dropdown on web.","source":"@site/docs/widgets/drop_down_field_appi.md","sourceDirName":"widgets","slug":"/widgets/drop_down_field_appi","permalink":"/docs/widgets/drop_down_field_appi","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":2,"frontMatter":{"id":"drop_down_field_appi","slug":"/widgets/drop_down_field_appi","sidebar_position":2,"title":"DropDownFieldAppi"},"sidebar":"tutorialSidebar","previous":{"title":"JsonInputFieldAppi","permalink":"/docs/widgets/json_input_field_appi"},"next":{"title":"DropDownMenuAppi","permalink":"/docs/widgets/drop_down_menu_appi"}}');var r=d(4848),l=d(8453);const s={id:"drop_down_field_appi",slug:"/widgets/drop_down_field_appi",sidebar_position:2,title:"DropDownFieldAppi"},t="DropDownFieldAppi",o={},c=[{value:"Features",id:"features",level:2},{value:"Usage",id:"usage",level:2},{value:"Parameters",id:"parameters",level:2},{value:"Usage Examples",id:"usage-examples",level:2},{value:"1. Basic Dropdown",id:"1-basic-dropdown",level:3},{value:"2. With Search",id:"2-with-search",level:3},{value:"3. Custom Item Builder",id:"3-custom-item-builder",level:3},{value:"4. With Loading State",id:"4-with-loading-state",level:3},{value:"5. With Validation",id:"5-with-validation",level:3},{value:"Best Practices",id:"best-practices",level:2},{value:"Platform Behavior",id:"platform-behavior",level:2},{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",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,l.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"dropdownfieldappi",children:"DropDownFieldAppi"})}),"\n",(0,r.jsx)(n.p,{children:"A flexible dropdown widget for Flutter with search, filtering, and mobile-friendly bottom sheet support. Automatically adapts to platform - shows bottom sheet on mobile and dropdown on web."}),"\n",(0,r.jsx)(n.h2,{id:"features",children:"Features"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Responsive Design"}),": Bottom sheet on mobile, dropdown on web"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Search & Filter"}),": Built-in search functionality"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Loading States"}),": Shows loading indicator during data fetch"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Custom Styling"}),": Customizable appearance and behavior"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Accessibility"}),": Full accessibility support"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Performance"}),": Optimized for large datasets"]}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-dart",children:"DropDownFieldAppi<String>(\n  items: ['Option 1', 'Option 2', 'Option 3'],\n  onChanged: (value) {\n    print('Selected: $value');\n  },\n  loading: false,\n  hint: 'Select an option',\n  label: 'Choose Option',\n)\n"})}),"\n",(0,r.jsx)(n.h2,{id:"parameters",children:"Parameters"}),"\n",(0,r.jsxs)(n.table,{children:[(0,r.jsx)(n.thead,{children:(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.th,{children:"Name"}),(0,r.jsx)(n.th,{children:"Type"}),(0,r.jsx)(n.th,{children:"Description"})]})}),(0,r.jsxs)(n.tbody,{children:[(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"items"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"List<T>"})}),(0,r.jsx)(n.td,{children:"The list of items to display in dropdown"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"onChanged"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"Function(T?)?"})}),(0,r.jsx)(n.td,{children:"Callback when selection changes"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"loading"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"bool?"})}),(0,r.jsx)(n.td,{children:"Shows loading indicator if true"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"hint"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"String?"})}),(0,r.jsx)(n.td,{children:"Placeholder text when no item selected"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"label"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"String?"})}),(0,r.jsx)(n.td,{children:"Label text above the dropdown"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"value"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"T?"})}),(0,r.jsx)(n.td,{children:"Currently selected value"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"enabled"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"bool?"})}),(0,r.jsx)(n.td,{children:"Whether the dropdown is enabled"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"val

1idator"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"String? Function(T?)?"})}),(0,r.jsx)(n.td,{children:"Validation function"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"decoration"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"InputDecoration?"})}),(0,r.jsx)(n.td,{children:"Custom input decoration"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"itemBuilder"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"Widget Function(T)?"})}),(0,r.jsx)(n.td,{children:"Custom item builder"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"searchable"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"bool?"})}),(0,r.jsx)(n.td,{children:"Enable search functionality"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"maxHeight"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"double?"})}),(0,r.jsx)(n.td,{children:"Maximum height of dropdown"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"dropdownColor"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"Color?"})}

1),(0,r.jsx)(n.td,{children:"Background color of dropdown"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"style"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"TextStyle?"})}),(0,r.jsx)(n.td,{children:"Text style for selected item"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"icon"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"Widget?"})}),(0,r.jsx)(n.td,{children:"Custom dropdown icon"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"iconSize"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"double?"})}),(0,r.jsx)(n.td,{children:"Size of dropdown icon"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"isExpanded"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"bool?"})}),(0,r.jsx)(n.td,{children:"Whether dropdown takes full width"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"focusNode"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"FocusNode?"})}),(0,r.jsx)(n.td,{children:"Focus node for the dropdown"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"autofocus"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"bool?"})}),(0,r.jsx)(n.td,{children:"Whether to autofocus"})]}),(0,r.jsxs)(n.tr,{children:[(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"onTap"})}),(0,r.jsx)(n.td,{children:(0,r.jsx)(n.code,{children:"VoidCallback?"})}),(0,r.jsx)(n.td,{children:"Callback when dropdown is tapped"})]})]})]}),"\n",(0,r.jsx)(n.h2,{id:"usage-examples",children:"Usage Examples"}),"\n",(0,r.jsx)(n.h3,{id:"1-basic-dropdown",children:"1. Basic Dropdown"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-dart",children:"DropDownFieldAppi<String>(\n  items: ['Apple', 'Banana', 'Orange'],\n  hint: 'Select a fruit',\n  onChanged: (value) {\n    setState(() {\n      selectedFruit = value;\n    });\n  },\n)\n"})}),"\n",(0,r.jsx)(n.h3,{id:"2-with-search",children:"2. With Search"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-dart",children:"DropDownFieldAppi<String>(\n  items: countries,\n  searchable: true,\n  hint: 'Search and select country',\n  onChanged: (value) {\n    setState(() {\n      selectedCountry = value;\n    });\n  },\n)\n"})}),"\n",(0,r.jsx)(n.h3,{id:"3-custom-item-builder",children:"3. Custom Item Builder"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-dart",children:"DropDownFieldAppi<User>(\n  items: users,\n  itemBuilder: (user) => ListTile(\n    leading: CircleAvatar(\n      backgroundImage: NetworkImage(user.avatar),\n    ),\n    title: Text(user.name),\n    subtitle: Text(user.email),\n  ),\n  onChanged: (user) {\n    setState(() {\n      selectedUser = user;\n    });\n  },\n)\n"})}),"\n",(0,r.jsx)(n.h3,{id:"4-with-loading-state",children:"4. With Loading State"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-dart",children:"DropDownFieldAppi<String>(\n  items: items,\n  loading: isLoading,\n  hint: 'Loading options...',\n  onChanged: (value) {\n    // Handle selection\n  },\n)\n"})}),"\n",(0,r.jsx)(n.h3,{id:"5-with-validation",children:"5. With Validation"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-dart",children:"DropDownFieldAppi<String>(\n  items: ['Option 1', 'Option 2', 'Option 3'],\n  validator: (value) {\n    if (value == null) {\n      return 'Please select an option';\n    }\n    return null;\n  },\n  decoration: InputDecoration(\n    border: OutlineInputBorder(),\n    labelText: 'Required Field',\n  ),\n  onChanged: (value) {\n    // Handle selection\n  },\n)\n"})}),"\n",(0,r.jsx)(n.h2,{id:"best-practices",children:"Best Practices"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["Use ",(0,r.jsx)(n.code,{children:"searchable: true"})," for lists with more than 10 items"]}),"\n",(0,r.jsx)(n.li,{children:"Implement proper loading states for async data"}),"\n",(0,r.jsx)(n.li,{children:"Provide clear hint text for better UX"}),"\n",(0,r.jsx)(n.li,{children:"Use custom item builders for complex data types"}),"\n",(0,r.jsx)(n.li,{children:"Always handle null values in onChanged callback"}),"\n",(0,r.jsx)(n.li,{children:"Consider using validation for required fields"}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"platform-behavior",children:"Platform Behavior"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Mobile"}),": Shows as bottom sheet with search"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Web/Desktop"}),": Shows as traditional dropdown"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Tablet"}),": Adapts based on screen size"]}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"see-also",children:"See Also"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"./form-input/text-field-appi",children:"TextFieldAppi"})}),"\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"./search_chip_appi",children:"SearchChipAppi"})}),"\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"./selector_list_appi",children:"SelectorListAppi"})}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(a,{...e})}):a(e)}},8453:(e,n,d)=>{d.d(n,{R:()=>s,x:()=>t});var i=d(6540);const r={},l=i.createContext(r);function s(e){const n=i.useContext(l);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function t(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:s(e.components),i.createElement(l.Provider,{value:n},e.children)}}}]);