https://appikorn-widgets.web.app/assets/js/55e2516a.b6754b02.js

1"use strict";(self.webpackChunkdocumentation=self.webpackChunkdocumentation||[]).push([[1065],{8453:(e,i,s)=>{s.d(i,{R:()=>r,x:()=>c});var t=s(6540);const a={},n=t.createContext(a);function r(e){const i=t.useContext(n);return t.useMemo((function(){return"function"==typeof e?e(i):{...i,...e}}),[i,e])}function c(e){let i;return i=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:r(e.components),t.createElement(n.Provider,{value:i},e.children)}},9888:(e,i,s)=>{s.r(i),s.d(i,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>r,metadata:()=>t,toc:()=>l});const t=JSON.parse('{"id":"widgets/README","title":"Flutter Custom Widgets Documentation","description":"Comprehensive documentation for all custom widgets in the appikorn_madix_widgets library","source":"@site/docs/widgets/README.md","sourceDirName":"widgets","slug":"/widgets/","permalink":"/docs/widgets/","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"title":"Flutter Custom Widgets Documentation","description":"Comprehensive documentation for all custom widgets in the appikorn_madix_widgets library"}}');var a=s(4848),n=s(8453);const r={title:"Flutter Custom Widgets Documentation",description:"Comprehensive documentation for all custom widgets in the appikorn_madix_widgets library"},c="Flutter Custom Widgets Documentation",d={},l=[{value:"\ud83c\udfa8 Widget Categories",id:"-widget-categories",level:2},{value:"\ud83d\ude80 Quick Start",id:"-quick-start",level:2},{value:"\ud83d\udcda Documentation Features",id:"-documentation-features",level:2},{value:"\ud83c\udfaf Getting Help",id:"-getting-help",level:2}];function o(e){const i={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,n.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(i.header,{children:(0,a.jsx)(i.h1,{id:"flutter-custom-widgets-documentation",children:"Flutter Custom Widgets Documentation"})}),"\n",(0,a.jsxs)(i.p,{children:["This section provides comprehensive documentation for all custom widgets in the ",(0,a.jsx)(i.code,{children:"appikorn_madx_widgets"})," library. Each widget includes detailed usage examples, parameter references, and best practices to help you build beautiful Flutter applications faster."]}),"\n",(0,a.jsx)(i.h2,{id:"-widget-categories",children:"\ud83c\udfa8 Widget Categories"}),"\n",(0,a.jsxs)("div",{className:"category-section",children:[(0,a.jsx)("div",{className:"category-title",children:"\ud83e\uddf1 Core UI Components"}),(0,a.jsx)("div",{className:"category-description",children:"Essential building blocks for your Flutter applications"}),(0,a.jsxs)("div",{className:"widget-cards",children:[(0,a.jsxs)("a",{href:"/docs/widgets/core-ui/text-appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"TextAppi"}),(0,a.jsx)("p",{children:"Advanced text display with rich formatting options and customizable styling"})]}),(0,a.jsxs)("a",{href:"/docs/widgets/box_appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"BoxAppi"}),(0,a.jsx)("p",{children:"Flexible container with comprehensive styling options and layout controls"})]}),(0,a.jsxs)("a",{href:"/docs/widgets/animated_box_appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"AnimatedBoxAppi"}),(0,a.jsx)("p",{children:"Animated container with smooth transitions and motion effects"})]}),(0,a.jsxs)("a",{href:"/docs/widgets/svg_appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"SvgAppi"}),(0,a.jsx)("p",{children:"SVG image display component with scaling and color customization"})]}),(0,a.jsxs)("a",{href:"/docs/widgets/circle_web_image_appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"CircleWebImageAppi"}),(0,a.jsx)("p",{children:"Circular web image loader with caching and placeholder support"})]})]})]}),"\n",(0,a.jsxs)("div",{className:"category-section",children:[(0,a.jsx)("div",{className:"category-title",children:"\ud83d\udcdd Form & Input Components"}),(0,a.jsx)("div",{className:"category-description",children:"Powerful form controls for data collection and user input"}),(0,a.jsxs)("div",{className:"widget-cards",children:[(0,a.jsxs)("a",{href:"/docs/widgets/form-input/text-field-appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"TextFieldAppi"}),(0,a.jsx)("p",{children:"Advanced text input with validation, formatting, and extensive customization"})]}),(0,a.jsxs)("a",{href:"/docs/widgets/searchable_text_field_appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"SearchableTextFieldAppi"}),(0,a.jsx)("p",{children:"Text field with built-in search functionality and filtering capabilities"})]}

1),(0,a.jsxs)("a",{href:"/docs/widgets/json_input_field_appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"JsonInputFieldAppi"}),(0,a.jsx)("p",{children:"Specialized input field for JSON data with syntax highlighting"})]}),(0,a.jsxs)("a",{href:"/docs/widgets/drop_down_field_appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"DropDownFieldAppi"}),(0,a.jsx)("p",{children:"Dropdown selection field with search and multi-select options"})]}),(0,a.jsxs)("a",{href:"/docs/widgets/drop_down_menu_appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"DropDownMenuAppi"}),(0,a.jsx)("p",{children:"Advanced dropdown menu with custom styling and animations"})]}),(0,a.jsxs)("a",{href:"/docs/widgets/date_picker_appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"DatePickerAppi"}),(0,a.jsx)("p",{children:"Date selection component with calendar view and range selection"})]}),(0,a.jsxs)("a",{href:"/docs/widgets/number_keypad_appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"NumberKeypadAppi"}),(0,a.jsx)("p",{children:"Custom number input keypad for numeric data entry"})]}),(0,a.jsxs)("a",{href:"/docs/widgets/number_stepper_appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"NumberStepperAppi"}),(0,a.jsx)("p",{children:"Number increment/decrement control with customizable steps"})]}),(0,a.jsxs)("a",{href:"/docs/widgets/quill_editor_appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"QuillEditorAppi"}),(0,a.jsx)("p",{children:"Rich text editor with formatting tools and content management"})]}),(0,a.jsxs)("a",{href:"/docs/widgets/quill_input_pop_appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"QuillInputPopAppi"}),(0,a.jsx)("p",{children:"Popup rich text input with inline editing capabilities"})]})]})]}),"\n",(0,a.jsxs)("div",{className:"category-section",children:[(0,a.jsx)("div",{className:"category-title",children:"\u2705 Selection Components"}),(0,a.jsx)("div",{className:"category-description",children:"Interactive selection controls for user choices"}),(0,a.jsxs)("div",{className:"widget-cards",children:[(0,a.jsxs)("a",{href:"/docs/widgets/checkbox_appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"CheckboxAppi"}),(0,a.jsx)("p",{children:"Custom checkbox component with styling and state management"})]}),(0,a.jsxs)("a",{href:"/docs/widgets/radio_button_appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"RadioButtonAppi"}),(0,a.jsx)("p",{children:"Radio button selection with group management and custom styling"})]}),(0,a.jsxs)("a",{href:"/docs/widgets/toggle_switch_appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"ToggleSwitchAppi"}),(0,a.jsx)("p",{children:"Toggle switch control with smooth animations and custom themes"})]}),(0,a.jsxs)("a",{href:"/docs/widgets/selector_grid_appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"SelectorGridAppi"}),(0,a.jsx)("p",{children:"Grid-based selection interface for multiple choice scenarios"})]}),(0,a.jsxs)("a",{href:"/docs/widgets/selector_list_appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"SelectorListAppi"}),(0,a.jsx)("p",{children:"List-based selection component with search and filtering"})]}),(0,a.jsxs)("a",{href:"/docs/widgets/input_chip_appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"InputChipAppi"}),(0,a.jsx)("p",{children:"Input chip component for tag-like selections and data entry"})]}),(0,a.jsxs)("a",{href:"/docs/widgets/search_chip_appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"SearchChipAppi"}),(0,a.jsx)("p",{children:"Searchable chip selection with dynamic filtering capabilities"})]})]})]}),"\n",(0,a.jsxs)("div",{className:"category-section",children:[(0,a.jsx)("div",{className:"category-title",children:"\ud83d\udd18 Button Components"}),(0,a.jsx)("div",{className:"category-description",children:"Action triggers and navigation elements"}),(0,a.jsx)("div",{className:"widget-cards",children:(0,a.jsxs)("a",{href:"/docs/widgets/button_appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"ButtonAppi"}),(0,a.jsx)("p",{children:"Customizable button component with multiple styles and states"})]})})]}),"\n",(0,a.jsxs)("div",{className:"category-section",children:[(0,a.jsx)("div",{className:"category-title",children:"\ud83d\udcca Chart Components"}),(0,a.jsx)("div",{className:"category-description",children:"Data visualization widgets for analytics and reporting"}),(0,a.jsxs)("div",{className:"widget-cards",children:[(0,a.jsxs)("a",{href:"/docs/widgets/charts/pie-chart-appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"PieChartAppi"}),(0,a.jsx)("p",{children:"Interactive pie charts with legends, animations, and data tooltips"})]}),(0,a.jsxs)("a",{href:"/docs/widgets/line_chart_appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"LineChartAppi"}),(0,a.jsx)("p",{children:"Line chart visualization with multiple data series and zoom controls"})]}),(0,a.jsxs)("a",{href:"/docs/widgets/multi_line_chart_appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"MultiLineChartAppi"}),(0,a.jsx)("p",{children:"Multiple line charts with comparative data visualization"})]}),(0,a.jsxs)("a",{href:"/docs/widgets/horizondal_bar_chart_appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"HorizontalBarChartAppi"}),(0,a.jsx)("p",{children:"Horizontal bar charts for categorical data comparison"})]})]})]}),"\n",(0,a.jsxs)("div",{className:"category-section",children:[(0,a.jsx)("div",{className:"category-title",children:"\ud83d\udccb Data Dis

1play Components"}),(0,a.jsx)("div",{className:"category-description",children:"Components for presenting structured data and information"}),(0,a.jsxs)("div",{className:"widget-cards",children:[(0,a.jsxs)("a",{href:"/docs/widgets/table_appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"TableAppi"}),(0,a.jsx)("p",{children:"Advanced data table with sorting, filtering, and pagination"})]}),(0,a.jsxs)("a",{href:"/docs/widgets/list_appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"ListAppi"}),(0,a.jsx)("p",{children:"Enhanced list component with custom item rendering and interactions"})]})]})]}),"\n",(0,a.jsxs)("div",{className:"category-section",children:[(0,a.jsx)("div",{className:"category-title",children:"\u23f3 Progress & Loading Components"}),(0,a.jsx)("div",{className:"category-description",children:"Visual feedback for ongoing operations and loading states"}),(0,a.jsxs)("div",{className:"widget-cards",children:[(0,a.jsxs)("a",{href:"/docs/widgets/circle_loader_appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"CircleLoaderAppi"}),(0,a.jsx)("p",{children:"Circular loading indicator with customizable animations and colors"})]}),(0,a.jsxs)("a",{href:"/docs/widgets/linear_progress_indicator_appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"LinearProgressIndicatorAppi"}),(0,a.jsx)("p",{children:"Linear progress bar with determinate and indeterminate modes"})]})]})]}),"\n",(0,a.jsxs)("div",{className:"category-section",children:[(0,a.jsx)("div",{className:"category-title",children:"\ud83c\udfd7\ufe0f Layout Components"}),(0,a.jsx)("div",{className:"category-description",children:"Structural components for app organization and state management"}),(0,a.jsxs)("div",{className:"widget-cards",children:[(0,a.jsxs)("a",{href:"/docs/widgets/bottom_sheet_appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"BottomSheetAppi"}),(0,a.jsx)("p",{children:"Custom bottom sheet with drag gestures and content management"})]}),(0,a.jsxs)("a",{href:"/docs/widgets/statefull_wrapper_appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"StatefulWrapperAppi"}),(0,a.jsx)("p",{children:"Stateful widget wrapper for enhanced state management capabilities"})]}),(0,a.jsxs)("a",{href:"/docs/widgets/hydrated_appi",className:"widget-card",children:[(0,a.jsx)("h3",{children:"HydratedAppi"}),(0,a.jsx)("p",{children:"State persistence wrapper with automatic data hydration"})]})]})]}),"\n",(0,a.jsx)(i.h2,{id:"-quick-start",children:"\ud83d\ude80 Quick Start"}),"\n",(0,a.jsx)(i.p,{children:"To get started with any widget, simply import the library and use the component:"}),"\n",(0,a.jsx)(i.pre,{children:(0,a.jsx)(i.code,{className:"language-dart",children:"import 'package:appikorn_madix_widgets/appikorn_madix_widgets.dart';\n\n// Example usage\nTextFieldAppi(\n  label: 'Email',\n  keyboardType: TextInputType.emailAddress,\n  hint: 'Enter your email',\n)\n"})}),"\n",(0,a.jsx)(i.h2,{id:"-documentation-features",children:"\ud83d\udcda Documentation Features"}),"\n",(0,a.jsx)(i.p,{children:"Each widget documentation includes:"}),"\n",(0,a.jsxs)(i.ul,{children:["\n",(0,a.jsxs)(i.li,{children:[(0,a.jsx)(i.strong,{children:"Overview"})," - What the widget does and when to use it"]}),"\n",(0,a.jsxs)(i.li,{children:[(0,a.jsx)(i.strong,{children:"Usage Examples"})," - Code samples for common use cases"]}),"\n",(0,a.jsxs)(i.li,{children:[(0,a.jsx)(i.strong,{children:"Parameter Reference"})," - Complete list of all available parameters"]}),"\n",(0,a.jsxs)(i.li,{children:[(0,a.jsx)(i.strong,{children:"Best Practices"})," - Tips for optimal usage"]}),"\n",(0,a.jsxs)(i.li,{children:[(0,a.jsx)(i.strong,{children:"Related Components"})," - Links to similar or complementary widgets"]}),"\n"]}),"\n",(0,a.jsx)(i.h2,{id:"-getting-help",children:"\ud83c\udfaf Getting Help"}),"\n",(0,a.jsxs)(i.ul,{children:["\n",(0,a.jsx)(i.li,{children:"Browse the sidebar to find specific widgets"}),"\n",(0,a.jsx)(i.li,{children:"Use the search functionality to quickly locate components"}),"\n",(0,a.jsxs)(i.li,{children:["Check the ",(0,a.jsx)(i.a,{href:"../examples/complete-examples",children:"Complete Examples"})," for real-world implementations"]}),"\n",(0,a.jsxs)(i.li,{children:["Refer to the ",(0,a.jsx)(i.a,{href:"../api/api-reference",children:"API Reference"})," for technical details"]}

1),"\n"]})]})}function h(e={}){const{wrapper:i}={...(0,n.R)(),...e.components};return i?(0,a.jsx)(i,{...e,children:(0,a.jsx)(o,{...e})}):o(e)}}}]);