Flutter实用工具小部件插件gnums_utility_widgets的使用

gnums utility widgets

gnums utility widgets 是一个用于开发自定义 GN 小部件的包。

特性

易于使用的自定义 GN 小部件。
完全可定制化。
专注于在所有项目中使代码更加健壮。

安装

在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  gnums_utility_widgets: ^最新版本号

然后运行以下命令以获取依赖项：

flutter pub get

小部件演示

GNTextFormField

GNTextFormField 是一个可定制的文本字段小部件，带有前缀图标等选项。

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

GNTabbar

GNTabbar 是一个可定制的标签栏，便于在 Flutter 中实现。

GNTabbar 有三个必需字段：tabController, tabs, 和 tabView。

tabController: 提供一个带有定义长度的 TabController。
tab: 包含 TabItem 的列表，TabItem 包含 tabTitle, 是否显示计数 (isDisplayCount) 等。
tabView: 与标签对应的控件列表，标签数量和 tabView 中的控件数量必须一致。

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

class TabbarDemo extends StatefulWidget {
  const TabbarDemo();

  [@override](/user/override)
  State<TabbarDemo> createState() => _TabbarDemoState();
}

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

  [@override](/user/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",
),

GNDownloadButton

GNDownloadButton 是一个简单且可定制的下载按钮。

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

GNActionIconButton

GNActionIconButton 是一个紧凑且可定制的带图标和标签的按钮。

GNActionIconButton(
  label: 'Edit',
  icon: Icons.edit,
  color: Colors.blue,
  onPressed: () {
    // 处理操作
  },
);

GNIconButton

GNIconButton 是一个简单的圆形图标按钮，具有可定制属性。

GNIconButton(
  icon: Icons.add,
  onPressed: () {
    // 处理按钮点击
  },
);

GNElevatedButton

GNElevatedButton 是一个带有可定制属性的凸起按钮。

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

GNTextButton

GNTextButton 是一个带有可定制属性的文本按钮。

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

GNOutlinedButton

GNOutlinedButton 是一个带有可定制属性的描边按钮。

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

GNRadioButton

GNRadioButton 是一个灵活且可定制的单选按钮小部件。

为每个单选按钮提供字符串标题，并确保它在 value 列表中有对应的值。

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

