gnums_utility_widgets 10.0.11 copy "gnums_utility_widgets: ^10.0.11" to clipboard
gnums_utility_widgets: ^10.0.11 copied to clipboard

Published 31 hours ago
[analysis issue]
→

Metadata

A flutter pub for utility widgets

More...

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),
    )

GNLinearProgressIndicator

GNLinearProgressIndicator is Used to display progress with linear progress bar.

GNLinearProgressIndicator(
  value: 80,
  minAttendancePercentage: 75,
  isAnimate: true,
),

GNBusPass

GNBusPass is Used to display bus pass, by giving certain information it will display the card.

 GNBusPass(
    imageUrl: "url",
    registrationStatusName: "Active",
    busPassNo: "001/002",
    fullName: "Mehul Bhundiya",
    registrationNo: "25020224",
    boardingPointName: "KKV chowk Rajkot",
    routeName: "Home to  University Campus",
    transportDate: "02-01-2025",
    cityName: "Mumbai",
    showDateTime: true,
    feesAmount: "25000",
    feesOutstandingAmount: "100",
    feesPaidAmount: "24000",
    isFeeDetail: true,
)

GNNotificationCard

GNNotificationCard is Used to display notifications, by giving certain information it will display the notification with link and button to download the document.

 GNNotificationCard(
    notificationType: "Admission",
    fromDate: DateTime.now().toString(),
    notificationDownloadLink: "https://www.google.com",
    notificationRedirectURL: "https://www.google.com",
    notificationMessageLong:
    "This is a very long description of this notification which is sended for testing the widget. This widget will be live on pub.dev under name gnums_utility_widgets.",
)

GNCircularCard

GNCircularCard is Used to display Circular, by giving certain information it will display the Circular with button to download the document.

 GNCircularCard(
    number: "01",
    title: "Holiday List",
    message:
    "Holiday List is given below download it.Holiday List is given below download it.Holiday List is given below download it.Holiday List is given below download it.  ",
    date: DateTime.now().toString(),
    downloadLink: " ",
)

GNDialogs

GNDialogs provides default dialogs for all purpose. These dialogs are:

showDialog, showExitDialog, showDataLostDialog, showDialogWithTextFormField, showDialogOneButton, showAddDialog, showUpdateDialog, showDeleteDialog,

GNDialogs.showDialog(title: "Custom", message: "This is Custom Dialog", yes: "Yes", no: "No", callback: () {});


 GNDialogs.showExitDialog(callback: () {});

GNDialogs.showDataLostDialog(callback: () {});

   GNDialogs.showDialogWithTextFormField(
      title: "Dialog With Text Field",
      hintText: "Search",
      controller: TextEditingController(),
      formKey: GlobalKey(),
      isRequired: true,
      onSubmit: (p0) {},
  );

GNDialogs.showDialogOneButton(title: "One Button", message: "This only has one button", yes: "OK", callback: () {});


 GNDialogs.showAddDialog(callback: () {});

 GNDialogs.showUpdateDialog(callback: () {});

  GNDialogs.showDeleteDialog(callback: () {});

GNCustomChip

GNCustomChip is Used to display Chip, it must have same no of chipLabels and screen.

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

class ChipDemo extends StatelessWidget {
  const ChipDemo();

