1"use strict";(self.webpackChunkdocumentation=self.webpackChunkdocumentation||[]).push([[5696],{5572:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>r,contentTitle:()=>d,default:()=>h,frontMatter:()=>s,metadata:()=>i,toc:()=>a});const i=JSON.parse('{"id":"widgets/bottom_sheet_appi","title":"BottomSheetAppi","description":"A flexible function to display customizable bottom sheets and popup dialogs in Flutter apps with blur effects and loading states.","source":"@site/docs/widgets/bottom_sheet_appi.md","sourceDirName":"widgets","slug":"/widgets/bottom_sheet_appi","permalink":"/docs/widgets/bottom_sheet_appi","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":4,"frontMatter":{"id":"bottom_sheet_appi","slug":"/widgets/bottom_sheet_appi","sidebar_position":4,"title":"BottomSheetAppi"},"sidebar":"tutorialSidebar","previous":{"title":"LinearProgressIndicatorAppi","permalink":"/docs/widgets/linear_progress_indicator_appi"},"next":{"title":"StatefullWrapperAppi","permalink":"/docs/widgets/statefull_wrapper_appi"}}');var o=t(4848),l=t(8453);const s={id:"bottom_sheet_appi",slug:"/widgets/bottom_sheet_appi",sidebar_position:4,title:"BottomSheetAppi"},d="BottomSheetAppi",r={},a=[{value:"Features",id:"features",level:2},{value:"Usage",id:"usage",level:2},{value:"Basic Bottom Sheet",id:"basic-bottom-sheet",level:3},{value:"Bottom Sheet with Title",id:"bottom-sheet-with-title",level:3},{value:"Popup Dialog Mode",id:"popup-dialog-mode",level:3},{value:"With Loading State",id:"with-loading-state",level:3},{value:"Parameters",id:"parameters",level:2},{value:"Features Explained",id:"features-explained",level:2},{value:"Modal Bottom Sheet Mode (Default)",id:"modal-bottom-sheet-mode-default",level:3},{value:"Popup Dialog Mode",id:"popup-dialog-mode-1",level:3},{value:"Loading States",id:"loading-states",level:3},{value:"Blur Background",id:"blur-background",level:3},{value:"Best Practices",id:"best-practices",level:2},{value:"Examples",id:"examples",level:2},{value:"Form Bottom Sheet",id:"form-bottom-sheet",level:3},{value:"Selection Bottom Sheet",id:"selection-bottom-sheet",level:3},{value:"Confirmation Dialog",id:"confirmation-dialog",level:3},{value:"See Also",id:"see-also",level:2}];function c(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",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,l.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"bottomsheetappi",children:"BottomSheetAppi"})}),"\n",(0,o.jsx)(n.p,{children:"A flexible function to display customizable bottom sheets and popup dialogs in Flutter apps with blur effects and loading states."}),"\n",(0,o.jsx)(n.h2,{id:"features",children:"Features"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Modal Bottom Sheet"}),": Displays content in a modal bottom sheet with rounded corners"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Popup Dialog"}),": Alternative popup mode for smaller content"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Blur Background"}),": Beautiful backdrop filter with blur effects"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Loading States"}),": Built-in loading indicator support"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Responsive"}),": Adapts to keyboard and screen size changes"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Customizable"}),": Full control over height, title, and content"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Dismissible"}),": User can dismiss by tapping outside or dragging down"]}),"\n"]}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.h3,{id:"basic-bottom-sheet",children:"Basic Bottom Sheet"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-dart",children:"bottomSheetAppi(\n context: context,\n height: 300,\n child: Column(\n children: [\n Text('Bottom Sheet Content'),\n ElevatedButton(\n onPressed: () => Navigator.pop(context),\n child: Text('Close'),\n ),\n ],\n ),\n load: ValueNotifier(false),\n);\n"})}),"\n",(0,o.jsx)(n.h3,{id:"bottom-sheet-with-title",children:"Bottom Sheet with Title"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-dart",children:"bottomSheetAppi(\n context: context,\n title: 'Select Option',\n titleColor: Colors.blue,\n height: 400,\n
1child: ListView(\n children: [\n ListTile(\n title: Text('Option 1'),\n onTap: () => _handleOption1(),\n ),\n ListTile(\n title: Text('Option 2'),\n onTap: () => _handleOption2(),\n ),\n ],\n ),\n load: ValueNotifier(false),\n);\n"})}),"\n",(0,o.jsx)(n.h3,{id:"popup-dialog-mode",children:"Popup Dialog Mode"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-dart",children:"bottomSheetAppi(\n context: context,\n popup: true,\n height: 250,\n child: Padding(\n padding: EdgeInsets.all(20),\n child: Column(\n mainAxisSize: MainAxisSize.min,\n children: [\n Icon(Icons.warning, size: 48, color: Colors.orange),\n SizedBox(height: 16),\n Text('Are you sure?'),\n SizedBox(height: 20),\n Row(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n children: [\n ElevatedButton(\n onPressed: () => Navigator.pop(context),\n child: Text('Cancel'),\n ),\n ElevatedButton(\n onPressed: () => _confirmAction(),\n child: Text('Confirm'),\n ),\n ],\n ),\n ],\n ),\n ),\n load: ValueNotifier(false),\n);\n"})}),"\n",(0,o.jsx)(n.h3,{id:"with-loading-state",children:"With Loading State"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-dart",children:"final ValueNotifier<bool> loadingNotifier = ValueNotifier(false);\n\nbottomSheetAppi(\n context: context,\n height: 300,\n child: Column(\n children: [\n Text('Processing...'),\n ElevatedButton(\n onPressed: () async {\n loadingNotifier.value = true;\n await _performAsyncOperation();\n loadingNotifier.value = false;\n Navigator.pop(context);\n },\n child: Text('Submit'),\n ),\n ],\n ),\n load: loadingNotifier,\n);\n"})}),"\n",(0,o.jsx)(n.h2,{id:"parameters",children:"Parameters"}),"\n",(0,o.jsxs)(n.table,{children:[(0,o.jsx)(n.thead,{children:(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.th,{children:"Name"}),(0,o.jsx)(n.th,{children:"Type"}),(0,o.jsx)(n.th,{children:"Description"}),(0,o.jsx)(n.th,{children:"Default"})]})}),(0,o.jsxs)(n.tbody,{children:[(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"context"})}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"BuildContext"})}),(0,o.jsxs)(n.td,{children:[(0,o.jsx)(n.strong,{children:"Required."})," The build context"]}),(0,o.jsx)(n.td,{children:"-"})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"height"})}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"double"})}),(0,o.jsxs)(n.td,{children:[(0,o.jsx)(n.strong,{children:"Required."})," Height of the bottom sheet/dialog"]}),(0,o.jsx)(n.td,{children:"-"})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"child"})}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"Widget"})}),(0,o.jsxs)(n.td,{children:[(0,o.jsx)(n.strong,{children:"Required."})," Content widget to display"]}),(0,o.jsx)(n.td,{children:"-"})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"load"})}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"ValueNotifier<bool>"})}),(0,o.jsxs)(n.td,{children:[(0,o.jsx)(n.strong,{children:"Required."})," Loading state notifier"]}),(0,o.jsx)(n.td,{children:"-"})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"title"})}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"String?"})}),(0,o.jsx)(n.td,{children:"Optional title for the bottom sheet"}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"null"})})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"titleColor"})}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"Color?"})}),(0,o.jsx)(n.td,{children:"Color for the title text"}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"null"})})]}),(0,o.jsxs)(n.tr,{children:[(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"popup"})}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"bool?"})}),(0,o.jsx)(n.td,{children:"Whether to show as popup dialog instead of bottom sheet"}),(0,o.jsx)(n.td,{children:(0,o.jsx)(n.code,{children:"false"})})]})]})]}),"\n",(0,o.jsx)(n.h2,{id:"features-explained",children:"Features Explained"}),"\n",(0,o.jsx)(n.h3,{id:"modal-bottom-sheet-mode-default",children:"Modal Bottom Sheet Mode (Default)"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:"Displays content from the bottom of the screen"}),"\n",(0,o.jsx)(n.li,{children:"Rounded top corners for modern appearance"}),"\n",(0,o.jsx)(n.li,{children:"Backdrop blur effect for better focus"}),"\n",(0,o.jsx)(n.li,{children:"Drag handle indicator at the top"}),"\n",(0,o.jsx)(n.li,{children:"Dismissible by tapping outside or swiping down"}),"\n",(0,o.jsx)(n.li,{children:"Adapts to keyboard appearance"}),"\n"]}),"\n",(0,o.jsx)(n.h3,{id:"popup-dialog-mode-1",children:"Popup Dialog Mode"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:"Centers content on screen"}),"\n",(0,o.jsx)(n.li,{children:"Fixed size (370x350) with rounded corners"}),"\n",(0,o.jsx)(n.li,{children:"Better for smaller content or confirmations"}),"\n",(0,o.jsx)(n.li,{children:"Modal overlay with blur background"}),"\n"]}),"\n",(0,o.jsx)(n.h3,{id:"loading-states",children:"Loading States"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["Shows circular loading indicator when ",(0,o.jsx)(n.code,{children:"load.value"})," is ",(0,o.jsx)(n.code,{children:"true"})]}),"\n",(0,o.jsx)(n.li,{children:"Prevents user interaction during loading"}),"\n",(0,o.jsx)(n.li,{children:"Automatically centers the loader"}),"\n"]}),"\n",(0,o.jsx)(n.h3,{id:"blur-background",children:"Blur Backgroun
1d"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:"Beautiful backdrop filter with sigma blur"}),"\n",(0,o.jsx)(n.li,{children:"Semi-transparent overlay"}),"\n",(0,o.jsx)(n.li,{children:"Enhances focus on the content"}),"\n"]}),"\n",(0,o.jsx)(n.h2,{id:"best-practices",children:"Best Practices"}),"\n",(0,o.jsxs)(n.ol,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Height Management"}),": Set appropriate height based on content"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Loading States"}),": Always provide loading feedback for async operations"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Dismissal"}),": Provide clear ways to close the bottom sheet"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Content Organization"}),": Use proper spacing and layout in child widget"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Accessibility"}),": Ensure content is accessible with proper semantics"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Keyboard Handling"}),": Content automatically adjusts for keyboard appearance"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Mode Selection"}),": Use popup mode for confirmations, bottom sheet for lists/forms"]}),"\n"]}),"\n",(0,o.jsx)(n.h2,{id:"examples",children:"Examples"}),"\n",(0,o.jsx)(n.h3,{id:"form-bottom-sheet",children:"Form Bottom Sheet"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-dart",children:"bottomSheetAppi(\n context: context,\n title: 'Add New Item',\n height: 500,\n child: Padding(\n padding: EdgeInsets.all(16),\n child: Form(\n child: Column(\n children: [\n TextFormField(\n decoration: InputDecoration(labelText: 'Name'),\n ),\n SizedBox(height: 16),\n TextFormField(\n decoration: InputDecoration(labelText: 'Description'),\n maxLines: 3,\n ),\n Spacer(),\n ElevatedButton(\n onPressed: _submitForm,\n child: Text('Save'),\n ),\n ],\n ),\n ),\n ),\n load: _formLoadingNotifier,\n);\n"})}),"\n",(0,o.jsx)(n.h3,{id:"selection-bottom-sheet",children:"Selection Bottom Sheet"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-dart",children:"bottomSheetAppi(\n context: context,\n title: 'Choose Category',\n height: 400,\n child: ListView.builder(\n itemCount: categories.length,\n itemBuilder: (context, index) {\n return ListTile(\n leading: Icon(categories[index].icon),\n title: Text(categories[index].name),\n onTap: () {\n _selectCategory(categories[index]);\n Navigator.pop(context);\n },\n );\n },\n ),\n load: ValueNotifier(false),\n);\n"})}),"\n",(0,o.jsx)(n.h3,{id:"confirmation-dialog",children:"Confirmation Dialog"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-dart",children:"bottomSheetAppi(\n context: context,\n popup: true,\n height: 200,\n child: Padding(\n padding: EdgeInsets.all(20),\n child: Column(\n mainAxisSize: MainAxisSize.min,\n children: [\n Text(\n 'Delete Item?',\n style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),\n ),\n SizedBox(height: 16),\n Text('This action cannot be undone.'),\n SizedBox(height: 20),\n Row(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n children: [\n TextButton(\n onPressed: () => Navigator.pop(context),\n child: Text('Cancel'),\n ),\n ElevatedButton(\n onPressed: () {\n _deleteItem();\n Navigator.pop(context);\n },\n style: ElevatedButton.styleFrom(backgroundColor: Colors.red),\n child: Text('Delete'),\n ),\n ],\n ),\n ],\n ),\n ),\n load: ValueNotifier(false),\n);\n"})}),"\n",(0,o.jsx)(n.h2,{id:"see-also",children:"See Also"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.a,{href:"./form-input/text-field-appi",children:"TextFieldAppi"})," - For form inputs in bottom sheets"]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.a,{href:"./button_appi",children:"ButtonAppi"})," - For action buttons in bottom sheets"]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>s,x:()=>d});var i=t(6540);const o={},l=i.createContext(o);function s(e){const n=i.useContext(l);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(o):e.components||o:s(e.components),i.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.