Flutter复用的组件、工具类和扩展方法插件extensionresoft的探索使用

一、概述

extensionresoft 是一个为Flutter开发者提供的综合性扩展库，旨在简化开发流程并提高开发效率。该库包含了一系列可复用的组件、工具类和扩展方法，适用于快速开发、优化应用性能、增强安全性等多个方面。

二、安装

要在Flutter项目中使用extensionresoft，首先需要在pubspec.yaml文件中添加依赖：

dependencies:
  extensionresoft: ^1.0.0

然后运行以下命令来安装依赖：

flutter pub get

三、使用

在Dart文件中导入extensionresoft库：

import 'package:extensionresoft/extensionresoft.dart';

接下来，你就可以在项目中使用该库提供的各种扩展和工具了。

四、主要功能

图像处理
- 高级图像处理：支持圆形和矩形图片组件，提供占位图、错误处理、缓存机制等功能。
- 资源管理：优化网络图片和本地资源的加载，确保应用在不同网络环境下都能高效显示图片。
安全特性
- PIN认证系统：提供可定制的PIN输入组件，增强登录页面的安全性。
网络操作
- 连接管理：实时监控网络状态，确保在网络变化时应用能够平稳过渡。
数据管理
- 存储解决方案：通过SharedPreferencesService实现多种数据类型的持久化存储，方便管理应用设置和用户偏好。
扩展库
- 上下文扩展：简化导航操作，提升代码的可维护性。
- UI扩展：提供图标、列表、数值、字符串等常用组件的扩展方法。
- 逻辑工具：简化条件判断和值管理的操作。

五、示例代码

以下是一个完整的示例Demo，展示了如何在Flutter项目中使用extensionresoft库的各个功能。

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

void main() async {
  // 初始化SharedPreferencesService
  await SharedPreferencesService.init();

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('extensionresoft Demo')),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: [
              // 安全PIN输入
              PinEntry(
                pinLength: 4,
                onInputComplete: (pin) => print('Entered PIN: $pin'),
                inputFieldConfiguration: InputFieldConfiguration(
                  obscureText: true,
                  fieldFillColor: Colors.grey[200],
                  focusedBorderColor: Colors.blue,
                ),
                keyboardConfiguration: KeyboardConfiguration(
                  keyBackgroundColor: Colors.white,
                  keyTextStyle: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                ),
              ).padding(top: 20), // 使用扩展方法添加间距

              // 网络连接管理
              StreamBuilder<InternetConnectivityResult>(
                stream: InternetConnectionChecker().onInternetConnectivityChanged,
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    final result = snapshot.data!;
                    return Text(
                      'Connection Status: ${result.hasInternetAccess}\n'
                      'Connection Type: ${result.connectionType}',
                      style: TextStyle(fontSize: 18),
                    );
                  } else {
                    return CircularProgressIndicator();
                  }
                },
              ).padding(top: 20),

              // 圆形网络/本地图片
              AppCircleImage(
                'https://example.com/profile.jpg',
                radius: 40,
                assetFallback: 'assets/default_avatar.png',
                placeholder: CircularProgressIndicator(),
                errorWidget: Icon(Icons.error),
              ).padding(top: 20),

              // 自定义图片组件
              AppImage(
                'https://example.com/image.jpg',
                width: 200,
                height: 150,
                fit: BoxFit.cover,
                assetFallback: 'assets/placeholder.png',
              ).padding(top: 20),

              // 作为装饰图片
              Container(
                decoration: BoxDecoration(
                  image: AppImage('https://example.com/background.jpg')
                      .toDecorationImage(
                    fit: BoxFit.cover,
                    fallbackAsset: 'assets/default_bg.png',
                  ),
                ),
                width: double.infinity,
                height: 200,
              ).padding(top: 20),

              // SpaceExtension 示例
              16.spaceX(), // 创建宽度为16的SizedBox
              24.spaceY(), // 创建高度为24的SizedBox
              32.spaceXY(), // 创建宽高均为32的SizedBox
              20.spX, // Getter示例：创建宽度为20的SizedBox
              30.spY, // Getter示例：创建高度为30的SizedBox
              40.spXY, // Getter示例：创建宽高均为40的SizedBox

              // CustomCardExtension 示例
              16.radius(
                child: Text('Hello World'),
                elevation: 4,
                color: Colors.blue,
                strokeColor: Colors.black,
                shadowColor: Colors.grey,
              ).padding(top: 20),

              // PathExtension 示例
              Text('PathExtension Result: ${16.p((n) => n * 2)}').padding(top: 20),

              // TextExtension 示例
              'Hello'.edit(
                textStyle: TextStyle(fontSize: 20),
                textAlign: TextAlign.center,
              ).padding(top: 20),

              // CustomImageExtension 示例
              'assets/image.png'.img(
                width: 100,
                height: 100,
                fit: BoxFit.cover,
              ).padding(top: 20),

              'assets/avatar.png'.circleImage(
                fit: BoxFit.cover,
                opacity: 0.8,
              ).padding(top: 20),

              // Conditional Function 示例
              Text('Condition Result: ${condition(true, 'True Value', 'False Value')}').padding(top: 20),
              Text('Condition Function Result: ${conditionFunction(true, () => 'True Value', () => 'False Value')}').padding(top: 20),

              // Get Function 示例
              Text('Get Function Result: ${get('Existing Value', 'Default Value')}').padding(top: 20),

              // SharedPreferencesService 示例
              ElevatedButton(
                onPressed: () async {
                  await SharedPreferencesService.setBool('isDarkMode', true);
                  final isDarkMode = SharedPreferencesService.getBool('isDarkMode');
                  print('isDarkMode: $isDarkMode');
                },
                child: Text('Set Dark Mode'),
              ).padding(top: 20),
            ],
          ),
        ),
      ),
    );
  }
}

