Flutter实用工具集插件flutter_utilsx的使用

Flutter实用工具集插件flutter_utilsx的使用

Flutter utilsx #

Pub

Pub


特性

它包含了许多在项目开发中常用的工具方法。例如显示对话框和底部弹出菜单、检查值是否为空、日期操作和格式化等。 它还能帮助你减少代码量并使代码更易读。

使用 #

此包非常易于使用。你可以通过在你的项目中添加以下代码来使用它。 将以下代码添加到你的 `lib/main.dart` 文件中。

设置包

const 
MaterialApp(
navigatorKey: AppCntx.navigatorKey,
home: Home(),
);

显示对话框和底部弹出菜单

显示对话框

如果你想要显示一个底部弹出菜单,可以设置类型为 DialogType.bottomSheet

Dialogs.showDialogX(
       child : "任何小部件",
      isCancelable: "点击对话框外部可关闭",
      context : "传递上下文,如果不传递上下文则添加你的MaterialApp导航键",
    ); 

检查对话框是否打开

Dialogs.isDialogOpen;

关闭对话框

Dialogs.closeDialog();

显示底部弹出菜单

Dialogs.showBottomSheet(
child : "任何小部件",
isCancelable: "点击对话框外部可关闭",
context : "传递上下文,如果不传递上下文则添加你的MaterialApp导航键",
heightFactor = 0.5,
double elevation=0,
);

查找同父级上下文中的无状态小部件

MyStatelessWidget? widget = context.findStatelessWidgetInSameContext<MyStatelessWidget>();
 if (widget != null) {
   // 对该小部件进行操作
 }

查找同父级上下文中的有状态小部件

MyState? state = context.findAncestorStateOfType<MyState>();
 if (state != null) {
   // 对该状态进行操作
 }

检查值是否为空

isNotEmpty(dynamic value);

日期操作和格式化

stringToDate("25/9/2023", DateFormates.YYYY_MM_DD);
convertTime24Formate("时间");

表单验证

class anyName with ValidationMixn{
  TextFormField(
    validator: (value) => validateEmail(value),
  );
  TextFormField(
  validator: validatePassword,
  );
}

设置小部件的高度和宽度

20.heightBox
10.widthBox
5.hp

读取日志

logMessage("你的消息");

将任何小部件设置为可点击并提供漂亮的动画

SweetButton(
     onPressed: () { },
      child: "小部件"
   )

获取带有当前月份名称格式的日期

getDateByName(DateTime.now());
stringToDateByName("25-September-2021");

计算给定日期的时间差(以分钟为单位)

calculateTimeDelayInMinutes(
    required DateTime start, 
    required DateTime end
 )

获取当前日期和时间

currentDate;

BuildContext扩展以获取主题、大小、文本主题和颜色方案

context.theme;
context.size;
context.textTheme;
context.colorScheme;

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

1 回复

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


当然,flutter_utilsx 是一个实用的 Flutter 工具集插件,它提供了一系列常用的工具函数,可以帮助开发者更高效地开发 Flutter 应用。下面是一些常用功能的代码示例,展示如何使用 flutter_utilsx 插件。

首先,确保你已经在 pubspec.yaml 文件中添加了 flutter_utilsx 依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_utilsx: ^最新版本号  # 请替换为实际的最新版本号

然后,运行 flutter pub get 来获取依赖。

示例代码

1. 屏幕工具(ScreenUtil)

ScreenUtil 提供了一种方便的方式来适配不同屏幕尺寸。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ScreenUtil 示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                '宽度: ${ScreenUtil().setWidth(300)}',
                style: TextStyle(fontSize: ScreenUtil().setSp(24)),
              ),
              SizedBox(height: ScreenUtil().setHeight(20)),
              Text(
                '高度: ${ScreenUtil().setHeight(150)}',
                style: TextStyle(fontSize: ScreenUtil().setSp(24)),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在使用 ScreenUtil 之前,需要在 MaterialAppbuilder 方法中进行初始化:

MaterialApp(
  builder: (context, child) {
    return ScreenUtilInit(
      designSize: Size(360, 690), // 设计稿基准尺寸
      builder: () => child!,
    );
  },
  home: Scaffold(...),
)

2. 颜色工具(ColorUtil)

ColorUtil 提供了一些便捷方法来处理颜色。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ColorUtil 示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                width: 100,
                height: 100,
                color: ColorUtil.hexToColor('#FF5733'), // 十六进制颜色转换
              ),
              SizedBox(height: 20),
              Container(
                width: 100,
                height: 100,
                color: ColorUtil.randomColor(), // 随机颜色
              ),
            ],
          ),
        ),
      ),
    );
  }
}

3. 日期工具(DateUtil)

DateUtil 提供了一些日期处理的便捷方法。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('DateUtil 示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                '当前日期: ${DateUtil.formatDateTime(DateTime.now(), format: 'yyyy-MM-dd HH:mm:ss')}',
                style: TextStyle(fontSize: 18),
              ),
              SizedBox(height: 20),
              Text(
                '日期差: ${DateUtil.dateDifference(DateTime.now(), DateTime.now().add(Duration(days: 5)))} 天',
                style: TextStyle(fontSize: 18),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这些示例展示了 flutter_utilsx 插件中一些常用工具的使用方法。你可以根据项目需求,查阅官方文档获取更多详细信息和功能。

回到顶部