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

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

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.