1"use strict";(self.webpackChunkdocumentation=self.webpackChunkdocumentation||[]).push([[6328],{1668:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>d,default:()=>h,frontMatter:()=>l,metadata:()=>i,toc:()=>o});const i=JSON.parse('{"id":"widgets/selector_grid_appi","title":"SelectorGridAppi","description":"A customizable grid-based selector widget for displaying and selecting items in a responsive grid layout.","source":"@site/docs/widgets/selector_grid_appi.md","sourceDirName":"widgets","slug":"/widgets/selector_grid_appi","permalink":"/docs/widgets/selector_grid_appi","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":30,"frontMatter":{"id":"selector_grid_appi","slug":"/widgets/selector_grid_appi","sidebar_position":30,"title":"SelectorGridAppi"},"sidebar":"tutorialSidebar","previous":{"title":"ToggleSwitchAppi","permalink":"/docs/widgets/toggle_switch_appi"},"next":{"title":"SelectorListAppi","permalink":"/docs/widgets/selector_list_appi"}}');var s=t(4848),r=t(8453);const l={id:"selector_grid_appi",slug:"/widgets/selector_grid_appi",sidebar_position:30,title:"SelectorGridAppi"},d="SelectorGridAppi",c={},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 String Selector",id:"basic-string-selector",level:3},{value:"Single Selection Mode",id:"single-selection-mode",level:3},{value:"Custom Object Selector",id:"custom-object-selector",level:3},{value:"Responsive Grid with Custom Spacing",id:"responsive-grid-with-custom-spacing",level:3},{value:"Best Practices",id:"best-practices",level:2}];function a(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,r.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"selectorgridappi",children:"SelectorGridAppi"})}),"\n",(0,s.jsx)(n.p,{children:"A customizable grid-based selector widget for displaying and selecting items in a responsive grid layout."}),"\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:"Responsive Grid"}),": Automatically adjusts to screen size with configurable columns"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Multi-Selection"}),": Support for single or multiple item selection"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Custom Styling"}),": Configurable item appearance and selection states"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Flexible Content"}),": Support for any widget type as grid items"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Selection Callbacks"}),": Easy handling of selection changes"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"Accessibility"}),": Built-in accessibility support"]}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-dart",children:"List<String> selectedItems = [];\n\nSelectorGridAppi<String>(\n items: ['Option 1', 'Option 2', 'Option 3', 'Option 4'],\n selectedItems: selectedItems,\n onSelectionChanged: (List<String> selected) {\n setState(() {\n selectedItems = selected;\n });\n },\n itemBuilder: (context, item, isSelected) {\n return Container(\n padding: EdgeInsets.all(16),\n decoration: BoxDecoration(\n color: isSelected ? Colors.blue : Colors.grey[200],\n borderRadius: BorderRadius.circular(8),\n ),\n child: Text(item),\n );\n },\n)\n"})}),"\n",(0,s.jsx)(n.h2,{id:"parameters",children:"Parameters"}),"\n",(0,s.jsxs)(n.table,{children:[(0,s.jsx)(n.thead,{children:(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.th,{children:"Parameter"}),(0,s.jsx)(n.th,{children:"Type"}),(0,s.jsx)(n.th,{children:"Description"})]})}),(0,s.jsxs)(n.tbody,{children:[(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"items"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"List<T>"})}),(0,s.jsxs)(n.td,{children:[(0,s.jsx)(n.strong,{children:"Required."})," List of items to display in the grid"]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"selectedItems"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"List<T>"})}),(0,s.jsxs)(n.td,{children:[(0,s.jsx)(n.strong,{children:"Required."})," Currently selected items"]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"onSelectionChanged"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"ValueChanged<List<T>>"})}),(0,s.jsxs)(n.td,{children:[(0,s.jsx)(n.strong,{children:"Required."})," Callback when selection changes"]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"itemBuilder"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"Widget Function(BuildContext, T, bool)"})}),(0,s.jsxs)(n.td,{children:[(0,s.jsx)(n.strong,{children:"Required."})," Builder function for grid items"]})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"crossAxisCount"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"int?"})}),(0,s.jsx)(n.td,{children:"Number of columns in the grid (default: 2)"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"mainAxisSpacing"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"double?"})}),(0,s.jsx)(n.td,{children:"Spacing between rows (default: 8.0)"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"crossAxisSpacing"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"double?"})}),(0,s.jsx)(n.td,{children:"Spacing between columns (default: 8.0)"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"childAspectRatio"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"double?"})}),(0,s.jsx)(n.td,{children:"Aspect ratio of grid items (default: 1.0)"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"multiSelect"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"bool"})}),(0,s.jsx)(n.td,{children:"Whether multiple selection is allowed (default: true)"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"padding"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"EdgeInsets?"})}),(0,s.jsx)(n.td,{children:"Padding around the grid"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"physics"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"ScrollPhysics?"})}),(0,s.jsx)(n.td,{children:"Scroll physics for the grid"})]}),(0,s.jsxs)(n.tr,{children:[(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"shrinkWrap"})}),(0,s.jsx)(n.td,{children:(0,s.jsx)(n.code,{children:"bool"})}),(0,s.jsx)(n.td,{children:"Whether the grid should shrink wrap its content (default: false)"})]})]})]}),"\n",(0,s.jsx)(n.h2,{id:"examples",children:"Examples"}),"\n",(0,s.jsx)(n.h3,{id:"basic-string-selector",children:"Basic String Selector"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-dart",children:"List<String> selectedColors = [];\nList<String> colors = ['Red', 'Blue', 'Green', 'Yellow', 'Purple', 'Orange'];\n\nSelectorGridAppi<String>(\n items: colors,\n selectedItems: selectedColors,\n onSelectionChanged: (List<String> selected) {\n setState(() {\n selectedColors = selected;\n });\n },\n crossAxisCount: 3,\n itemBuilder: (context, color, isSelected) {\n return Container(\n decoration: BoxDecoration(\n color: isSelected ? Colors.blue[100] : Colors.grey[200],\n borderRadius: BorderRadius.circular(8),\n border: Border.all(\n color: isSelected ? Colors.blue : Colors.grey,\n width: 2,\n ),\n ),\n child: Center(\n child: Text(\n color,\n style: TextStyle(\n fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,\n ),\n ),\n ),\n );\n },\n)\n"})}),"\n",(0,s.jsx)(n.h3,{id:"single-selection-mode",children:"Single Selection Mode"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-dart",children:"List<int> selectedNumber = [];\nList<int> numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];\n\nSelectorGridAppi<int>(\n items: numbers,\n selectedItems: selectedNumber,\n multiSelect: false, // Single selection only\n onSelectionChanged: (List<int> selected) {\n setState(() {\n selectedNumber = selected;\n });\n },\n crossAxisCount: 3,\n itemBuilder: (context, number, isSelected) {\n return Container(\n decoration: BoxDecoration(\n color: isSelected ? Colors.green : Colors.white,\n borderRadius: BorderRadius.circular(12),\n boxShadow: [\n BoxShadow(\n color: Colors.grey.withOpacity(0.3),\n blurRadius: 4,\n offset: Offset(0, 2),\n ),\n ],\n ),\n child: Center(\n child: Text(\n '$number',\n style: TextStyle(\n fontSize: 24,\n fontWeight: FontWeight.bold,\n color: isSelected ? Colors.white : Colors.black,\n ),\n ),\n ),\n );\n },\n)\n"})}),"\n",(0,s.jsx)(n.h3,{id:"custom-object-selector",children:"Custom Object Selector"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-dart",children:"class Category {\n final Str
1ing id;\n final String name;\n final IconData icon;\n \n Category(this.id, this.name, this.icon);\n}\n\nList<Category> selectedCategories = [];\nList<Category> categories = [\n Category('1', 'Food', Icons.restaurant),\n Category('2', 'Travel', Icons.flight),\n Category('3', 'Shopping', Icons.shopping_bag),\n Category('4', 'Entertainment', Icons.movie),\n];\n\nSelectorGridAppi<Category>(\n items: categories,\n selectedItems: selectedCategories,\n onSelectionChanged: (List<Category> selected) {\n setState(() {\n selectedCategories = selected;\n });\n },\n crossAxisCount: 2,\n childAspectRatio: 1.2,\n itemBuilder: (context, category, isSelected) {\n return Card(\n elevation: isSelected ? 8 : 2,\n color: isSelected ? Colors.blue[50] : Colors.white,\n child: Column(\n mainAxisAlignment: MainAxisAlignment.center,\n children: [\n Icon(\n category.icon,\n size: 32,\n color: isSelected ? Colors.blue : Colors.grey[600],\n ),\n SizedBox(height: 8),\n Text(\n category.name,\n style: TextStyle(\n fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,\n color: isSelected ? Colors.blue : Colors.black,\n ),\n ),\n ],\n ),\n );\n },\n)\n"})}),"\n",(0,s.jsx)(n.h3,{id:"responsive-grid-with-custom-spacing",children:"Responsive Grid with Custom Spacing"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-dart",children:"SelectorGridAppi<String>(\n items: items,\n selectedItems: selectedItems,\n onSelectionChanged: (selected) => setState(() => selectedItems = selected),\n crossAxisCount: MediaQuery.of(context).size.width > 600 ? 4 : 2,\n mainAxisSpacing: 12,\n crossAxisSpacing: 12,\n padding: EdgeInsets.all(16),\n itemBuilder: (context, item, isSelected) {\n return AnimatedContainer(\n duration: Duration(milliseconds: 200),\n decoration: BoxDecoration(\n color: isSelected ? Colors.blue : Colors.grey[100],\n borderRadius: BorderRadius.circular(16),\n border: Border.all(\n color: isSelected ? Colors.blue : Colors.transparent,\n width: 2,\n ),\n ),\n child: Center(child: Text(item)),\n );\n },\n)\n"})}),"\n",(0,s.jsx)(n.h2,{id:"best-practices",children:"Best Practices"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:["Use appropriate ",(0,s.jsx)(n.code,{children:"crossAxisCount"})," based on screen size and content"]}),"\n",(0,s.jsx)(n.li,{children:"Provide clear visual feedback for selected vs unselected states"}),"\n",(0,s.jsxs)(n.li,{children:["Consider using ",(0,s.jsx)(n.code,{children:"AnimatedContainer"})," for smooth selection transitions"]}),"\n",(0,s.jsxs)(n.li,{children:["Set appropriate ",(0,s.jsx)(n.code,{children:"childAspectRatio"})," based on your content requirements"]}),"\n",(0,s.jsxs)(n.li,{children:["Use ",(0,s.jsx)(n.code,{children:"multiSelect: false"})," when only one selection should be allowed"]}),"\n",(0,s.jsx)(n.li,{children:"Implement proper equality comparison for custom objects"}),"\n",(0,s.jsx)(n.li,{children:"Consider accessibility by providing semantic labels and sufficient contrast"}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>l,x:()=>d});var i=t(6540);const s={},r=i.createContext(s);function l(e){const n=i.useContext(r);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),i.createElement(r.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.