https://appikorn-widgets.web.app/assets/js/0e384e19.661ce40c.js

1"use strict";(self.webpackChunkdocumentation=self.webpackChunkdocumentation||[]).push([[3976],{7879:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>d,contentTitle:()=>o,default:()=>p,frontMatter:()=>l,metadata:()=>s,toc:()=>a});const s=JSON.parse('{"id":"intro","title":"Welcome to Appikorn Madx Widgets","description":"Appikorn Madx Widgets is a comprehensive Flutter UI components library designed for modern applications. With over 40 professional widgets, it provides everything you need to build beautiful, responsive, and accessible Flutter apps.","source":"@site/docs/intro.md","sourceDirName":".","slug":"/intro","permalink":"/docs/intro","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","next":{"title":"Installation","permalink":"/docs/getting-started/installation"}}');var r=i(4848),t=i(8453);const l={},o="Welcome to Appikorn Madx Widgets",d={},a=[{value:"\ud83d\ude80 What Makes Appikorn Special?",id:"-what-makes-appikorn-special",level:2},{value:"\u2728 <strong>Production-Ready Components</strong>",id:"-production-ready-components",level:3},{value:"\ud83c\udfa8 <strong>Highly Customizable</strong>",id:"-highly-customizable",level:3},{value:"\ud83d\udcf1 <strong>Responsive by Design</strong>",id:"-responsive-by-design",level:3},{value:"\u267f <strong>Accessibility First</strong>",id:"-accessibility-first",level:3},{value:"\ud83d\udce6 Widget Categories",id:"-widget-categories",level:2},{value:"\ud83c\udfa8 <strong>Core UI Components</strong>",id:"-core-ui-components",level:3},{value:"\ud83d\udcdd <strong>Form &amp; Input Components</strong>",id:"-form--input-components",level:3},{value:"\ud83d\udccb <strong>Dropdown &amp; Selection</strong>",id:"-dropdown--selection",level:3},{value:"\ud83c\udff7\ufe0f <strong>Chip &amp; Tag Components</strong>",id:"\ufe0f-chip--tag-components",level:3},{value:"\ud83d\udcca <strong>Data Display</strong>",id:"-data-display",level:3},{value:"\ud83d\udcc8 <strong>Chart Components</strong>",id:"-chart-components",level:3},{value:"\u23f3 <strong>Progress &amp; Loading</strong>",id:"-progress--loading",level:3},{value:"\ud83d\uddbc\ufe0f <strong>Media &amp; Image</strong>",id:"\ufe0f-media--image",level:3},{value:"\ud83c\udf9a\ufe0f <strong>Slider &amp; Control</strong>",id:"\ufe0f-slider--control",level:3},{value:"\ud83d\udd27 <strong>Utility &amp; State Management</strong>",id:"-utility--state-management",level:3},{value:"\ud83c\udfaf Key Features",id:"-key-features",level:2},{value:"\ud83d\ude80 Quick Start",id:"-quick-start",level:2},{value:"1. Installation",id:"1-installation",level:3},{value:"2. Import",id:"2-import",level:3},{value:"3. Use",id:"3-use",level:3},{value:"\ud83d\udcda Documentation Structure",id:"-documentation-structure",level:2},{value:"\ud83e\udd1d Community &amp; Support",id:"-community--support",level:2},{value:"\ud83d\udcc4 License",id:"-license",level:2}];function c(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,t.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"welcome-to-appikorn-madx-widgets",children:"Welcome to Appikorn Madx Widgets"})}),"\n",(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.strong,{children:"Appikorn Madx Widgets"})," is a comprehensive Flutter UI components library designed for modern applications. With over ",(0,r.jsx)(n.strong,{children:"40 professional widgets"}),", it provides everything you need to build beautiful, responsive, and accessible Flutter apps."]}),"\n",(0,r.jsx)(n.h2,{id:"-what-makes-appikorn-special",children:"\ud83d\ude80 What Makes Appikorn Special?"}),"\n",(0,r.jsxs)(n.h3,{id:"-production-ready-components",children:["\u2728 ",(0,r.jsx)(n.strong,{children:"Production-Ready Components"})]}),"\n",(0,r.jsx)(n.p,{children:"Every widget in our library has been battle-tested in real-world applications. From simple text fields to complex data visualizations, each component is optimized for performance and follows Flutter best practices."}),"\n",(0,r.jsxs)(n.h3,{id:"-highly-customizable",children:["\ud83c\udfa8 ",(0,r.jsx)(n.strong,{children:"Highly Customizable"})]}),"\n",(0,r.jsx)(n.p,{children:"Build your unique design system with extensive theming support. Every component can be customized to match your brand and design requirements."}),"\n",(0,r.jsxs)(n.h3,{id:"-responsive-by-design",children:["\ud83d\udcf1 ",(0,r.jsx)(n.strong,{children:"Responsive by Design"})]}),"\n",(0,r.jsx)(n.p,{children:"All widgets automatically adapt to different screen sizes and orientations. Mobile-first approach ensures your apps look great on any device."}),"\n",(0,r.jsxs)(n.h3,{id:"-accessibility-first",children:["\u267f ",(0,r.jsx)(n.strong,{children:"Accessibility First"})]}),"\n",(0,r.jsx)(n.p,{children:"Built with accessibility in mind, including screen reader support, keyboard navigation, and semantic markup."}),"\n",(0,r.jsx)(n.h2,{id:"-widget-categories",children:"\ud83d\udce6 Widget Categories"}),"\n",(0,r.jsxs)(n.h3,{id:"-core-ui-components",children:["\ud83c\udfa8 ",(0,r.jsx)(n.strong,{children:"Core UI Components"})]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"TextAppi"})," - Enhanced text widget with advanced styling"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"BoxAppi"})," - Flexible container with built-in styling"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"AnimatedBoxAppi"})," - Smooth animations and hover effects"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"StatefulWrapperAppi"})," - Lifecycle management for widgets"]}),"\n"]}),"\n",(0,r.jsxs)(n.h3,{id:"-form--input-components",children:["\ud83d\udcdd ",(0,r.jsx)(n.strong,{children:"Form & Input Components"})]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"TextFieldAppi"})," - Advanced text input with validation"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"SearchableTextFieldAppi"})," - Real-time search functionality"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"JsonInputFieldAppi"})," - JSON editor with syntax highlighting"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"NumberKeypadAppi"})," - Custom numeric input interface"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Qu

