Flutter图像缩放插件gr_zoom的使用

Flutter图像缩放插件gr_zoom的使用

插件介绍

gr_zoom 是一个用于Flutter的图像缩放插件,它可以帮助开发者在应用中实现图像放大和缩小的功能。该插件支持Android和iOS平台,并且需要根据平台进行相应的配置。

安装插件

  1. 从pub.dev安装
    flutter pub run gr_zoom:unzip_zoom_sdk
    
  2. 从GitHub安装
    gr_zoom:
      git:
        url: git@github.com:25LucasAnselmo/gr_zoom.git
        ref: main
    
    然后运行以下命令:
    flutter pub run gr_zoom:unzip_zoom_sdk
    

iOS配置

  • ios/Runner/Info.plist中添加两行:

    • NSCameraUsageDescriptionNSMicrophoneUsageDescription
  • 或者在XML格式中添加这两行:

    <key>NSCameraUsageDescription</key>
    <string>Need to use the camera for call</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>Need to use the microphone for call</string>
    
  • ios/Podfile中禁用BITCODE

    post_install do |installer|
      installer.pods_project.targets.each do |target|
        flutter_additional_ios_build_settings(target)
        if target.name == "gr_zoom"
          puts("Found target membership zoom.")
          all_filerefs = installer.pods_project.files
          all_filerefs.each do |fileref|
            if fileref.path.end_with? "MobileRTC.xcframework"
              puts("Found MobileRTC.xcframework fileref.")
              build_phase = target.frameworks_build_phase
              puts("Determining if zoom build phase needs correction.")
              unless build_phase.files_references.include?(fileref)
                puts("Adding MobileRTC.xcframework to zoom target")
                build_phase.add_file_reference(fileref)
              end
            end
          end
          installer.pods_project.build_configurations.each do |config|
            config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"
          end
        end
        target.build_configurations.each do |config|
          config.build_settings['ENABLE_BITCODE'] = 'NO'
        end
      end
    end
    
  • 测试iOS模拟器时需确保已将iOS Dev Zoom SDK作为依赖项。

    flutter pub run gr_zoom:unzip_zoom_sdk dev
    

    要切换回正常Zoom SDK,请运行:

    flutter pub run gr_zoom:unzip_zoom_sdk
    

Android配置

  • 将最小Android SDK版本更改为至少24(21)。
    minSdkVersion 24
    
  • android/app/build.gradle中禁用shrinkResources为发布构建
    buildTypes {
      release {
        // TODO: Add your own signing config for the release build.
        // Signing with the debug keys for now, so `flutter run --release` works.
        signingConfig signingConfigs.debug
        shrinkResources false 
        minifyEnabled false
      }
    }
    

示例代码

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

import 'package:flutter/services.dart';
import 'package:gr_zoom/gr_zoom.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';
  final _grZoomPlugin = Zoom();

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

  Future<void> initPlatformState() async {
    String platformVersion;
    try {
      platformVersion =
          await _grZoomPlugin.getPlatformVersion() ?? 'Unknown platform version';
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }

    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Text('Running on: $_platformVersion\n'),
        ),
      ),
    );
  }
}

使用示例

  1. 创建SDK App JWT Token

    • 创建SDK Key&Secret
    • 生成JWT Token
    • 替换zoom/example/lib/join_screen.dart中的your jwtToken
  2. 使用JWT Token

ZoomOptions zoomOptions = new ZoomOptions(
  domain: "zoom.us",
  jwtToken: "your jwtToken (SDK Key + SDK Secret) or (Client ID + Client Secret)",
);

更多关于Flutter图像缩放插件gr_zoom的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter图像缩放插件gr_zoom的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,关于Flutter中的图像缩放插件gr_zoom的使用,下面是一个基本的示例代码,展示如何在Flutter应用中集成和使用这个插件来实现图像的缩放功能。

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

dependencies:
  flutter:
    sdk: flutter
  gr_zoom: ^x.y.z  # 请替换为最新版本号

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

接下来,在你的Flutter项目中,你可以使用GrZoomWidget来包裹你想要缩放的图像。以下是一个完整的示例代码:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Image Zoom Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ImageZoomPage(),
    );
  }
}

class ImageZoomPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Zoom Example'),
      ),
      body: Center(
        child: GrZoomWidget(
          // 替换为你的图像URL或Asset路径
          image: NetworkImage('https://example.com/your-image.jpg'),
          // 如果是本地资源,可以使用 AssetImage('assets/your_image.jpg')
          zoomFactor: 1.0, // 初始缩放比例
          minZoom: 1.0, // 最小缩放比例
          maxZoom: 3.0, // 最大缩放比例
          onLoadFinished: () {
            print('Image loaded');
          },
          onError: (error, stackTrace) {
            print('Image load error: $error');
          },
        ),
      ),
    );
  }
}

在这个示例中:

  1. GrZoomWidget用于包裹图像,并提供了缩放功能。
  2. image属性接受一个ImageProvider,可以是网络图片(如NetworkImage)或本地资源图片(如AssetImage)。
  3. zoomFactor属性设置了初始缩放比例。
  4. minZoommaxZoom属性分别设置了缩放的最小和最大比例。
  5. onLoadFinished是一个回调函数,当图像加载完成时调用。
  6. onError是一个错误处理回调函数,当图像加载出错时调用。

这个示例展示了如何基本使用gr_zoom插件来实现图像的缩放功能。根据你的具体需求,你可以进一步自定义和扩展这个示例。

回到顶部