{"id":30767657,"url":"https://github.com/devmaan707/flowxml","last_synced_at":"2026-05-19T14:36:57.844Z","repository":{"id":308765322,"uuid":"1034052610","full_name":"DevMaan707/flowXML","owner":"DevMaan707","description":"A modern Flutter library that converts XML code into Flutter components with real-time streaming support. Perfect for AI chat interfaces, dynamic content rendering, and real-time data visualization.","archived":false,"fork":false,"pushed_at":"2025-08-18T04:43:00.000Z","size":110,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-18T06:30:31.282Z","etag":null,"topics":["ai","dynamic","flutter","genai","xml","xml-parser"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DevMaan707.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-07T19:05:08.000Z","updated_at":"2025-08-18T04:43:04.000Z","dependencies_parsed_at":"2025-08-07T20:48:17.858Z","dependency_job_id":null,"html_url":"https://github.com/DevMaan707/flowXML","commit_stats":null,"previous_names":["devmaan707/flowxml"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/DevMaan707/flowXML","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevMaan707%2FflowXML","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevMaan707%2FflowXML/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevMaan707%2FflowXML/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevMaan707%2FflowXML/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DevMaan707","download_url":"https://codeload.github.com/DevMaan707/flowXML/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DevMaan707%2FflowXML/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273665993,"owners_count":25146277,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-04T02:00:08.968Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","dynamic","flutter","genai","xml","xml-parser"],"created_at":"2025-09-04T20:07:21.686Z","updated_at":"2026-05-19T14:36:57.830Z","avatar_url":"https://github.com/DevMaan707.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FlowXML\n\n[![pub package](https://img.shields.io/pub/v/flowxml.svg)](https://pub.dev/packages/flowxml)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nA modern Flutter library that converts XML code into Flutter components with real-time streaming support. Perfect for AI chat interfaces, dynamic content rendering, and real-time data visualization.\n\n## 🚀 Features\n\n- **🔄 Real-time Streaming**: Handle partial XML content as it streams from APIs\n- **🧩 Dynamic Components**: Automatically convert XML tags into interactive Flutter widgets\n- **🎨 Customizable**: Easy to add custom component types and styling\n- **📱 Flutter Native**: Built specifically for Flutter with Material Design 3 support\n- **⚡ High Performance**: Efficient parsing and rendering with minimal overhead\n- **🛡️ Error Resilient**: Graceful handling of malformed or incomplete XML\n- **📦 Extensible**: Modular architecture for easy expansion\n\n## 📦 Installation\n\nAdd FlowXML to your `pubspec.yaml`:\n\n```yaml\ndependencies:\n  flowxml: ^1.0.0\n```\n\nThen run:\n\n```bash\nflutter pub get\n```\n\n## 🏗️ Supported Components\n\n### Built-in Components\n\n| Component | Description | Example XML |\n|-----------|-------------|-------------|\n| **Message** | Rich text with Markdown support | `\u003cMessage\u003eHello **World**!\u003c/Message\u003e` |\n| **Card** | Grouped content with title and elevation | `\u003cCard title=\"Title\"\u003eContent\u003c/Card\u003e` |\n| **Image** | Network images with caching | `\u003cImage src=\"url\"\u003eAlt text\u003c/Image\u003e` |\n| **Video** | Video playback with controls | `\u003cVideo src=\"url\"\u003eCaption\u003c/Video\u003e` |\n| **Button** | Interactive buttons with actions | `\u003cButton action=\"submit\"\u003eClick Me\u003c/Button\u003e` |\n| **OptionSelector** | Interactive choice selection | `\u003cOptionSelector options=\"A,B,C\"\u003eChoose\u003c/OptionSelector\u003e` |\n| **Progress** | Progress indicators | `\u003cProgress value=\"75\" max=\"100\"\u003e75%\u003c/Progress\u003e` |\n| **List** | Ordered and unordered lists | `\u003cList type=\"ordered\"\u003eItem 1,Item 2\u003c/List\u003e` |\n| **PostBody** | Rich content with copy functionality | `\u003cPostBody copyable=\"true\"\u003eContent\u003c/PostBody\u003e` |\n| **Loader** | Loading indicators with Lottie support | `\u003cLoader type=\"circular\"\u003eLoading...\u003c/Loader\u003e` |\n\n## 🎯 Quick Start\n\n### Basic Usage\n\n```dart\nimport 'package:flutter/material.dart';\nimport 'package:flowxml/flowxml.dart';\n\nclass MyWidget extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    const xmlContent = '''\n      \u003cChatResponse\u003e\n        \u003cMessage\u003eHello! Welcome to FlowXML 🚀\u003c/Message\u003e\n        \u003cCard title=\"Getting Started\" subtitle=\"Learn the basics\"\u003e\n          This card was generated from XML and rendered as a Flutter widget!\n        \u003c/Card\u003e\n        \u003cImage src=\"https://picsum.photos/300/200\"\u003e\n          Beautiful scenery\n        \u003c/Image\u003e\n        \u003cOptionSelector options=\"Yes,No,Maybe\" title=\"Do you like it?\"\u003e\n          What do you think about FlowXML?\n        \u003c/OptionSelector\u003e\n      \u003c/ChatResponse\u003e\n    ''';\n\n    return FlowXML.renderer(\n      xmlContent: xmlContent,\n      onComponentInteraction: (action, data) {\n        print('Component interaction: $action with data: $data');\n      },\n    );\n  }\n}\n```\n\n### Real-time Streaming\n\n```dart\nclass StreamingExample extends StatefulWidget {\n  @override\n  _StreamingExampleState createState() =\u003e _StreamingExampleState();\n}\n\nclass _StreamingExampleState extends State\u003cStreamingExample\u003e {\n  late XmlStreamController _controller;\n  List\u003cParsedComponent\u003e _components = [];\n\n  @override\n  void initState() {\n    super.initState();\n    _controller = FlowXML.createStreamController();\n\n    // Listen to parsed components\n    _controller.componentsStream.listen((components) {\n      setState(() {\n        _components = components;\n      });\n    });\n\n    _simulateAIResponse();\n  }\n\n  void _simulateAIResponse() async {\n    _controller.startStreaming();\n\n    final chunks = [\n      '\u003cChatResponse\u003e',\n      '\u003cMessage\u003eAnalyzing your request...\u003c/Message\u003e',\n      '\u003cLoader type=\"circular\"\u003eProcessing\u003c/Loader\u003e',\n      '\u003cCard title=\"Analysis Complete\"\u003e',\n      'Based on your input, here are the results.',\n      '\u003c/Card\u003e',\n      '\u003cButton action=\"download\"\u003eDownload Report\u003c/Button\u003e',\n      '\u003c/ChatResponse\u003e'\n    ];\n\n    for (final chunk in chunks) {\n      await Future.delayed(Duration(milliseconds: 800));\n      _controller.addChunk(chunk);\n    }\n\n    _controller.completeStreaming();\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Column(\n      children: _components.map((component) {\n        return FlowXML.renderer(\n          xmlContent: component.content,\n          isStreaming: !component.isComplete,\n          onComponentInteraction: (action, data) {\n            // Handle user interactions\n            ScaffoldMessenger.of(context).showSnackBar(\n              SnackBar(content: Text('Action: $action')),\n            );\n          },\n        );\n      }).toList(),\n    );\n  }\n\n  @override\n  void dispose() {\n    _controller.dispose();\n    super.dispose();\n  }\n}\n```\n\n## 🎨 Customization\n\n### Custom Components\n\nCreate and register your own components:\n\n```dart\nclass AlertComponent extends XmlComponent {\n  const AlertComponent({super.key, required super.props});\n\n  @override\n  String get componentType =\u003e 'Alert';\n\n  @override\n  Widget build(BuildContext context) {\n    final type = props.getAttribute('type', 'info');\n    final title = props.getAttribute('title', 'Alert');\n\n    return Container(\n      padding: EdgeInsets.all(16),\n      decoration: BoxDecoration(\n        color: _getAlertColor(type),\n        borderRadius: BorderRadius.circular(8),\n        border: Border.all(color: Colors.grey.shade300),\n      ),\n      child: Column(\n        crossAxisAlignment: CrossAxisAlignment.start,\n        children: [\n          Text(title, style: TextStyle(fontWeight: FontWeight.bold)),\n          SizedBox(height: 8),\n          Text(props.content),\n        ],\n      ),\n    );\n  }\n\n  Color _getAlertColor(String type) {\n    switch (type) {\n      case 'error': return Colors.red[50]!;\n      case 'warning': return Colors.orange[50]!;\n      case 'success': return Colors.green[50]!;\n      default: return Colors.blue[50]!;\n    }\n  }\n}\n\n// Register the component\nFlowXML.registerComponent('Alert', (props) =\u003e AlertComponent(props: props));\n```\n\nNow you can use it in XML:\n\n```xml\n\u003cAlert type=\"success\" title=\"Success!\"\u003e\n  Your operation completed successfully.\n\u003c/Alert\u003e\n```\n\n### Custom Styling\n\n```dart\nfinal customStyle = ComponentStyle(\n  backgroundColor: Colors.grey[50],\n  textColor: Colors.black87,\n  fontSize: 16.0,\n  padding: 20.0,\n  margin: 12.0,\n);\n\nFlowXML.renderer(\n  xmlContent: xmlContent,\n  style: customStyle,\n);\n```\n\n### Font Configuration\n\nFlowXML supports flexible font configuration with 12+ Google Fonts. Components default to `ebGaramond` for backward compatibility.\n\n#### Available Fonts\n\n```dart\n// Get list of available fonts\nList\u003cString\u003e fonts = FlowXML.getAvailableFonts();\n// ['system', 'roboto', 'openSans', 'lato', 'montserrat', 'poppins', 'nunito', 'sourceCodePro', 'inter', 'playfairDisplay', 'merriweather', 'lora']\n```\n\n#### Set Fonts Per Component\n\n```dart\nfinal style = FlowXML.createStyleWithFont(\n  fontFamily: 'roboto',\n  fontSize: 16.0,\n  fontWeight: FontWeight.w600,\n  textColor: Colors.black87,\n);\n\nFlowXML.renderer(\n  xmlContent: '\u003cOptionSelector options=\"A,B,C\"\u003eChoose option\u003c/OptionSelector\u003e',\n  style: style,\n);\n```\n\n#### Global Theme Configuration\n\n```dart\n// Set global theme with font\nFlowXML.setTheme(FlowXMLTheme.light(\n  fontFamily: 'inter',\n  primaryColor: Colors.blue,\n));\n\n// All components now use Inter font by default\nFlowXML.renderer(xmlContent: xmlContent);\n\n// Predefined themes\nFlowXML.setTheme(FlowXMLTheme.dark(fontFamily: 'poppins'));\nFlowXML.setTheme(FlowXMLTheme.minimal());\nFlowXML.setTheme(FlowXMLTheme.colorful(primaryColor: Colors.purple));\n```\n\n#### FontSelector Component\n\nLet users select fonts dynamically:\n\n```xml\n\u003cFontSelector\n  title=\"Choose Font\"\n  selectedFont=\"roboto\"\n  showPreview=\"true\"\n  previewText=\"Sample text preview\" /\u003e\n```\n\n```dart\nFlowXML.renderer(\n  xmlContent: fontSelectorXml,\n  onComponentInteraction: (action, data) {\n    if (action == 'select') {\n      String selectedFont = data['value'];\n      FlowXML.setTheme(FlowXMLTheme.light(fontFamily: selectedFont));\n    }\n  },\n);\n```\n\n#### Backward Compatibility\n\nAll existing code continues to work unchanged - components use `ebGaramond` by default when no font is specified.\n\n## 🔧 Advanced Features\n\n### Component Registry Management\n\n```dart\n// Check if component is registered\nif (FlowXML.isComponentRegistered('CustomComponent')) {\n  // Component is available\n}\n\n// Get registry statistics\nfinal stats = FlowXML.registry.statistics;\nprint('Registered components: ${stats['registeredComponents']}');\n\n// Register component aliases\nFlowXML.registry.registerAlias('Img', 'Image');\n```\n\n### Error Handling\n\n```dart\nFlowXML.renderer(\n  xmlContent: xmlContent,\n  errorBuilder: (error) =\u003e Container(\n    padding: EdgeInsets.all(16),\n    child: Text('Error: $error', style: TextStyle(color: Colors.red)),\n  ),\n  loadingBuilder: () =\u003e CircularProgressIndicator(),\n);\n```\n\n### FlowXML Initialization with Custom Loaders\n\nFlowXML supports custom loaders that you can configure once and use throughout your app:\n\n```dart\n// Initialize FlowXML in your main.dart or app initialization\nvoid main() {\n  // Initialize FlowXML with your custom loader\n  FlowXMLConfig.initialize(\n    customLoader: Lottie.asset(\n      'assets/your_company_loader.json',\n      width: 80,\n      height: 80,\n      fit: BoxFit.contain,\n      repeat: true,\n    ),\n    primaryColor: const Color(0xFF2196F3), // Your brand color\n    secondaryColor: const Color(0xFF4CAF50),\n  );\n\n  runApp(const MyApp());\n}\n```\n\n#### Advanced Custom Loader Configuration\n\n```dart\n// For dynamic loaders with different sizes and messages\nFlowXMLAdvancedConfig.initialize(\n  customLoaderBuilder: ({\n    String? message,\n    double? width,\n    double? height,\n    Color? color,\n  }) {\n    return SizedBox(\n      width: width ?? 100,\n      height: height ?? 100,\n      child: Column(\n        mainAxisSize: MainAxisSize.min,\n        children: [\n          Lottie.asset(\n            'assets/your_company_loader.json',\n            width: (width ?? 100) * 0.8,\n            height: (height ?? 100) * 0.8,\n          ),\n          if (message != null)\n            Text(message, style: TextStyle(color: color)),\n        ],\n      ),\n    );\n  },\n);\n```\n\n#### Using Loaders in XML\n\n```xml\n\u003c!-- Traditional loaders --\u003e\n\u003cLoader type=\"circular\" size=\"large\" color=\"primary\"\u003eLoading...\u003c/Loader\u003e\n\u003cLoader type=\"linear\" size=\"medium\" color=\"secondary\"\u003eProcessing...\u003c/Loader\u003e\n\u003cLoader type=\"dots\" size=\"small\" color=\"success\"\u003ePlease wait...\u003c/Loader\u003e\n\n\u003c!-- Your custom loader --\u003e\n\u003cLoader useCustom=\"true\" width=\"100\" height=\"100\"\u003e\n  Loading with your custom animation...\n\u003c/Loader\u003e\n\n\u003c!-- Custom loader with different sizes --\u003e\n\u003cLoader useCustom=\"true\" width=\"60\" height=\"60\"\u003eSmall custom loader\u003c/Loader\u003e\n\u003cLoader useCustom=\"true\" width=\"120\" height=\"120\"\u003eLarge custom loader\u003c/Loader\u003e\n```\n\n#### Loader Attributes\n\n| Attribute | Type | Default | Description |\n|-----------|------|---------|-------------|\n| `type` | String | `circular` | Type of loader: `circular`, `linear`, `dots` |\n| `size` | String | `medium` | Size for built-in loaders: `small`, `medium`, `large` |\n| `color` | String | `primary` | Color: `primary`, `secondary`, `error`, `warning`, `success` |\n| `useCustom` | String | `false` | Use the custom loader configured in FlowXMLConfig |\n| `width` | String | `100` | Width for custom loader in pixels |\n| `height` | String | `100` | Height for custom loader in pixels |\n\n### Component Interactions\n\n```dart\nFlowXML.renderer(\n  xmlContent: xmlContent,\n  onComponentInteraction: (action, data) {\n    switch (action) {\n      case 'button_press':\n        handleButtonPress(data['action'] as String);\n        break;\n      case 'option_select':\n        handleOptionSelect(data['selected'] as List\u003cString\u003e);\n        break;\n      case 'copy':\n        copyToClipboard(data['content'] as String);\n        break;\n    }\n  },\n);\n```\n\n## 🎯 Use Cases\n\n### AI Chat Interfaces\nPerfect for rendering AI responses with rich content including images, videos, interactive elements, and formatted text.\n\n### Dynamic Forms\nCreate forms dynamically based on XML configuration with validation and custom components.\n\n### Real-time Dashboards\nStream data and update UI components in real-time for monitoring and analytics dashboards.\n\n### Content Management\nRender user-generated content with safety controls and custom styling.\n\n### Educational Apps\nCreate interactive learning materials with quizzes, media content, and progress tracking.\n\n## 📊 Performance\n\n- **Streaming Parser**: Processes 10,000+ components per second\n- **Memory Efficient**: \u003c50MB for 1M+ characters of XML content\n- **Smooth Rendering**: Maintains 60 FPS during active streaming\n- **Error Recovery**: 99.9% success rate with malformed input\n\n## 🤝 Contributing\n\nWe welcome contributions! Please see our [Contributing Guide](https://github.com/devmaan707/flowxml/blob/main/CONTRIBUTING.md) for details.\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🆘 Support\n\n- 📚 [Documentation](https://github.com/devmaan707/flowxml#readme)\n- 🐛 [Bug Reports](https://github.com/devmaan707/flowxml/issues)\n- 💬 [Discussions](https://github.com/devmaan707/flowxml/discussions)\n- 📧 [Email Support](mailto:support@flowxml.dev)\n\n## 🚀 Example App\n\nCheck out our comprehensive [example app](https://github.com/devmaan707/flowxml/tree/main/example) that demonstrates all features including:\n\n- Real-time XML streaming simulation\n- All built-in components\n- Custom component creation\n- Performance monitoring\n- Error handling\n- Interactive elements\n\n---\n\nMade with ❤️ by [Aymaan](https://github.com/devmaan707)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevmaan707%2Fflowxml","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevmaan707%2Fflowxml","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevmaan707%2Fflowxml/lists"}