Flutter通用功能库插件agnext_common_library_flutter的使用

Flutter通用功能库插件agnext_common_library_flutter的使用

特性

agnext_common_library_flutter 是一个用于重用各种小部件和功能的通用库。它包含了许多实用的功能，如自定义AppBar、网络图片加载、文本输入框等。

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用agnext_common_library_flutter库。

import 'dart:io';
import 'dart:isolate';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:image_picker/image_picker.dart';
import 'package:agnext_common_library_flutter/agnext_common_library_flutter.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是你的应用的根。
  @override
  Widget build(BuildContext context) {
    // 这里添加了必要的配置，否则所有尺寸将无法工作，并且此包使用了getx管理包，如有需要可以修改。
    return ScreenUtilInit(
      designSize: const Size(360, 690),
      minTextAdapt: true,
      splitScreenMode: true,
      builder: (_, child) {
        return GetMaterialApp(
          theme: new ThemeData(
            appBarTheme: AppBarTheme(iconTheme: IconThemeData(color: Colors.black)),
          ),
          smartManagement: SmartManagement.onlyBuilder,
          debugShowCheckedModeBanner: false,
          locale: const Locale('en', 'US'),
          defaultTransition: Transition.rightToLeft,
          home: MyHomePage(title: "Home page"),
        );
      },
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  File? image;

  void _pickImage() async {
    ImagePicker picker = ImagePicker();
    final imageTemp = await picker.pickImage(source: ImageSource.gallery, imageQuality: 100);
    if (imageTemp != null) {
      // 添加水印到图片
      await addWaterToImage(imageTemp);
    }
  }

  Future<void> addWaterToImage(XFile imageToAddWatermark) async {
    var pickedImage = File(imageToAddWatermark.path);
    var decodedImage = await decodeImageFromList(await pickedImage.readAsBytes());
    var height = decodedImage.height;  // 图像高度
    var width = decodedImage.width;
    var _watermarkPlugin = WatermarkUnique();

    final imageWithWaterMark = await _watermarkPlugin.addTextWatermark(
      filePath: imageToAddWatermark.path, // 图片文件路径
      text: 'Location:Mohali,punjab', // 水印文本
      x: 100, // X位置
      y: height - 400, // Y位置
      textSize: 90, // 文本大小
      quality: 25,
      color: Colors.white, // 文本颜色
      imageFormat: ImageFormat.jpeg,
    );

    setState(() {
      image = File(imageWithWaterMark!);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CommonWidgets.customAppBar(
        title: "自定义AppBar",
        actions: [
          CommonWidgets.setPadding(
            rightPadding: margin_20,
            widget: Icon(Icons.favorite, color: CommonColors.white),
          ),
        ],
        appBarBGColor: CommonColors.primaryColor,
        appBarTitleColor: CommonColors.white,
      ),
      body: CommonWidgets.setPaddingAll(
        margin: margin_20,
        widget: SingleChildScrollView(
          child: Column(
            children: [
              CommonWidgets.commonText("这是公用的小部件", fontSize: font_16, color: CommonColors.primaryColor),
              CommonWidgets.sizedBox(height: height_20),
              CommonWidgets.networkImages(
                "https://fastly.picsum.photos/id/230/200/300.jpg?hmac=pyhlpgJN2oBeEzhJbnJYrCsLoJM6MKd_NUQGIQhVx5k",
                height: height_200,
                width: width_170,
              ),
              CommonWidgets.setPaddingAll(
                margin: margin_20,
                widget: CommonTextField.commonTextField(labelText: "用户名"),
              ),
              CommonWidgets.setPaddingAll(
                margin: margin_20,
                widget: CustomButton.customButton(
                  buttonText: "打开底部弹窗",
                  onClick: () {
                    CommonBottomSheet.commonBottomSheet(
                      body: CommonWidgets.setPaddingAll(
                        margin: margin_20,
                        widget: Container(
                          width: CommonWidgets.fullWidth(context),
                          child: Column(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Align(
                                alignment: Alignment.topLeft,
                                child: IconButton(
                                  icon: Icon(Icons.close),
                                  onPressed: () {
                                    Get.back();
                                  },
                                ),
                              ),
                              CommonWidgets.commonText("这是公用底部弹窗", fontSize: font_16, color: CommonColors.primaryColor),
                            ],
                          ),
                        ),
                      ),
                    );
                  },
                ),
              ),
              image != null ? Image.file(File(image!.path)) : Container(),
              CommonWidgets.setPaddingAll(
                margin: margin_20,
                widget: ElevatedButton(
                  onPressed: _pickImage,
                  child: Text("选择图片"),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

说明

  1. 导入必要的包：

    import 'package:agnext_common_library_flutter/agnext_common_library_flutter.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

  2. 初始化ScreenUtil：

    return ScreenUtilInit(
  designSize: const Size(360, 690),
  minTextAdapt: true,
  splitScreenMode: true,
  builder: (_, child) {
    return GetMaterialApp(
      // 应用的主题和其他配置...
    );
  },
);

  3. 创建自定义AppBar：

    appBar: CommonWidgets.customAppBar(
  title: "自定义AppBar",
  actions: [
    CommonWidgets.setPadding(
      rightPadding: margin_20,
      widget: Icon(Icons.favorite, color: CommonColors.white),
    ),
  ],
  appBarBGColor: CommonColors.primaryColor,
  appBarTitleColor: CommonColors.white,
),

  4. 添加文本：

    CommonWidgets.commonText("这是公用的小部件", fontSize: font_16, color: CommonColors.primaryColor),

  5. 添加网络图片：

    CommonWidgets.networkImages(
  "https://fastly.picsum.photos/id/230/200/300.jpg?hmac=pyhlpgJN2oBeEzhJbnJYrCsLoJM6MKd_NUQGIQhVx5k",
  height: height_200,
  width: width_170,
),

  6. 添加底部弹窗：

    CommonBottomSheet.commonBottomSheet(
  body: CommonWidgets.setPaddingAll(
    margin: margin_20,
    widget: Container(
      width: CommonWidgets.fullWidth(context),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Align(
            alignment: Alignment.topLeft,
            child: IconButton(
              icon: Icon(Icons.close),
              onPressed: () {
                Get.back();
              },
            ),
          ),
          CommonWidgets.commonText("这是公用底部弹窗", fontSize: font_16, color: CommonColors.primaryColor),
        ],
      ),
    ),
  ),
);

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

1 回复

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


当然，以下是如何在Flutter项目中集成和使用agnext_common_library_flutter插件的详细步骤，包括相关的代码示例。请注意，具体的方法和类名可能会根据插件的实际版本有所不同，因此请务必参考最新的官方文档。

1. 添加依赖

首先，你需要在你的pubspec.yaml文件中添加对agnext_common_library_flutter的依赖。

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

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

2. 导入插件

在你需要使用该插件的Dart文件中导入它：

import 'package:agnext_common_library_flutter/agnext_common_library_flutter.dart';

3. 初始化插件（如果需要）

某些插件可能需要在应用启动时进行初始化。查阅插件的官方文档以确认是否需要初始化，以及如何进行初始化。以下是一个假设的初始化示例：

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // 假设插件有一个初始化方法
  AgnextCommonLibraryFlutter.instance.initialize();
  runApp(MyApp());
}

4. 使用插件功能

假设agnext_common_library_flutter插件提供了一些通用功能，如网络请求、本地存储等，以下是如何使用这些功能的示例代码。

网络请求示例

Future<void> fetchData() async {
  try {
    // 假设插件有一个网络请求方法
    var response = await AgnextCommonLibraryFlutter.instance.makeNetworkRequest(
      url: 'https://api.example.com/data',
      method: 'GET',
      headers: <String, String>{
        'Content-Type': 'application/json',
      },
    );

    // 处理响应数据
    print('Response data: ${response.data}');
  } catch (e) {
    // 处理错误
    print('Error fetching data: $e');
  }
}

本地存储示例

Future<void> saveToLocalStorage(String key, String value) async {
  try {
    // 假设插件有一个本地存储方法
    await AgnextCommonLibraryFlutter.instance.saveToLocalStorage(key: key, value: value);
    print('Data saved to local storage.');
  } catch (e) {
    // 处理错误
    print('Error saving data: $e');
  }
}

Future<String?> readFromLocalStorage(String key) async {
  try {
    // 假设插件有一个读取本地存储的方法
    var value = await AgnextCommonLibraryFlutter.instance.readFromLocalStorage(key: key);
    return value;
  } catch (e) {
    // 处理错误
    print('Error reading data: $e');
    return null;
  }
}

5. 在UI中使用

你可以将上述功能集成到你的UI组件中，例如按钮点击事件：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Agnext Common Library Flutter Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () async {
                  await fetchData();
                },
                child: Text('Fetch Data'),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () async {
                  await saveToLocalStorage('testKey', 'testValue');
                  var value = await readFromLocalStorage('testKey');
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Read value: $value')),
                  );
                },
                child: Text('Save and Read Data'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

总结

以上代码展示了如何在Flutter项目中集成和使用agnext_common_library_flutter插件。请注意，实际使用时你需要根据插件的API文档调整代码。如果你遇到任何问题，查阅官方文档或插件的GitHub仓库通常会有帮助。

回到顶部