六、测试

为了确保extensionresoft库的功能正常工作，可以编写单元测试来验证各个扩展方法的行为。以下是一些示例测试代码：

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:extensionresoft/extensionresoft.dart';

void main() {
  group('SpaceExtension', () {
    test('spaceX should return a SizedBox with specified width', () {
      final spacerX = 16.spaceX();
      expect(spacerX.width, equals(16.0));
    });

    test('spaceY should return a SizedBox with specified height', () {
      final spacerY = 24.spaceY();
      expect(spacerY.height, equals(24.0));
    });

    test('spaceXY should return a SizedBox with specified width and height', () {
      final spacerXY = 32.spaceXY();
      expect(spacerXY.width, equals(32.0));
      expect(spacerXY.height, equals(32.0));
    });

    test('spX getter should return a SizedBox with specified width', () {
      final spacerXGetter = 20.spX;
      expect(spacerXGetter.width, equals(20.0));
    });

    test('spY getter should return a SizedBox with specified height', () {
      final spacerYGetter = 30.spY;
      expect(spacerYGetter.height, equals(30.0));
    });

    test('spXY getter should return a SizedBox with specified width and height', () {
      final spacerXYGetter = 40.spXY;
      expect(spacerXYGetter.width, equals(40.0));
      expect(spacerXYGetter.height, equals(40.0));
    });
  });

  group('CustomCardExtension', () {
    test('radius should return a Card widget with specified properties', () {
      final Card roundedCard = 16.radius(
        child: const Text('Test'),
        elevation: 4,
        color: Colors.blue,
        strokeColor: Colors.black,
        shadowColor: Colors.grey,
      ) as Card;

      expect(roundedCard.elevation, equals(4));
      expect(roundedCard.color, equals(Colors.blue));
      expect(roundedCard.shadowColor, equals(Colors.grey));
    });
  });

  group('PathExtension', () {
    test('p function should apply function to number and return result', () {
      final result = 16.p((n) => n * 2);
      expect(result, equals(32.0));
    });
  });

  group('TextExtension', () {
    test('edit function should return a Text widget with specified properties', () {
      final textWidget = 'Hello'.edit(textStyle: const TextStyle(fontSize: 20), textAlign: TextAlign.center);
      expect(textWidget.data, equals('Hello'));
      expect(textWidget.style!.fontSize, equals(20));
      expect(textWidget.textAlign, equals(TextAlign.center));
    });
  });

  group('CustomImageExtension', () {
    test('img function should return an Image widget with specified properties', () {
      final imageWidget = 'assets/image.png'.img(width: 100, height: 100, fit: BoxFit.cover);
      expect(imageWidget.width, equals(100.0));
      expect(imageWidget.height, equals(100.0));
    });

    test('circleImage function should return a Container widget with circular image decoration', () {
      final circleImageContainer = 'assets/avatar.png'.circleImage(fit: BoxFit.cover, opacity: 0.8);
      //expect(circleImageContainer.decoration!.shape, equals(BoxShape.circle));
    });
  });

  group('Conditional Function', () {
    test('condition function should return correct value based on condition', () {
      final result = condition(true, 'True Value', 'False Value');
      expect(result, equals('True Value'));
    });

    test('conditionFunction should invoke correct function based on condition', () {
      final result = conditionFunction(true, () => 'True Value', () => 'False Value');
      expect(result, equals('True Value'));
    });
  });

  group('Get Function', () {
    test('get function should return correct value based on key and default value', () {
      final result = get('Existing Value', 'Default Value');
      expect(result, equals('Existing Value'));
    });
  });
}

