custom_flutter_packages

Description:

custom flutter packages

custom_flutter_packages #
custom_flutter_packages is a versatile Flutter package providing a collection of highly customizable widgets designed to enhance your Flutter applications. This package includes multiple user interface components such as circular progress indicators and dropdown menus, offering extensive customization options to seamlessly integrate with any app design
Features of CustomMultiValuedDropDown #
-CustomCircularProgressIndicator: A widget that displays multiple concentric circular progress indicators with customizable radii, colors, and spacing between rings.
-CustomMultiValuedDropDown: A dropdown menu widget allowing multi-selection with customizable appearance and behavior.
Example Usage #
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,
),
),
),
);
}
}
copied to clipboard
Here is an example of how to use the CustomCircularProgressIndicator widget in a Flutter application:

import 'package:flutter/material.dart';
import 'package:custom_flutter_packages/custom_circular_progress_indicator.dart';

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

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

class MyHomePage extends StatelessWidget {
final List<double> percentList = [0.7, 0.5, 0.3];
final List<Color> progressColors = [Colors.blue, Colors.green, Colors.red];

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Custom Circular Progress Indicator Example"),
),
body: Center(
child: CustomCircularProgressIndicator(
radius: 100.0,
percentList: percentList,
progressColor: progressColors,
radiusMinusPercentage: 15.0,
),
),
);
}
}


copied to clipboard
Properties #
CustomCircularProgressIndicator
radius: The outer radius of the largest circular indicator.
percentList: A list of progress percentages for each ring.
progressColor: A list of colors for each ring.
radiusMinusPercentage: The amount by which each subsequent ring's radius is reduced.
CustomMultiValuedDropDown
selectedList: A list of selected items.
dropDownList: A list of items to be displayed in the dropdown.
hintText: A hint text to be displayed when no items are selected.
onTap: A callback function triggered when the dropdown is tapped.
onChanged: A callback function triggered when an item is selected or deselected.
dropDownBoxDecoration: Decoration for the dropdown container.
textStyle: Text style for the dropdown items.