uk_custom_widget 1.0.7

A new Flutter Custom packages project.

example/main.dart

import 'package:flutter/material.dart';
import 'package:uk_custom_widget/models/custom_dropdown_item.dart';
import 'package:uk_custom_widget/uk_custom_accordion.dart';
import 'package:uk_custom_widget/uk_custom_autocomplete.dart';
import 'package:uk_custom_widget/uk_custom_avatar.dart';
import 'package:uk_custom_widget/uk_custom_badge.dart';
import 'package:uk_custom_widget/uk_custom_checkbox.dart';
import 'package:uk_custom_widget/uk_custom_date_picker.dart';
import 'package:uk_custom_widget/uk_custom_dropdown.dart';
import 'package:uk_custom_widget/uk_custom_radio_button.dart';
import 'package:uk_custom_widget/uk_custom_rating_bar.dart';
import 'package:uk_custom_widget/uk_custom_slider.dart';
import 'package:uk_custom_widget/uk_custom_switch.dart';
import 'package:uk_custom_widget/uk_custom_table.dart'; // import your widget

void main() {
  runApp(const MyExampleApp());
}

class MyExampleApp extends StatefulWidget {
  const MyExampleApp({super.key});

  @override
  State<MyExampleApp> createState() => _MyExampleAppState();
}

class _MyExampleAppState extends State<MyExampleApp> {
  bool isChecked = false;
  String selectedValue = 'option1';
  bool isOn = false;

  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'),
  ];

  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'),
  ];

  double _sliderValue = 0.5;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Custom Widget Example',
      home: Scaffold(
        appBar: AppBar(title: const Text('Example Screen')),
        body: SafeArea(
          child: Container(
            child: SingleChildScrollView(
              padding: const EdgeInsets.all(10.0),
              child: Column(
                children: [
                  Row(
                    children: [
                      Text(
                        "Hi, Jared!",
                        style: TextStyle(
                          color: const Color.fromARGB(255, 26, 25, 25),
                        ),
                      ),
                      CustomCheckbox(
                        value: isChecked,
                        onChanged: (val) {
                          setState(() {
                            isChecked = val;
                          });
                        },
                      ),
                    ],
                  ),
                  SizedBox(height: 10),
                  Row(
                    children: [
                      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,
                        ),
                      ),
                      CustomRadioButton<String>(
                        value: 'option2',
                        groupValue: selectedValue,
                        activeColor: Colors.red,
                        onChanged: (val) {
                          setState(() {
                            selectedValue = val;
                          });
                        },
                        label: 'Option 2',
                        labelStyle: const TextStyle(
                          color: Color.fromARGB(255, 26, 25, 25),
                          fontSize: 20,
                        ),
                      ),
                    ],
                  ),
                  SizedBox(height: 10),
                  Row(
                    children: [
                      Expanded(
                        child: Padding(
                          padding: const EdgeInsets.all(0.0),
                          child: 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],
                          ),
                        ),
                      ),
                    ],
                  ),
                  SizedBox(height: 10),
                  Row(
                    children: [
                      CustomRatingBar(
                        initialRating: 3,
                        starCount: 5,
                        size: 30,
                        allowHalfRating: true,
                        filledColor: Colors.orange,
                        onRatingChanged: (rating) {
                          print('Selected Rating: $rating');
                        },
                      ),
                    ],
                  ),
                  SizedBox(height: 10),
                  Row(
                    children: [
                      CustomSwitch(
                        value: isOn,
                        onChanged: (newValue) {
                          setState(() {
                            isOn = newValue;
                          });
                        },
                        activeColor: Colors.blue,
                        inactiveColor: Colors.grey,
                      ),
                    ],
                  ),
                  SizedBox(height: 10),
                  Row(
                    children: [
                      Expanded(
                        child: Padding(
                          padding: const EdgeInsets.all(0.0),
                          child: CustomDropdown<String>(
                            items: items,
                            selectedValue: 'green',
                            onItemSelected: (val) {
                              print('You selected: $val');
                            },
                          ),
                        ),
                      ),
                    ],
                  ),
                  SizedBox(height: 10),
                  Row(
                    children: [
                      Expanded(
                        child: CustomAutocomplete(
                          items: cityOptions,
                          onSelected: (item) {
                            print(
                              'Selected => Label: ${item.label}, Value: ${item.value}',
                            );
                          },
                        ),
                      ),
                    ],
                  ),
                  SizedBox(height: 10),
                  Row(
                    children: [
                      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,
                      ),
                    ],
                  ),
                  SizedBox(height: 10),
                  Row(
                    children: [
                      CustomBadge(
                        value: '3',
                        badgeColor: Colors.green,
                        child: Icon(Icons.notifications, size: 30),
                      ),
                    ],
                  ),
                  SizedBox(height: 10),
                  Row(
                    children: [
                      CustomDatePicker(
                        initialDate: DateTime.now(),
                        firstDate: DateTime(2000),
                        lastDate: DateTime(2100),
                        onDateChanged: (date) {
                          debugPrint("Selected Date: $date");
                        },
                      ),
                    ],
                  ),
                  SizedBox(height: 10),
                  Row(
                    children: [
                      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;
                              });
                            },
                          ),
                        ),
                      ),
                    ],
                  ),
                  SizedBox(height: 10),
                  Row(
                    children: [
                      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],
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}