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,
),