1illEditorAppi"})," - Rich text editing capabilities"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"RadioButtonAppi"})," - Customizable radio button groups"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"ToggleSwitchAppi"})," - Modern toggle switches"]}),"\n"]}),"\n",(0,r.jsxs)(n.h3,{id:"-dropdown--selection",children:["\ud83d\udccb ",(0,r.jsx)(n.strong,{children:"Dropdown & Selection"})]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"DropDownMenuAppi"})," - Customizable dropdown menus"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"DropDownCustomMenuFieldAppi"})," - Advanced dropdown with search"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"SelectorListAppi"})," - Multi-selection list interface"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"SelectorGridAppi"})," - Grid-based selection component"]}),"\n"]}),"\n",(0,r.jsxs)(n.h3,{id:"\ufe0f-chip--tag-components",children:["\ud83c\udff7\ufe0f ",(0,r.jsx)(n.strong,{children:"Chip & Tag Components"})]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"ChipAppi"})," - Interactive chip components"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"ChipListAppi"})," - Manageable chip collections"]}),"\n"]}),"\n",(0,r.jsxs)(n.h3,{id:"-data-display",children:["\ud83d\udcca ",(0,r.jsx)(n.strong,{children:"Data Display"})]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"TableWidgetAppi"})," - Feature-rich data tables"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"TableWidgetSample"})," - Pre-configured table examples"]}),"\n"]}),"\n",(0,r.jsxs)(n.h3,{id:"-chart-components",children:["\ud83d\udcc8 ",(0,r.jsx)(n.strong,{children:"Chart Components"})]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"LineChartAppi"})," - Interactive line charts"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"LineChartAppiFlutter"})," - Native Flutter line charts"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"PieChartAppi"})," - Customizable pie charts"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"HorizontalBarChartAppi"})," - Horizontal bar visualizations"]}),"\n"]}),"\n",(0,r.jsxs)(n.h3,{id:"-progress--loading",children:["\u23f3 ",(0,r.jsx)(n.strong,{children:"Progress & Loading"})]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"LinearProgressIndicatorAppi"})," - Animated progress bars"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"NumberStepperAppi"})," - Step-by-step progress indicators"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"CircleLoaderAppi"})," - Circular loading animations"]}),"\n"]}),"\n",(0,r.jsxs)(n.h3,{id:"\ufe0f-media--image",children:["\ud83d\uddbc\ufe0f ",(0,r.jsx)(n.strong,{children:"Media & Image"})]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"CircleWebImageAppi"})," - Circular web image display"]}),"\n"]}),"\n",(0,r.jsxs)(n.h3,{id:"\ufe0f-slider--control",children:["\ud83c\udf9a\ufe0f ",(0,r.jsx)(n.strong,{children:"Slider & Control"})]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"VolumeSliderAppi"})," - Customizable slider controls"]}),"\n"]}),"\n",(0,r.jsxs)(n.h3,{id:"-utility--state-management",children:["\ud83d\udd27 ",(0,r.jsx)(n.strong,{children:"Utility & State Management"})]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"HydratedAppi"})," - Persistent state management"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"AppLocalization"})," - Internationalization support"]}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"-key-features",children:"\ud83c\udfaf Key Features"}),"\n",(0,r.jsxs)("div",{className:"features-grid",children:[(0,r.jsxs)("div",{className:"feature-card",children:[(0,r.jsx)("div",{className:"feature-icon",children:"\ud83d\ude80"}),(0,r.jsx)("h3",{children:"Performance Optimized"}),(0,r.jsx)("p",{children:"60fps animations and minimal memory footprint"})]}),(0,r.jsxs)("div",{className:"feature-card",children:[(0,r.jsx)("div",{className:"feature-icon",children:"\ud83c\udfa8"}),(0,r.jsx)("h3",{children:"Design System Ready"}),(0,r.jsx)("p",{children:"Consistent theming across all components"})]}),(0,r.jsxs)("div",{className:"feature-card",children:[(0,r.jsx)("div",{className:"feature-icon",children:"\ud83d\udcf1"}),(0,r.jsx)("h3",{children:"Mobile First"}),(0,r.jsx)("p",{children:"Responsive design for all screen sizes"})]}),(0,r.jsxs)("div",{className:"feature-card",children:[(0,r.jsx)("div",{className:"feature-icon",children:"\u267f"}),(0,r.jsx)("h3",{children:"Accessible"}),(0,r.jsx)("p",{children:"WCAG compliant with screen reader support"})]}),(0,r.jsxs)("div",{className:"feature-card",children:[(0,r.jsx)("div",{className:"feature-icon",children:"\ud83c\udf19"}),(0,r.jsx)("h3",{children:"Dark Mode"}),(0,r.jsx)("p",{children:"Seamless light and dark theme support"})]}),(0,r.jsxs)("div",{className:"feature-card",children:[(0,r.jsx)("div",{className:"feature-icon",children:"\u26a1"}),(0,r.jsx)("h3",{children:"Type Safe"}),(0,r.jsx)("p",{children:"Full Dart type safety and null safety"})]})]}),"\n",(0,r.jsx)(n.h2,{id:"-quick-start",children:"\ud83d\ude80 Quick Start"}),"\n",(0,r.jsx)(n.p,{children:"Get started with Appikorn Madx Widgets in just a few steps:"}),"\n",(0,r.jsx)(n.h3,{id:"1-installation",children:"1. Installation"}),"\n",(0,r.jsxs)(n.p,{children:["Add the package to your ",(0,r.jsx)(n.code,{children:"pubspec.yaml"}),":"]}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-yaml",children:"dependencies:\n  appikorn_madx_widgets: ^1.0.0\n"})}),"\n",(0,r.jsx)(n.h3,{id:"2-import",children:"2. Import"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-dart",children:"import 'package:appikorn_madx_widgets/appikorn_madx_widgets.dart';\n"})}),"\n",(0,r.jsx)(n.h3,{id:"3-use",children:"3. Use"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-dart",children:"class MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      home: Scaffold(\n        body: Column(\n          children: [\n            TextAppi(\n              text: 'Hello Appikorn!',\n              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),\n            ),\n            AnimatedBoxAppi(\n              width: 200,\n              height: 100,\n              color: Colors.blue,\n              borderRadius: 12,\n              onTap: () => print('Tapped!'),\n            ),\n            LinearProgressIndicatorAppi(\n              currentPosition: 0.7,\n              length: 300,\n            ),\n          ],\n        ),\n      ),\n    );\n  }\n}\n"})}),"\n",(0,r.jsx)(n.h2,{id:"-documentation-structure",children:"\ud83d\udcda Documentation Structure"}),"\n",(0,r.jsx)(n.p,{children:"Our documentation is organized into several sections:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"\ud83d\ude80 Getting Started"})," - Installation, setup, and basic usage"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"\ud83c\udfa8 Widget Gallery"})," - Complete widget reference with examples"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"\ud83d\udcd6 Guides"})," - Best practices and advanced usage patterns"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"\ud83e\udde9 Examples"})," - Real-world implementation examples"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"\ud83d\udcda API Reference"})," - Detailed API documentation"]}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"-community--support",children:"\ud83e\udd1d Community & Support"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"GitHub"}),": ",(0,r.jsx)(n.a,{href:"https://github.com/appikorn/madx-widgets",children:"appikorn/madx-widgets"})]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Issues"}),": Report bugs and request features"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Discussions"}),": Community support and questions"]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.strong,{children:"Discord"}),": Join our developer community"]}),"\n"]}),"\n",(0,r.jsx)(n.h2,{id:"-license",children:"\ud83d\udcc4 License"}),"\n",(0,r.jsx)(n.p,{children:"Appikorn Madx Widgets is released under the MIT License. Free for commercial and personal use."}),"\n",(0,r.jsx)(n.hr,{}),"\n",(0,r.jsxs)(n.p,{children:["Ready to build amazing Flutter apps? ",(0,r.jsx)(n.a,{href:"/docs/getting-started/installation",children:"Get started now"})," or ",(0,r.jsx)(n.a,{href:"/docs/widgets",children:"explore the widget gallery"})," to see what's possible!"]})]})}function p(e={}){const{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(c,{...e})}):c(e)}},8453:(e,n,i)=>{i.d(n,{R:()=>l,x:()=>o});var s=i(6540);const r={},t=s.createContext(r);function l(e){const n=s.useContext(t);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function o(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:l(e.components),s.createElement(t.Provider,{value:n},e.children)}}}]);