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

Property	Type	Required	Default	Description
title	String	No	"Items"	Widget header title
color	String	No	"#2196F3"	Hex color code for theme
scrollable	String	No	"no"	"yes" for scrollable content
height	String	No	"400"	Initial height in pixels
allowAdd	String	No	"false"	Enable add button
allowEdit	String	No	"true"	Enable edit/delete actions
data	List	Yes	[]	Array of checklist items

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!