更多关于Flutter复用的组件、工具类和扩展方法插件extensionresoft的探索使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

phonegap100 1楼•8 天前

更多关于Flutter复用的组件、工具类和扩展方法插件extensionresoft的探索使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

在探索Flutter中未知的插件（如extensionresoft）时，通常我们首先需要查看该插件的官方文档或仓库，以了解其功能和使用方法。由于extensionresoft并不是一个广为人知的Flutter插件（根据我的知识库），这里我将提供一个通用的方法，展示如何集成和使用一个Flutter插件，并假设你已经有了该插件的源代码或仓库链接。

1. 添加插件依赖

首先，你需要将插件添加到你的pubspec.yaml文件中。以下是一个假设的插件依赖添加示例：

dependencies:
  flutter:
    sdk: flutter
  extensionresoft:
    git:
      url: https://github.com/your-repo/extensionresoft.git  # 假设插件托管在GitHub上
      ref: main  # 或者其他你需要的分支或标签

2. 获取插件源代码

如果你已经克隆了插件的仓库，你可以直接在本地项目中引用它。假设你已经将插件代码放在了./plugins/extensionresoft目录下，你可以这样修改pubspec.yaml：

dependencies:
  flutter:
    sdk: flutter
  extensionresoft:
    path: ./plugins/extensionresoft

3. 导入并使用插件

在你的Flutter项目中，导入并使用该插件。以下是一个假设的示例，展示了如何导入并使用一个名为Extensionresoft的插件（注意，这里的类名和函数名都是假设的，你需要根据插件的实际API进行调整）：

import 'package:flutter/material.dart';
import 'package:extensionresoft/extensionresoft.dart'; // 导入插件

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Extensionresoft Plugin Demo'),
        ),
        body: Center(
          child: ExtensionresoftDemo(),
        ),
      ),
    );
  }
}

class ExtensionresoftDemo extends StatefulWidget {
  @override
  _ExtensionresoftDemoState createState() => _ExtensionresoftDemoState();
}

class _ExtensionresoftDemoState extends State<ExtensionresoftDemo> {
  String result = "";

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Extensionresoft Plugin Result:'),
        Text(result),
        ElevatedButton(
          onPressed: () async {
            // 假设插件有一个名为someFunction的异步方法
            String res = await Extensionresoft.someFunction();
            setState(() {
              result = res;
            });
          },
          child: Text('Call Extensionresoft Function'),
        ),
      ],
    );
  }
}

注意事项

插件文档：务必查阅插件的官方文档，了解它的API和用法。
权限：如果插件需要特定的权限（如相机、存储等），请确保在AndroidManifest.xml和Info.plist中正确配置。
错误处理：在实际使用中，应该添加错误处理逻辑，以处理插件调用失败的情况。

由于extensionresoft是一个假设的插件名，上述代码中的类名和方法名都需要根据实际的插件API进行调整。如果插件有特定的初始化步骤或配置要求，请遵循插件的官方文档进行操作。