Dynamic Multi-Check Widget #

A highly customizable Flutter widget for creating dynamic multi-select checklists with drag-to-resize, add/edit/delete capabilities, and real-time callbacks.

✨ Features #

Caption: Main widget interface

• 📝 Dynamic CRUD Operations: Add, edit, and delete checklist items on the fly
• ✅ Multi-Select Checkboxes: Track selected items with real-time callbacks
• 📏 Drag-to-Resize: Adjustable container height with visual drag handle
• 🎨 Fully Customizable: Configure colors, titles, scroll behavior, and more
• 🔄 Real-Time Callbacks: Get notified of all changes and checked items separately
• 🆔 Auto ID Management: Automatic or manual item ID assignment
• 📱 Responsive Design: Scrollable or fixed content layout options

📦 Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  dynamic_multicheckbox: ^0.0.6

Then run:

flutter pub get

🚀 Quick Start #

import 'package:flutter/material.dart';
import 'package:dynamic_multicheckbox/dynamic_multicheckbox.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final config = {
      "title": "My Checklist",
      "color": "#2196F3",
      "scrollable": "yes",
      "height": "300",
      "allowAdd": "true",
      "allowEdit": "true",
      "data": [
        {"id": 1, "key": "Task 1", "value": "Description", "checked": false},
        {"id": 2, "key": "Task 2", "value": "Description", "checked": true},
      ]
    };

    return Scaffold(
      body: DynamicMultiCheckWidget(
        config: config,
        onDataChanged: ({required allItems, required currentHeight}) {
          print('All items: $allItems');
        },
        onCheckedItemsChanged: ({required checkedItems, required currentHeight}) {
          print('Checked: $checkedItems');
        },
      ),
    );
  }
}

📖 Configuration Options #

Config Map Properties #

Data Item Structure #

{
  "id": 1,              // Optional: Auto-generated if not provided
  "key": "Item Title",  // Required: Main item text
  "value": "Details",   // Required: Subtitle/description
  "checked": false      // Required: Selection state
}

🎯 Callbacks #

onDataChanged #

Triggered on any change (check, add, edit, delete, resize)

onDataChanged: ({required allItems, required currentHeight}) {
  // allItems: Complete list of all items
  // currentHeight: Current widget height
}

onCheckedItemsChanged #

Triggered when checked items change

onCheckedItemsChanged: ({required checkedItems, required currentHeight}) {
  // checkedItems: Filtered list of only checked items
  // currentHeight: Current widget height
}

🎨 Customization Examples #

Survey Checklist #

final config = {
  "title": "Survey Items",
  "color": "#eb5234",
  "scrollable": "yes",
  "height": "350",
  "allowAdd": "true",
  "allowEdit": "true",
  "data": [
    {"key": "Clean Water", "value": "Available", "checked": true},
    {"key": "Electricity", "value": "Not Available", "checked": false},
  ]
};

Task Manager #

final config = {
  "title": "Daily Tasks",
  "color": "#4CAF50",
  "scrollable": "yes",
  "height": "400",
  "allowAdd": "true",
  "allowEdit": "true",
  "data": [
    {"key": "Morning Exercise", "value": "30 minutes", "checked": false},
    {"key": "Read Book", "value": "20 pages", "checked": false},
  ]
};

Inventory Checklist #

final config = {
  "title": "Inventory Check",
  "color": "#FF9800",
  "scrollable": "no",
  "height": "250",
  "allowAdd": "false",
  "allowEdit": "false",
  "data": [
    {"key": "Stock A", "value": "In Stock", "checked": true},
    {"key": "Stock B", "value": "Out of Stock", "checked": false},
  ]
};

🔧 Advanced Usage #

Handling Data Changes #

DynamicMultiCheckWidget(
  config: config,
  onDataChanged: ({required allItems, required currentHeight}) {
    // Save to database
    saveToDatabase(allItems);
    
    // Update UI
    setState(() {
      myItems = allItems;
    });
  },
  onCheckedItemsChanged: ({required checkedItems, required currentHeight}) {
    // Generate report from checked items
    generateReport(checkedItems);
    
    // Show notification
    showNotification('${checkedItems.length} items checked');
  },
)

🎭 Use Cases #

• ✅ Survey and questionnaire forms
• 📋 Task and todo lists
• 🛒 Shopping lists
• 📦 Inventory management
• 📝 Form builders
• 🎯 Goal tracking
• 📊 Data collection apps

🤝 Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License #

This project is licensed under the MIT License - see the LICENSE file for details.

🐛 Issues #

Found a bug? Please file an issue at GitHub Issues.

📧 Contact #

For questions or suggestions, please reach out through GitHub issues.

⭐ Support #

If you find this package useful, please give it a star on GitHub and like it on pub.flutter-io.cn!