gnums_utility_widgets 2.0.0

A flutter pub for utility widgets

gnums utility widgets

Package for custom GN widgets for development.

---

Features

• Easy to use GN custom widgets.
• Fully Customizable.
• Focus on making code robust through all projects.

Installation

Add the following line to your pubspec.yaml file:

dependencies:
  gnums_utility_widgets: ^latest_version

Then run:

flutter pub get

Widget Demos

GNTextFormField

GNTextFormField is a customizable text field widget with options for prefix icons and more.

GNTextFormField(
  controller: controller,
  isPrefixIcon: true,
);

GNTabbar

GNTabbar is a customizable Tabbar for easy to use implementation in flutter.

GNTabbar Has three required fields: tabController, tabs, tabView.

tabController: Give TabController to Tabbar with length defined.

tab: List of TabItem Widget, TabItem contains tabTitle, isDisplayCount which when true displays the count next to title and give listItemCount count which needs to be displayed.

tabView: List of Widgets in Corresponding to tabs, no. of tabs and widgets in tabView must be same.

import 'package:flutter/material.dart';
import 'package:gnums_utility_widgets/gnums_utility_widgets.dart';

class TabbarDemo extends StatefulWidget {
  const TabbarDemo();

  @override
  State<TabbarDemo> createState() => _TabbarDemoState();
}

class _TabbarDemoState extends State<TabbarDemo> with SingleTickerProviderStateMixin {
  late TabController tabController = TabController(length: 2, vsync: this);

  @override
  Widget build(BuildContext context) {
    return GNCustomScaffold(
      appBarTitle: "Tabbar Demo",
      body: GNTabBar(
        tabController: tabController,
        tab: [
          TabItem(tabTitle: "Tab 1"),
          TabItem(
            tabTitle: "Tab 2",
            isDisplayCount: true,
            listItemCount: "20",
          ),
        ],
        tabView: [
          Center(
            child: GNMediumTextWidget(
              title: "Tab 1",
            ),
          ),

          Center(
            child: GNMediumTextWidget(
              title: "Tab 2",
            ),
          ),
        ],
      ),
    );
  }
}

GNTextWidgets

GNBoldWidget, GNSemiBoldWidget, GNMediumTextWidget, GNRegularTextWidget, GNLightTextWidget

GNBoldTextWidget(
  title: "Bold Text Widget",
),

GNSemiBoldWidget(
title: "Semi Bold Text Widget",
),

GNMediumTextWidget(
title: "Medium Text Widget",
),

GNRegularTextWidget(
title: "Regular Text Widget",
),

GNLightTextWidget(
  title: "Light Text Widget",
),

GNTextFormField(
  controller: controller,
  isPrefixIcon: true,
);

GNDownloadButton

GNDownloadButton is a simple and customizable download button.

GNDownloadButton(
  url: 'https://example.com/file.pdf',
);

GNActionIconButton

GNActionIconButton is a compact and customizable button widget with an icon and label.

GNActionIconButton(
  label: 'Edit',
  icon: Icons.edit,
  color: Colors.blue,
  onPressed: () {
    // Handle action
  },
);

GNIconButton

GNIconButton is a simple, circular icon button with customizable properties.

GNIconButton(
  icon: Icons.add,
  onPressed: () {
    // Handle button tap
  },
);

GNElevatedButton

GNElevatedButton is an elevated button with customizable properties.

GNElevatedButton(
title: "Save",
onPressed: () {},
);

GNTextButton

GNTextButton is an TextButton with customizable properties.

GNTextButton(
title: "Save",
onPressed: () {},
);

GNOutlinedButton

GNOutlinedButton is an Outlined Button with customizable properties.

GNOutlinedButton(
title: "Save",
onPressed: () {},
);

GNRadioButton

GNRadioButton is a flexible and customizable radio button widget for Flutter.

Give String title for each radio button and it must have corresponding value in value list.

import 'package:flutter/material.dart';
import 'package:gnums_utility_widgets/gnums_utility_widgets.dart';
import 'package:sizer/sizer.dart';

class RadioButtonDemo extends StatefulWidget {
  @override
  _RadioButtonDemoState createState() => _RadioButtonDemoState();
}

