uk_custom_widget 1.0.4

A new Flutter Custom packages project.

My Custom Widget

A Flutter package that provides some customizable widgets.

Widgets

• CustomCheckbox
• CustomRadioButton
• CustomAccordion
• CustomRatingBar
• CustomSwitch
• CustomDropdown

Custom Checkbox

Importing the CustomCheckbox widget:

import 'package:uk_custom_widget/uk_custom_checkbox.dart';

Use the CustomCheckbox widget in your app:

CustomCheckbox(
  value: isChecked,
  onChanged: (val) {
    setState(() {
      isChecked = val;
    });
  },
)

Properties

Property Name	Description	Default	Type
value	This is used for give the radio button a value	Required	Boolean
activeColor	This is the selected checkbox color	Blue	Colors
size	This is the checkbox size	24.0	Double
borderRadius	This is the border radius for checkbox	4	BorderRadius

Method

Function Name	Description
onChanged	This callback function is used when you click on Checkbox. It returns boolean value

Custom RadioButton

Importing the CustomRadioButton widget:

import 'package:uk_custom_widget/uk_custom_radio_button.dart';

Use the CustomRadioButton widget in your app:

    String selectedValue = 'option1';

    CustomRadioButton<String>(
      value: 'option1',
      groupValue: selectedValue,
      activeColor: Colors.red,
      onChanged: (val) {
        setState(() {
          selectedValue = val;
        });
      },
      label: 'Option 1',
      labelStyle: const TextStyle(
        color: Color.fromARGB(255, 26, 25, 25),
        fontSize: 20,
      ),
    ),

Properties

Property Name	Description	Default	Type
value	This is used for give the radio button a value	Required	Generic
groupValue	This is the selected value of the radio button.	Required	Generic
activeColor	This is the selected radio button color	Blue	Colors
label	This is the label for the radio button	Required	string
labelStyle	This is the label style for the radio button	Optional	TextStyle

Method

Function Name	Description
onChanged	This callback function is used when you click on RadioButton. It returns selected value

Custom Accordion

Importing the CustomAccordion widget:

import 'package:uk_custom_widget/uk_custom_accordion.dart';

Use the CustomAccordion widget in your app:

    CustomAccordion(
      title: Text(
        "Tap to Expand",
        style: TextStyle(fontSize: 18),
      ),
      content: Text(
        "This is the hidden content that becomes visible when expanded. You can place any widget here.",
      ),
      backgroundColor: Colors.grey[200],
    ),

Properties

Property Name	Description	Required	Type
title	The visible header of the accordion. Typically a Text, but can be any widget.	Yes	Widget
content	The collapsible/expandable content shown when accordion is open.	Yes	Widget
initiallyExpanded	Whether the accordion starts expanded. Default: false.	No	bool
animationDuration	Controls the duration of expand/collapse animation. Default: 300ms.	No	Duration
backgroundColor	Optional background color of the accordion container.	No	Color
padding	Padding around the title area. Default: EdgeInsets.all(16.0).	No	EdgeInsetsGeometry

Custom RatingBar

Importing the CustomRatingBar widget:

import 'package:uk_custom_widget/uk_custom_rating_bar.dart';

Use the CustomRatingBar widget in your app:

    CustomRatingBar(
      initialRating: 3,
      starCount: 5,
      size: 30,
      allowHalfRating: true,
      filledColor: Colors.orange,
      onRatingChanged: (rating) {
        print('Selected Rating: $rating');
      },
    ),

Properties

Property Name	Description	Required	Default	Type
starCount	Number of stars to show.	No	5	Widget
initialRating	The initial selected rating.	No	0.0	Widget
size	Size of each star icon.	No	32	bool
filledColor	Color of the filled stars.	No	Colors.amber	Duration
unfilledColor	Color of the unfilled (empty) stars.	No	Colors.grey	Color
allowHalfRating	Allows rating in halves	No	false	EdgeInsetsGeometry

Callback

Function Name	Description
onRatingChanged	Called whenever the user selects a new rating.

Custom Switch

Importing the CustomSwitch widget:

import 'package:uk_custom_widget/uk_custom_switch.dart';

Use the CustomSwitch widget in your app:

    bool isOn = false;

    CustomSwitch(
      value: isOn,
      onChanged: (newValue) {
        setState(() {
          isOn = newValue;
        });
      },
      activeColor: Colors.blue,
      inactiveColor: Colors.grey,
    ),

Properties

Property Name	Description	Required	Default	Type
value	Current state of the switch (true = ON, false = OFF).	Yes	N/A	bool
onChanged	Callback function called when the switch is toggled.	Yes	N/A	ValueChanged
activeColor	Background color when the switch is in ON state.	No	Colors.green	Color
inactiveColor	Background color when the switch is in OFF state.	No	Colors.grey	Color
width	Total width of the switch container.	No	50.0	double
height	Total height of the switch container.	No	28.0	double
duration	Duration for animation when toggled.	No	Duration(milliseconds: 200)	Duration

Callback

Function Name	Description
onChanged	Called whenever the user press on the switch.

Custom Dropdown

Importing the CustomDropdown widget:

import 'package:uk_custom_widget/uk_custom_dropdown.dart';
import 'package:uk_custom_widget/models/custom_dropdown_item.dart';

Use the CustomDropdown widget in your app:

    final items = [
      CustomDropdownItem(label: 'Red', value: 'red'),
      CustomDropdownItem(label: 'Green', value: 'green'),
      CustomDropdownItem(label: 'Blue', value: 'blue'),
      CustomDropdownItem(label: 'Yellow', value: 'yellow'),
      CustomDropdownItem(label: 'Sky', value: 'sky'),
      CustomDropdownItem(label: 'Black', value: 'black'),
    ];

    Expanded(
      child: Padding(
        padding: const EdgeInsets.all(10.0),
        child: CustomDropdown<String>(
          items: items,
          selectedValue: 'green',
          onItemSelected: (val) {
            print('You selected: $val');
          },
        ),
      ),
    ),

Properties

Property Name	Description	Required	Default	Type
items	List of dropdown items with label & value	Yes	N/A	List<CustomDropdownItem
selectedValue	Pre-selected value	No	N/A	T?
onItemSelected	Callback when value is selected	Yes	N/A	ValueChanged
hintText	Text shown when nothing is selected	Yes	"Select an option"	String
textStyle	Optional custom text style	No	N/A	TextStyle?
decoration	Optional box style for dropdown container	No	N/A	BoxDecoration?

Callback

Function Name	Description
onItemSelected	Called whenever the user select a new item from the dropdown.