  @override
  Widget build(BuildContext context) {
    return GNCustomScaffold(
      appBarTitle: "Chip Demo",
      body: Column(
        children: [
          Expanded(
            child: GNCustomChip(
              isChipCenter: false,
              chipLabels: [
                "Chip 1  (1)",
                "Chip 2  (1)",
                "Chip 3  (1)",
                "Chip 4  (1)",
                "Chip 5  (1)",
              ],
              screens: [
                Center(
                  child: Container(
                    child: GNSemiBoldTextWidget(
                      title: "1",
                    ),
                  ),
                ),
                Center(
                  child: Container(
                    child: GNSemiBoldTextWidget(
                      title: "2",
                    ),
                  ),
                ),
                Center(
                  child: Container(
                    child: GNSemiBoldTextWidget(
                      title: "3",
                    ),
                  ),
                ),
                Center(
                  child: Container(
                    child: GNSemiBoldTextWidget(
                      title: "4",
                    ),
                  ),
                ),
                Center(
                  child: Container(
                    child: GNSemiBoldTextWidget(
                      title: "5",
                    ),
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

GNFocusedMenu

GNFocusedMenu(
    titles: [
      GNMediumTextWidget(
      title: "Hint",
    ),
       GNSemiBoldTextWidget(
       title: 'Delete',
    ),
       GNMediumTextWidget(
        title: 'Share',
    )
    ],
    icons: [Icon(Icons.edit), Icon(Icons.delete), Icon(Icons.share)],
    functions: [
    () => print('Edit action tapped'),
    () => print('Delete action tapped'),
    () => print('Share action tapped'),
    ],
    child: SizedBox(
       height: 100,
        width: 100,
           child: GNCustomCard(
              child: Center(
                child: GNBoldTextWidget(
                  title: "TAP",
                ),
               ),
            ),
        ),
    ),

GNAppPermission

Make sure to add user permission in AndroidManifest.xml

requestPermission, requestMultiplePermissions,

 GNAppPermission.requestPermission(permission: Permission.camera);

 GNAppPermission.requestMultiplePermissions(permissionList: [Permission.contacts, Permission.location]);

GNShare

shareServerDocumentToWhatsApp, shareLocalDocumentToWhatsApp,shareLocalDocumentToExternalApp, shareServerDocumentToExternalApp,

GNShare.shareServerDocumentToWhatsApp(documentList: [
        DocumentModel(
        documentPath: "abc.pdf")
], phoneNumber: "1234567890");

  GNShare.shareLocalDocumentToWhatsApp(phoneNumber: "1234567890");


 GNShare.shareLocalDocumentToExternalApp();

  GNShare.shareServerDocumentToExternalApp(
      documentList: [
      DocumentModel(
      documentPath: "abc.pdf")
      ],
);

GNCharts

GNCartesianChartWidget, GNCircularChartWidget

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

class ChartDemo extends StatelessWidget {
  const ChartDemo();

  @override
  Widget build(BuildContext context) {
    // Sample data for the chart
    final List<ChartData> data = [
      ChartData(x: 'Jan', y: 20, color: Colors.red),
      ChartData(x: 'Feb', y: 40, color: Colors.green),
      ChartData(x: 'Mar', y: 30, color: Colors.blue),
      ChartData(x: 'Apr', y: 50, color: Colors.purple),
      ChartData(x: 'May', y: 60, color: Colors.orange),
    ];

    // Creating a bar series
    final List<CartesianSeries<ChartData, String>> series = [
      ColumnSeries<ChartData, String>(
        dataSource: data,
        xValueMapper: (ChartData data, _) => data.x,
        yValueMapper: (ChartData data, _) => data.y,
        name: 'Sales',
        color: Colors.blue,
      ),
    ];


    return GNCustomScaffold(
      appBarTitle: "Chart Demo",
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            GNBoldTextWidget(
              title: "Cartesian Chart",
            ),
            SizedBox(
              height: 1.h,
            ),
            GNCartesianChartWidget(
              primaryChartXAxis: CategoryAxis(),
              primaryChartYAxis: NumericAxis(),
              chartTitle: ChartTitle(text: 'Monthly Sales Analysis'),
              chartLegend: Legend(
                isVisible: true,
                position: LegendPosition.bottom,
              ),
              cartesianSeriesList: series,
              chartBgColor: Colors.white,
              chartBorderColor: Colors.grey,
              chartBorderWidth: 2,
              chartMargin: const EdgeInsets.all(10),
              chartToolTipBehavior: TooltipBehavior(enable: true),
            ),

          ],
        ),
      ),
    );
  }
}


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

class ChartDemo extends StatelessWidget {
  const ChartDemo();

  @override
  Widget build(BuildContext context) {
    // Sample data for the chart

    final List<ChartData> data = [
      ChartData(x: 'Food', y: 35, color: Colors.red),
      ChartData(x: 'Transport', y: 28, color: Colors.green),
      ChartData(x: 'Rent', y: 34, color: Colors.blue),
      ChartData(x: 'Utilities', y: 10, color: Colors.yellow),
      ChartData(x: 'Other', y: 15, color: Colors.purple),
    ];

    final List<CircularSeries<ChartData, String>> seriesCircular = [
      PieSeries<ChartData, String>(
        dataSource: data,
        xValueMapper: (ChartData data, _) => data.x,
        yValueMapper: (ChartData data, _) => data.y,
        pointColorMapper: (ChartData data, _) => data.color,
        dataLabelMapper: (ChartData data, _) => '${data.x}: ${data.y}%',
        dataLabelSettings: const DataLabelSettings(isVisible: true),
      ),
    ];

    return GNCustomScaffold(
      appBarTitle: "Chart Demo",
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            GNBoldTextWidget(
              title: "Circular Chart",
            ),
            SizedBox(
              height: 1.h,
            ),
            Flexible(
              child: GNCircularChartWidget(
                series: seriesCircular,
                title: ChartTitle(text: 'Monthly Expenses'),
                legend: Legend(
                  isVisible: true,
                  position: LegendPosition.bottom,
                ),
                tooltipBehavior: TooltipBehavior(enable: true),
                borderColor: Colors.grey,
                borderWidth: 2,
                backgroundColor: Colors.white,
              ),
            )
          ],
        ),
      ),
    );
  }
}

GNSliverAppbar

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

class SliverAppBarDemo extends StatelessWidget {
  const SliverAppBarDemo();

  @override
  Widget build(BuildContext context) {
    return GNCustomScaffold(
      padding: EdgeInsets.zero,
      body: GNSliverAppbar(
        pinned: true,
        floating: true,
        snap: true,
        expandedHeight: 250.0,
        backgroundColor: Colors.black,
        title: const Text('Sliver AppBar Demo'),
        centerTitle: true,
        flexibleSpace: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Image.asset(
                'assets/images/ic_avatar.png', // Replace with a valid asset image path
                height: 130,
              ),
            ),
          ],
        ),
        actions: [
          IconButton(
            icon: const Icon(Icons.search),
            onPressed: () {
              // Action for search
            },
          ),
          IconButton(
            icon: const Icon(Icons.more_vert),
            onPressed: () {
              // Action for more options
            },
          ),
        ],
        sliverWidgets: [
          SliverList(
            delegate: SliverChildBuilderDelegate(
                  (context, index) {
                return ListTile(
                  title: Text('Item $index'),
                );
              },
              childCount: 30, // Number of items in the list
            ),
          ),
        ],
      ),
    );
  }
}

Happy coding! 🎉

← Metadata

2
likes
70
points
1.92k
downloads

Publisher

unverified uploader

Weekly Downloads

Metadata

A flutter pub for utility widgets

Homepage

Documentation

API reference

License

unknown (license)

Dependencies

archive, barcode, bidi, build_runner, cached_network_image_platform_interface, camera, collection, connectivity_plus_platform_interface, crypto, csslib, cunning_document_scanner, equatable, excel, file_picker, fluentui_system_icons, flutter, flutter_app_lock, flutter_bloc, flutter_cache_manager, flutter_map, flutter_shaders, geocoding, geolocator, get, html, http, image, image_picker, intl, latlong2, list_counter, local_auth, location, markdown, meta, open_file, path, path_drawing, path_parsing, path_provider, permission_handler, photo_view, provider, qr, rxdart, searchable_listview, share_plus, shared_preferences, syncfusion_flutter_charts, syncfusion_flutter_core, syncfusion_flutter_pdf, syncfusion_flutter_pdfviewer, universal_io, url_launcher, vector_graphics, vector_graphics_compiler, vector_math, vibration, webview_flutter_plus, xml

More

Packages that depend on gnums_utility_widgets

Back