class _RadioButtonDemoState extends State<RadioButtonDemo> {
  String selectedValue = 'Option 1';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('GNRadioButton Demo')),
      body: Center(
        child: GNRadioButton(
          title: ['Option 1', 'Option 2', 'Option 3'],
          value: ['Option 1', 'Option 2', 'Option 3'],
          groupValue: selectedValue,
          onChange: (value) {
            setState(() {
              selectedValue = value!;
            });
          },
          radioButtonColor: Colors.blue,
        ),
      ),
    );
  }
}

GNCheckbox

GNCheckbox is a flexible and customizable check box widget for Flutter.

Give different value for each checkbox . Wrap with Obx or write setState((){}) in onChange to see UI changes.

  GNCheckbox(
    value: value,
    onChanged: (value) {
    this.value = value!;
    },
  )

GNBottomSheet

GNBottomSheet is easy to use bottom sheet.

Use showBottomSheet method to show bottomsheet.

    GNBottomSheet.showBottomSheet(
      title: "Filter", 
      content: [],
    );

GNPopupDialog

GNPopupDialog is easy to use pop up dialog. Use showPopupDialog method to show pop up dialog.

   GNPopupDialog.showPopupDialog(
      title: "PopUp Dialog", 
      content: [],
    );

GNSnackBar

GNSnackBar is easy to use customizable SnackBar. Use show method to show SnackBar.

   GNSnackBar.show(
      icon: Icons.check,
    message: "This is SnackBar"
    );

GNExpansionTile

GNExpansionTile is easy to use customizable ExpansionTile.

Give expansion widgets in expandedWidget list.

   GNExpansionTile(
      expandedWidget: [
          GNRegularTextWidget(
          title: "Subtitle",
        ),
          GNRegularTextWidget(
          title: "Subtitle",
        ),
           GNRegularTextWidget(
           title: "Subtitle",
        ),
            GNRegularTextWidget(
            title: "Subtitle",
         )
        ],
         tileTitle: GNBoldTextWidget(
            title: "Expansion Tile 1",
        ),
    )

GNFileUploadWidget

GNFileUploadWidget is a easy to use widget for file upload.

First Define Three variables :

isFileUpload : To Check if file is uploaded when clicked on save button.

isValid : To Check if selected file is valid or invalid,

file : To access file in your page.

isPhotoUpload when true it opens camera to click single photo.

isPhotoUpload when false it opens auto-capture document camera.

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:gnums_utility_widgets/buttons/gn_elevated_button.dart';
import 'package:gnums_utility_widgets/common_widgets/gn_custom_scaffold.dart';
import 'package:gnums_utility_widgets/file_upload/gn_file_upload.dart';
import 'package:sizer/sizer.dart';

class FileUploadDemo extends StatefulWidget {
  const FileUploadDemo();

  @override
  State<FileUploadDemo> createState() => _FileUploadDemoState();
}

class _FileUploadDemoState extends State<FileUploadDemo> {
  bool isFileUpload = true;
  bool isValid = true;
  File? file;
  GlobalKey<FormState> formKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return GNCustomScaffold(
      appBarTitle: "File Upload",
      body: Form(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GNFileUploadWidget(
              isFileUploaded: isFileUpload,
              maxSizeInMB: 1,
               isPhotoUpload: true,
              isRequired:true,
              onFileSelected: (File? file, bool? isValidFile) {
                this.file = file;
                isValid = isValidFile!;
              },
            ),
            SizedBox(
              height:  1.h,
            ),
            GNElevatedButton(
              title: "Save",
              onPressed: () {
                if ((file != null) && isValid) {
                  isFileUpload = true;
                } else {
                  isFileUpload = false;
                }
                setState(() {});
              },
            )
          ],
        ),
      ),
    );
  }
}

GNCustomBottomSheetDropdownAutoSearch

GNCustomBottomSheetDropdownAutoSearch is a easy to use dropdown which opens bottomsheet.

Give your list in initialList.

Write filter logic in filter , which is used in search field in bottomsheet.