class RadioButtonDemo extends StatefulWidget {
  [@override](/user/override)
  _RadioButtonDemoState createState() => _RadioButtonDemoState();
}

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

  [@override](/user/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 是一个灵活且可定制的复选框小部件。

为每个复选框提供不同的值。使用 Obx 或在 onChange 中调用 setState((){}) 来查看 UI 变化。

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

GNBottomSheet

GNBottomSheet 是一个易于使用的底部弹出窗口。

使用 showBottomSheet 方法来显示底部弹出窗口。

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

GNPopupDialog

GNPopupDialog 是一个易于使用的弹窗。

使用 showPopupDialog 方法来显示弹窗。

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

GNSnackBar

GNSnackBar 是一个易于使用的可定制化 SnackBar。

使用 show 方法来显示 SnackBar。

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

GNExpansionTile

GNExpansionTile 是一个易于使用的可定制化展开小部件。

在 expandedWidget 列表中提供展开控件。

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

GNFileUploadWidget

GNFileUploadWidget 是一个易于使用的文件上传小部件。

首先定义三个变量：

isFileUpload: 检查保存按钮点击时文件是否已上传。
isValid: 检查所选文件是否有效或无效。
file: 在页面中访问文件。

当 isPhotoUpload 为 true 时，打开相机拍摄单张照片；当为 false 时，打开自动捕获文档的相机。

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](/user/override)
  State<FileUploadDemo> createState() => _FileUploadDemoState();
}

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

  [@override](/user/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 是一个易于使用的下拉菜单，点击后会打开底部弹出窗口。

在 initialList 中提供您的列表。

在 filter 中编写过滤逻辑，该逻辑将用于底部弹出窗口中的搜索字段。

在 itemBuilder 中提供选项小部件，推荐使用 DropDownMenuItem 来访问某些功能。

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](/user/override)
  State<DropdownDemo> createState() => _DropdownDemoState();
}

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

  String selectedName = '';

  [@override](/user/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 是一个用于选择单个日期的小部件。

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

GNTimeSelect

GNTimeSelect 是一个用于选择单个时间的小部件。

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

GNDateRangeSelect

GNDateRangeSelect 是一个仅用于选择日期范围的小部件。

在屏幕上定义一个变量 dateList 来访问日期范围。

dateList 将在索引 0 和 1 分别包含开始日期和结束日期。

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

GNDateTimeRangeSelect

GNDateTimeRangeSelect 是一个用于选择日期和时间范围的小部件。

定义两个变量 startDateTime 和 endDateTime 来在屏幕上访问日期时间范围。

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](/user/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 是一个用于显示短消息的小部件，当没有数据时显示。

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

GNStatusView

GNStatusView 是一个用于显示状态（如待处理、批准、拒绝等）的小部件，颜色将根据状态自动分配。

GNStatusView(
  title: "Completed",
)

GNDotSeparator

GNDotSeparator 是一个用于使用点分隔两个小部件的小部件。

GNDotSeparator(
  color: Colors.black38,
)

GNCustomCard

GNCustomCard 是一个可定制的卡片小部件。

它包含字段如：elevation, child, bgColor 等。

GNCustomCard(
  title: "This is Card",
)

GNToolTip

GNToolTip 是一个小部件，用于在点击某个小部件时显示短消息。

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

GNLinearProgressIndicator

GNLinearProgressIndicator 是一个用于显示线性进度条的小部件。

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

GNBusPass

GNBusPass 是一个用于显示公交卡的小部件，通过提供一些信息，它将显示卡片。

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 是一个用于显示通知的小部件，通过提供一些信息，它将显示通知并带有链接和下载文档的按钮。

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 是一个用于显示圆形的小部件，通过提供一些信息，它将显示圆形并带有下载文档的按钮。

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 提供了所有用途的默认对话框。这些对话框包括：

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 是一个用于显示芯片的小部件，必须有相同数量的 chipLabels 和 screen。

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

class ChipDemo extends StatelessWidget {
  const ChipDemo();

  [@override](/user/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

确保在 AndroidManifest.xml 中添加用户权限。

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

GNShare

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

GNCharts

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](/user/override)
  Widget build(BuildContext context) {
    // 示例数据
    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),
    ];

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

caililin 1楼•1 个月前

更多关于Flutter实用工具小部件插件gnums_utility_widgets的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

gnums_utility_widgets 是一个 Flutter 插件，提供了一些实用的工具小部件，可以帮助开发者更高效地构建 Flutter 应用。以下是一些常见的使用方法和示例：

1. 安装插件

首先，你需要在 pubspec.yaml 文件中添加 gnums_utility_widgets 依赖：

dependencies:
  flutter:
    sdk: flutter
  gnums_utility_widgets: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入插件

在你的 Dart 文件中导入插件：

import 'package:gnums_utility_widgets/gnums_utility_widgets.dart';

3. 使用实用小部件

3.1 `ResponsiveWidget`

ResponsiveWidget 是一个响应式小部件，可以根据屏幕大小自动调整布局。

ResponsiveWidget(
  mobile: Container(
    color: Colors.red,
    child: Center(child: Text('Mobile Layout')),
  ),
  tablet: Container(
    color: Colors.green,
    child: Center(child: Text('Tablet Layout')),
  ),
  desktop: Container(
    color: Colors.blue,
    child: Center(child: Text('Desktop Layout')),
  ),
)

3.2 `CustomButton`

CustomButton 是一个自定义按钮，支持多种样式和点击事件。

CustomButton(
  text: 'Click Me',
  onPressed: () {
    print('Button Pressed!');
  },
  color: Colors.blue,
  textColor: Colors.white,
  borderRadius: 10.0,
)

3.3 `LoadingIndicator`

LoadingIndicator 是一个加载指示器，可以在数据加载时显示。

LoadingIndicator(
  color: Colors.blue,
  size: 50.0,
)

3.4 `CustomTextField`

CustomTextField 是一个自定义文本输入框，支持多种输入类型和验证。

CustomTextField(
  hintText: 'Enter your email',
  keyboardType: TextInputType.emailAddress,
  validator: (value) {
    if (value.isEmpty) {
      return 'Please enter your email';
    }
    return null;
  },
)

3.5 `CustomDialog`

CustomDialog 是一个自定义对话框，支持自定义内容和按钮。

CustomDialog(
  title: 'Alert',
  content: 'Are you sure you want to delete this item?',
  positiveButtonText: 'Yes',
  negativeButtonText: 'No',
  onPositivePressed: () {
    print('Item deleted');
  },
  onNegativePressed: () {
    print('Deletion cancelled');
  },
)

4. 其他实用功能

gnums_utility_widgets 还提供了其他一些实用功能，如 DateUtils、StringUtils 等，可以帮助你处理日期、字符串等常见任务。

String formattedDate = DateUtils.formatDate(DateTime.now(), 'yyyy-MM-dd');
bool isValidEmail = StringUtils.isEmail('example@example.com');

Flutter实用工具小部件插件gnums_utility_widgets的使用

Flutter实用工具小部件插件gnums_utility_widgets的使用

gnums utility widgets

特性

安装

小部件演示

GNTextFormField

GNTabbar

GNTextWidgets

GNDownloadButton

GNActionIconButton

GNIconButton

GNElevatedButton

GNTextButton

GNOutlinedButton

GNRadioButton

GNCheckbox

GNBottomSheet

GNPopupDialog

GNSnackBar

GNExpansionTile

GNFileUploadWidget

GNCustomBottomSheetDropdownAutoSearch

GNDateSelect

GNTimeSelect

GNDateRangeSelect

GNDateTimeRangeSelect

GNNoDataFound

GNStatusView

GNDotSeparator

GNCustomCard

GNToolTip

GNLinearProgressIndicator

GNBusPass

GNNotificationCard

GNCircularCard

GNDialogs

GNCustomChip

GNFocusedMenu

GNAppPermission

GNShare

GNCharts

1. 安装插件

2. 导入插件

3. 使用实用小部件

3.1 ResponsiveWidget

3.2 CustomButton

3.3 LoadingIndicator

3.4 CustomTextField

3.5 CustomDialog

4. 其他实用功能

3.1 `ResponsiveWidget`

3.2 `CustomButton`

3.3 `LoadingIndicator`

3.4 `CustomTextField`

3.5 `CustomDialog`