Flutter通用功能插件flutter_chen

Flutter通用功能插件flutter_chen_common的使用

简介

flutter_chen_common 包含了一些开发中常用的组件、工具类及功能模块等。代码简洁优雅且具有高度定制性。

dependencies:
  flutter_chen_common: 最新版本

Utils

flutter_chen_common 提供了以下工具类：

SpUtil：SharedPreferences工具类，使用前需要初始化。
FunctionUtil：为方法添加节流和防抖功能。
LogUtil：优雅的日志打印工具。
DateUtil：日期转换格式化输出工具。
TextUtil：处理银行卡号格式化、手机号隐藏等功能。
EncryptUtil：提供异或加密/解密、MD5加密、Base64加密/解密等功能。
JsonUtil：JSON转换工具类。

Helper

flutter_chen_common 提供了以下辅助工具类：

CommonHelper：通用的各类弹窗、提示。
ImageHelper：图片选择、裁剪、上传。
OssHelper：OSS上传，需要传递一个请求OSS配置的方法。
UpdateHelper：自定义版本更新。
PermissionHelper：权限判断申请。
CacheHelper：应用缓存。

Widgets

flutter_chen_common 提供了以下组件：

RefreshWidget：包含上拉加载、下拉刷新、回至顶部、页面数据状态视图（加载、空数据、列表、瀑布流）等功能的列表刷新组件。
ComUpload：图片上传选择器。
ComAlbum：仿微信朋友圈图片展示。
ComGallery：滑动切换放缩旋转的图片预览。
ComSwiper：支持多形式轮播图。
ComImage：网络缓存预加载淡入淡出图片。
ComTab：可实现所有场景的Tab。
ComButton：通用可渐变按钮、统一节流。
ComSearch：通用搜索框。
ComTextField：通用文本框。
ComRadio：勾选样式Radio。
BaseWidget：多状态布局，无网络自动切换该状态布局。

网络请求

/// 初始化RequestClient，传请求URL以及请求拦截器
await RequestClient.init(
  baseUrl: Env.getEnvConfig().baseUrl,
  interceptors: [RequestInterceptor()]);

/// 使用
RequestClient.instance.request(
  "/xxxx",
  method: HttpType.post.name,
)

配置主题以及OSS

/// 初始化SharedPreferences
await SpUtil.init();
ComConfig.config(theme: AppColors.theme);
ComConfig.setOssConfig(Global.ossConfig);

static Future<Map<String, dynamic>> ossConfig() async {
  var res = await AppApi.ossToken();
  var params = {
    "accessKeyId": res["accessKeyId"],
    "policy": res["policy"],
    "signature": res["signature"],
    "url": "https://${res["bucket"]}.oss-ap-southeast-1.aliyuncs.com",
    "dir": "appName"
    };
  return params;
}

RefreshWidget 示例

class DemoLogic extends PagingController {
  [@override](/user/override)
  Future<PagingResponse> loadData() async {
    // TODO: implement loadData
    dynamic result = {"current": 1, "total": 3, "records": []};
    await Future.delayed(2000.milliseconds, () {
      for (var i = 0; i < 20; ++i) {
        result["records"]?.add(i);
      }
    });

    return PagingResponse.fromMapJson(result);
  }
}

class DemoPage extends StatelessWidget {
  DemoPage({Key? key}) : super(key: key);

  final logic = Get.find<DemoLogic>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GetBuilder<DemoLogic>(
      builder: (controller) {
        return Scaffold(
            body: RefreshWidget(
              controller: logic,
              slivers: [
                RefreshListWidget(
                    itemBuilder: (item, index) => _buildItem(index),
                    controller: logic,
                    showList: false),
              ],
            ));
      },
      id: logic.pagingState.refreshId,
    );
  }

  Widget _buildItem(index) {
    if (index % 3 == 0) {
      return Container(
        color: Colors.deepOrange,
        width: double.infinity,
        height: 300.h,
      );
    }
    return Container(
      color: Colors.green,
      width: double.infinity,
      height: 200.h,
    );
  }
}

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

yuanlaile 1楼•3 天前

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

当然，flutter_chen_common 是一个集成了许多通用功能的 Flutter 插件，可以帮助开发者快速实现一些常见的功能，比如网络请求、图片加载、设备信息等。以下是一些关于如何使用 flutter_chen_common 插件的代码案例。

首先，确保你已经在 pubspec.yaml 文件中添加了 flutter_chen_common 依赖：

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

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

案例 1：网络请求

flutter_chen_common 提供了方便的 HTTP 请求封装。

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String responseData = '';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Network Request Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () async {
                  var response = await HttpUtil.get('https://api.example.com/data');
                  setState(() {
                    responseData = response.data.toString();
                  });
                },
                child: Text('Fetch Data'),
              ),
              Text(responseData),
            ],
          ),
        ),
      ),
    );
  }
}

案例 2：图片加载

flutter_chen_common 提供了图片加载的封装，类似于 cached_network_image。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Image Loader Example'),
        ),
        body: Center(
          child: ChenImage(
            imageUrl: 'https://example.com/image.jpg',
            placeholder: AssetImage('assets/placeholder.png'), // 可选
            errorWidget: Icon(Icons.error), // 可选
          ),
        ),
      ),
    );
  }
}

案例 3：获取设备信息

flutter_chen_common 可以方便地获取设备的详细信息。

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String deviceInfo = '';

  @override
  void initState() {
    super.initState();
    _getDeviceInfo();
  }

  Future<void> _getDeviceInfo() async {
    var info = await DeviceInfoUtil.getInfo();
    setState(() {
      deviceInfo = info.toString();
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Device Info Example'),
        ),
        body: Center(
          child: Text(deviceInfo),
        ),
      ),
    );
  }
}

这些代码案例展示了如何使用 flutter_chen_common 插件的一些基本功能。具体的 API 使用和更多功能，请参考 flutter_chen_common 的官方文档或源代码。