uk_custom_widget 1.0.7

A new Flutter Custom packages project.

My Custom Widget

A Flutter package that provides some customizable widgets.

Widgets

• CustomCheckbox
• CustomRadioButton
• CustomAccordion
• CustomRatingBar
• CustomSwitch
• CustomDropdown
• CustomAutocomplete
• CustomAvatar
• CustomBadge
• CustomDatePicker
• CustomProgressBar
• CustomSlider
• CustomTable

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.

Custom Autocomplete

Importing the CustomAutocomplete widget:

import 'package:uk_custom_widget/uk_custom_autocomplete.dart';

Use the CustomAutocomplete widget in your app:

    final List<CustomAutocompleteItem> cityOptions = [
      CustomAutocompleteItem(label: 'New York', value: 'ny'),
      CustomAutocompleteItem(label: 'Los Angeles', value: 'la'),
      CustomAutocompleteItem(label: 'Chicago', value: 'chi'),
      CustomAutocompleteItem(label: 'Houston', value: 'hou'),
      CustomAutocompleteItem(label: 'Phoenix', value: 'phx'),
    ];

    Expanded(
      child: CustomAutocomplete(
        items: cityOptions,
        onSelected: (item) {
          print(
            'Selected => Label: ${item.label}, Value: ${item.value}',
          );
        },
      ),
    ),

Properties

Property Name	Description	Required	Default	Type
items	List of dropdown items with label & value	Yes	N/A	List
onSelected	Callback when user selects an item	Yes	N/A	Function(CustomAutocompleteItem)
hintText	Placeholder for text field	No	Type to search...	String?
textFieldDecoration	Fully custom decoration for the input field	No	N/A	InputDecoration?
dropdownDecoration	Custom styling for dropdown container	No	N/A	BoxDecoration?
itemTextStyle	Style for each dropdown item text	No	N/A	TextStyle?

Callback

Function Name	Description
onSelected	Called whenever the user select a new item from the autocomplete.

Custom Avatar

Importing the CustomAvatar widget:

import 'package:uk_custom_widget/uk_custom_avatar.dart';

Use the CustomAvatar widget in your app:

    CustomAvatar(
      imageUrl:
          'https://images.unsplash.com/photo-1633332755192-727a05c4013d?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
      radius: 40,
      borderColor: Colors.orange,
      borderWidth: 3,
    ),

Properties

Property Name	Description	Required	Default	Type
imageUrl	URL of the user's profile image. If null or empty, fallback is shown.	Yes	null	String?
placeholderAsset	Path to a local asset image shown when imageUrl is not valid.	No	null	String?
radius	Radius of the circular avatar.	No	30	double
borderColor	Color of the circular border.	No	Colors.blue	Color
borderWidth	Thickness of the avatar border.	No	2	double

Custom Badge

Importing the CustomBadge widget:

import 'package:uk_custom_widget/uk_custom_badge.dart';

Use the CustomBadge widget in your app:

    CustomBadge(
      value: '3',
      badgeColor: Colors.green,
      child: Icon(Icons.notifications, size: 30),
    ),

Properties

Property Name	Description	Required	Default	Type
child	The base widget to attach the badge to.	Yes	required	Widget
value	The text displayed inside the badge.	No	null	String?
badgeColor	Background color of the badge.	No	Colors.red	Color
textStyle	Custom style for the badge text.	No	null	TextStyle?
top	Position offset from the top of the child widget.	No	-4	double
right	Position offset from the right of the child widget.	No	-4	double
radius	Border radius of the badge.	No	10	double
showBadge	Whether to show the badge or not.	No	true	bool

Custom Datepicker

Importing the CustomDatePicker widget:

import 'package:uk_custom_widget/uk_custom_date_picker.dart';

Use the CustomDatePicker widget in your app:

    CustomDatePicker(
      initialDate: DateTime.now(),
      firstDate: DateTime(2020),
      lastDate: DateTime(2030),
      onDateChanged: (date) {
        print("Selected: $date");
      },
      leftIcon: const Icon(
        Icons.calendar_month,
        color: Colors.blue,
      ),
      rightIcon: const Icon(
        Icons.arrow_drop_down,
        color: Colors.grey,
      ),
      dateTextStyle: const TextStyle(
        color: Colors.black87,
        fontSize: 16,
      ),
      buttonStyle: OutlinedButton.styleFrom(
        padding: const EdgeInsets.symmetric(
          horizontal: 16,
          vertical: 12,
        ),
        backgroundColor: Colors.grey[100],
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12),
        ),
      ),
    ),

