My Custom Widget

A Flutter package that provides some customizable widgets.

Widgets

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

Libraries

models/custom_dropdown_item
uk_custom_accordion
uk_custom_autocomplete
uk_custom_avatar
uk_custom_checkbox
uk_custom_dropdown
uk_custom_radio_button
uk_custom_rating_bar
uk_custom_switch