0 purchases
draggable items package
Draggable Items Package #
draggable_items_package is a Flutter package that provides a collection of draggable form elements with labels and images, which can be used in building custom form builders, UI editors, or drag-and-drop interfaces. #
Features #
Predefined Draggable Items: A list of common UI elements like Text Fields, Checkboxes, Radio Buttons, and more. #
Easily Extendable: Allows developers to add new draggable items or modify existing ones. #
Supports Images: Each draggable item includes an associated image for easy visualization. #
Installation #
To use this package, add the following to your pubspec.yaml file: #
dependencies:
draggable_items_package:
git:
url: https://github.com/yourusername/draggable_items_package.git
ref: main
Then, run flutter pub get to install the package.
Import the Package
Import the package in your Dart file:
copied to clipboard
import 'package:draggable_items_package/draggable_items_package.dart';
Usage
Access Draggable Items
The package provides a list of draggable items (draggableItems) that can be easily accessed and used:
copied to clipboard
import 'package:draggable_items_package/draggable_items_package.dart';
void main() {
for (var item in draggableItems) {
print('Label: ${item.label}, Image: ${item.image}');
}
}
Create Custom Form Elements
You can create custom form elements using the FormElement class:
copied to clipboard
FormElement customElement = FormElement(
type: FormElementType.textField,
label: 'Custom Text Field',
value: 'Initial Value',
);
Display Draggable Items in a ListView
copied to clipboard
To display the draggable items in a ListView or any other widget, you can use standard Flutter widgets: #
import 'package:flutter/material.dart';
import 'package:draggable_items_package/draggable_items_package.dart';
class DraggableItemsList extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: draggableItems.length,
itemBuilder: (context, index) {
final item = draggableItems[index];
return ListTile(
leading: Image.asset(item.image),
title: Text(item.label),
);
},
);
}
}
copied to clipboard
Assets Configuration #
Ensure that you have added the necessary assets to your pubspec. #
flutter:
assets:
- assets/images/textinput.png
- assets/images/textfield.png
- assets/images/dropdown.png
- assets/images/listview.png
- assets/images/grid.png
- assets/images/checkbox.png
- assets/images/row.png
- assets/images/column.png
- assets/images/calender.png
copied to clipboard
Testing #
To run the tests, navigate to the package root directory and run: #
flutter test
copied to clipboard
Contributing #
Contributions are welcome! Feel free to open issues or submit pull ### requests to help improve this package. #
Fork the repository. #
Create a new branch (git checkout -b feature/your-feature). #
Make your changes. #
Commit your changes (git commit -m 'Add your feature'). #
Push to the branch (git push origin feature/your-feature). #
Open a Pull Request. #
License #
This package is distributed under the MIT License. See LICENSE for more information. #
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
There are no reviews.