Give option widgets in itemBuilder , using DropDownMenuItem highly recommended for accessing some functionality.

import 'package:flutter/material.dart';
import 'package:gnums_utility_widgets/common_widgets/gn_custom_scaffold.dart';
import 'package:gnums_utility_widgets/dropdown/custom_autoSearch_bottomSheet_dropDown.dart';

class DropdownDemo extends StatefulWidget {
  DropdownDemo();

  @override
  State<DropdownDemo> createState() => _DropdownDemoState();
}

class _DropdownDemoState extends State<DropdownDemo> {
  List<String> list = [
    'Option 1',
    'Option 2',
    'Option 3',
    'Option 4',
  ];

  String selectedName = '';

  @override
  Widget build(BuildContext context) {
    return GNCustomScaffold(
      appBarTitle: "Dropdown Demo",
      body: Column(
        children: [
          GNCustomBottomSheetDropdownAutoSearch<String>(
              initialList: list,
              filter: (query) {
                return list
                    .where(
                      (element) => element == query,
                )
                    .toList();
              },
              onItemSelected: (value) {
                selectedName = value.toString();
                setState(() {});
              },
              isRequired: true,
              label: "Options",
              itemBuilder: (String item) {
                return DropDownMenuItem(
                  value: item,
                  isSelected: item == selectedName,
                  displayName: item,
                );
              },
              hintText: "Select Option",
              displayName: selectedName,
              bottomSheetHeaderTitle: "Dropdown")
        ],
      ),
    );
  }
}

GNDateSelect

GNDateSelect is a widget for selecting single date.

    GNDateSelect(
      controller: controller,
      onDateSelected: (date) {},
    )

GNTimeSelect

GNTimeSelect is a widget for selecting single time.

    GNTimeSelect(
      controller: timeController,
      onTimeSelected: (time) {},
    )

GNDateRangeSelect

GNDateRangeSelect is a widget for selecting only date range.

Define a variable dateList to access date range in your screen.

dateList will contain startDate and endDate at index 0 and 1 respectively.

    GNDateRangeSelect(
      dateTimeRangeList: dateList,
      onDateSelected: (List<DateTime>? dateTimeList) {
          this.dateList = dateTimeList;
        },
    )

GNDateTimeRangeSelect

GNDateTimeRangeSelect is a widget for selecting date & time range.

Define two variable startDateTime, endDateTime to access DateTime range in your screen.

import 'package:flutter/material.dart';
import 'package:gnums_utility_widgets/gnums_utility_widgets.dart';
import 'package:sizer/sizer.dart';

class DateTimeDemo extends StatelessWidget {
  DateTimeDemo();
  DateTime? startDateTime;
  DateTime? endDateTime;

  @override
  Widget build(BuildContext context) {
    return GNCustomScaffold(
      appBarTitle: "Date Time Demo",
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          GNBoldTextWidget(
            title: "Select Date Time Range",
          ),
          SizedBox(height: 1.h),
          GNDateTimeRangeSelect(
            onDateSelected: (startDateTime, endDateTime) {
              this.startDateTime = startDateTime;
              this.endDateTime = endDateTime;
            },
          ),
        ],
      ),
    );
  }
}

GNNoDataFound

GNNoDataFound is a widget for displaying short messages when there is no data.

    GNNoDataFound(
    message: "No Data, Check after sometime",
)

GNStatusView

GNStatusView is a widget for displaying status like pending, approved, reject etc., color will be assigned automatically based on status.

    GNStatusView(
      title: "Completed",
    )

GNDotSeparator

GNDotSeparator is a widget for Separating two widgets using dot.

    GNDotSeparator(
      color: Colors.black38,
    )

GNCustomCard

GNCustomCard is Custom Card widget which is customizable.

It contains fields like: elevation, child, bgColor, etc.

    GNCustomCard(
      title: "This is Card",
    )

GNToolTip

GNToolTip is a Tool Tip for displaying short messages when tapped on a widget.

    GNToolTip(
      content: GNSemiBoldTextWidget(
      title: "This is tool tip...",
      fontsize: 9.sp,
     ),
      child: Icon(Icons.info),
    )

Happy coding! 🎉