CustomMultiValuedDropDown

The CustomMultiValuedDropDown is a highly customizable Flutter widget that allows users to select multiple values from a dropdown menu. This widget is designed to be flexible and user-friendly, providing various customization options to fit seamlessly into any Flutter application.

Features

  • Multi-Selection: Allows users to select multiple items from a dropdown menu.
  • Customizable Appearance: Offers customization options for decoration and text styles to match your app's design.
  • Event Callbacks: Provides on-tap and on-change callbacks for handling user interactions.
  • State Management: Maintains its state internally and updates the UI dynamically as selections change.

Example

Here's an example of how to use the CustomMultiValuedDropDown widget in a Flutter application:

import 'package:flutter/material.dart';
import 'package:your_package_name/custom_multi_valued_dropdown.dart'; // Replace with the actual package name

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> selectedItems = [];
  List<String> dropdownItems = ["Option 1", "Option 2", "Option 3", "Option 4"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Custom Multi-Valued Dropdown Example"),
      ),
      body: Center(
        child: CustomMultiValuedDropDown(
          selectedList: selectedItems,
          dropDownList: dropdownItems,
          hintText: "Choose your options",
          onChanged: (value) {
            setState(() {
              print("Changed: $value");
            });
          },
          dropDownBoxDecoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(8.0),
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.5),
                spreadRadius: 2,
                blurRadius: 5,
              ),
            ],
          ),
          textStyle: TextStyle(
            color: Colors.black,
            fontSize: 16,
          ),
        ),
      ),
    );
  }
}

Here is an example of how to use the `CustomCircularProgressIndicator` widget in a Flutter application:

```dart
                                CustomCircularProgressIndicator(
                                      radius: 50.0,
                                      percentList: [0.4, 0.6], // Adjust percentages as needed
                                      progressColor: [
                                        Color(0xff5040A3),
                                        Color(0xffFB5893),
                                      ],
                                      radiusMinusPercentage: 20,
                                    ),