Properties

Property Name	Description	Required	Type
initialDate	Default selected date	No	DateTime?
firstDate	Earliest date user can pick	Yes	DateTime
lastDate	Latest date user can pick	Yes	DateTime
onDateChanged	Callback when a new date is selected	Yes	ValueChanged
dateTextStyle	Style for the date text	No	TextStyle?
buttonStyle	Button customization	No	ButtonStyle?
dateFormat	Optional formatter like yyyy-MM-dd	No	String?
leftIcon	Optional icon shown before the date text	No	Widget?
rightIcon	Optional icon shown after the date text	No	Widget?

Callback

Function Name	Description
onDateChanged	Called whenever the user select a new date from the picker.

Custom ProgressBar

Importing the CustomProgressBar widget:

import 'package:uk_custom_widget/uk_custom_progress_bar.dart';

Use the CustomProgressBar widget in your app:

    Expanded(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: CustomProgressBar(
          value: 0.2, // 65% progress
          height: 12,
          progressColor: Colors.green,
          backgroundColor: Colors.grey[300]!,
          borderRadius: BorderRadius.circular(6),
        ),
      ),
    ),

Properties

Property Name	Description	Required	Default	Type
value	Progress percentage (e.g., 0.7 = 70%)	Yes	N/A	double (0.0 to 1.0)
backgroundColor	Background of the progress bar	No	Colors.grey	Color
progressColor	Color of the progressing part	No	Colors.blue	Color
height	Height of the progress bar	No	10.0	double
borderRadius	Rounded corners	No	Radius.circular(8)	BorderRadiusGeometry
animationDuration	Duration of progress animation	No	300ms	Duration

Custom Slider

Importing the CustomSlider widget:

import 'package:uk_custom_widget/uk_custom_slider.dart';

Use the CustomSlider widget in your app:

    Expanded(
      child: Padding(
        padding: const EdgeInsets.all(0.0),
        child: CustomSlider(
          value: _sliderValue,
          min: 0,
          max: 100,
          divisions: 10,
          label: "${_sliderValue.round()}",
          onChanged: (value) {
            setState(() {
              _sliderValue = value;
            });
          },
        ),
      ),
    ),

Properties

Property Name	Description	Required	Default	Type
value	Current value of the slider	Yes	N/A	double
min	Minimum value	No	0.0	double
max	Maximum value	No	1.0	double
divisions	Number of discrete divisions	No	10.0	int?
onChanged	Callback when value changes	Yes	N/A	ValueChanged
activeColor	Color of active track	No	Colors.blue	Color
inactiveColor	Color of inactive track	No	Colors.grey	Color
label	Label shown in value indicator	No	N/A	String?
trackHeight	Height of the track	No	4.0	double
thumbRadius	Radius of the slider thumb	No	10.0	double

Callback

Function Name	Description
onChanged	Called whenever the user change the slider value.

Custom Table

Importing the CustomTable widget:

import 'package:uk_custom_widget/uk_custom_table.dart';

Use the CustomTable widget in your app:

    Expanded(
      child: CustomTable(
        headers: ['Name', 'Address', 'Phone'],
        data: [
          ['Alice',  'New York', '2555555555'],
          ['Bob',  'Los Angeles', '3000000000'],
          ['Charlie', 'Chicago', '2828282828'],
        ],
        showBorder: true,
        headerBackgroundColor: Colors.teal[100],
        rowBackgroundColor: Colors.teal[50],
      ),
    ),

Properties

Property Name	Description	Required	Default	Type
headers	List of column headers	Yes	N/A	List
data	2D list of row data	Yes	N/A	List<List
showBorder	Whether to show cell borders	No	true	bool
headerTextStyle	Style for header text	No	N/A	TextStyle?
cellTextStyle	Style for cell text	No	N/A	TextStyle?
headerBackgroundColor	Background color for header row	No	N/A	Color?
rowBackgroundColor	Background color for data rows	No	N/A	Color?
cellPadding	Padding inside each table cell	No	12.0	double?