Flutter应用版本检查插件check_app_version的使用

发布于 1周前 作者 gougou168 来自 Flutter

Flutter应用版本检查插件check_app_version的使用

check_app_version 是一个用于Flutter的应用版本检查插件。它允许你检查设备上安装的应用版本,并与通过JSON文件编译的新版本进行比较。本文将介绍如何在Flutter项目中集成和使用这个插件。

平台支持

该插件支持以下平台:

平台 支持情况
Android ✔️
iOS ✔️
MacOS ✔️
Web ✔️
Linux ✔️
Windows ✔️

关于

该插件通过用户编写的JSON文件获取新版本信息,然后将其与当前安装的版本进行比较。以下是JSON文件的关键字段及其含义:

  • app_name: 应用名称
  • new_app_version: 新应用版本号
  • new_app_code: 新应用代码
  • android_package: Android包名
  • ios_package: iOS bundle identifier
  • windows_package: Windows包名
  • linux_package: Linux包名
  • macos_package: MacOS包名
  • web_package: Web包名
  • ios_app_id: iOS应用ID号

你可以参考这个链接查看示例JSON文件。

安装

导入check_app_version

首先,在你的pubspec.yaml文件中添加依赖项:

dependencies:
  check_app_version: ^latest_version

然后运行flutter pub get命令来安装插件。

使用

导入check_app_version包到你的Dart代码中:

import 'package:check_app_version/app_version_dialog.dart';

接下来,我们可以选择三种方式显示应用版本对话框:AppVersionDialogAppVersionCustomDialogAppVersionOverlayDialog

AppVersionDialog 示例

AppVersionDialog(
  context: context,
  jsonUrl: 'https://besimsoft.com/example.json',
  updateButtonColor: Colors.blue,
  cupertinoDialog: false,
  onPressDecline: () => Navigator.of(context).pop(),
  onPressConfirm: () => Navigator.of(context).pop(),
).show();

AppVersionCustomDialog 示例

AppVersionCustomDialog(
  context: context,
  jsonUrl: 'https://besimsoft.com/example.json',
  dialogBuilder: (BuildContext context) => AlertDialog(
    title: Text('New Version Available'),
    content: Text('A new version of the app is available.'),
    actions: [
      TextButton(
        onPressed: () => Navigator.of(context).pop(),
        child: Text('Update'),
      ),
    ],
  ),
).show();

AppVersionOverlayDialog 示例

AppVersionOverlayDialog(
  context: context,
  jsonUrl: 'https://besimsoft.com/example.json',
  overlayBuilder: (BuildContext context) => Container(
    color: Colors.black.withOpacity(0.5),
    child: Center(
      child: Text('Update Available', style: TextStyle(color: Colors.white)),
    ),
  ),
).show();

自定义对话框

AppVersionDialog 属性

  • jsonUrl: JSON链接(必需)
  • context: 小部件树的上下文(必需)
  • onPressConfirm: 确认按钮按下时执行的函数
  • onPressDecline: 拒绝按钮按下时执行的函数
  • updateButtonText: 更新按钮文本
  • updateButtonColor: 更新按钮颜色
  • laterButtonText: 稍后按钮文本
  • laterButtonColor: 稍后按钮颜色
  • laterButtonEnable: 是否启用稍后按钮(默认为FALSE)

AppVersionCustomDialog 属性

  • jsonUrl: JSON链接(必需)
  • context: 小部件树的上下文(必需)
  • dialogBuilder: 自定义对话框构建器

AppVersionOverlayDialog 属性

  • jsonUrl: JSON链接(必需)
  • context: 小部件树的上下文(必需)
  • overlayBuilder: 自定义覆盖层构建器

示例应用

以下是一个完整的示例应用,展示了如何在Flutter应用中使用check_app_version插件:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Check App Version',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.standard,
      ),
      home: MyHomePage(title: 'Check App Version'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({required this.title});

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    _init();
  }

  _init() async {
    AppVersionDialog(
      context: context,
      jsonUrl: 'https://besimsoft.com/example.json',
      updateButtonColor: Colors.blue,
      cupertinoDialog: false,
      onPressDecline: () => Navigator.of(context).pop(),
      onPressConfirm: () => Navigator.of(context).pop(),
    ).show();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(),
    );
  }
}

以上就是关于check_app_version插件的基本介绍和使用方法。希望这些信息对你有所帮助!


更多关于Flutter应用版本检查插件check_app_version的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter应用版本检查插件check_app_version的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter应用中使用check_app_version插件进行版本检查的代码示例。这个插件允许你检查当前安装的应用版本,并与服务器上的最新版本进行比较。

步骤1:添加依赖

首先,你需要在pubspec.yaml文件中添加check_app_version插件的依赖:

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

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

步骤2:获取应用版本信息

接下来,你需要获取当前应用的版本信息。这可以通过PackageInfo插件来完成,通常check_app_version插件内部也会依赖它。因此,你可能还需要添加package_info依赖:

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

步骤3:实现版本检查逻辑

以下是一个完整的示例代码,展示了如何使用check_app_version插件来检查应用版本:

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: VersionChecker(),
    );
  }
}

class VersionChecker extends StatefulWidget {
  @override
  _VersionCheckerState createState() => _VersionCheckerState();
}

class _VersionCheckerState extends State<VersionChecker> {
  String _localVersion = 'Unknown';
  String _latestVersion = 'Unknown';
  bool _isUpdateAvailable = false;

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

  Future<void> _checkAppVersion() async {
    PackageInfo packageInfo = await PackageInfo.fromPlatform();
    setState(() {
      _localVersion = packageInfo.version;
    });

    // 假设你的服务器有一个API返回最新的版本信息,例如:https://yourserver.com/latest_version.json
    String latestVersionUrl = 'https://yourserver.com/latest_version.json';
    Map<String, dynamic> latestVersionData = await _fetchLatestVersion(latestVersionUrl);
    String latestVersion = latestVersionData['version'];

    setState(() {
      _latestVersion = latestVersion;
      _isUpdateAvailable = _localVersion != latestVersion;
    });

    if (_isUpdateAvailable) {
      _showUpdateDialog();
    }
  }

  Future<Map<String, dynamic>> _fetchLatestVersion(String url) async {
    final response = await http.get(Uri.parse(url));

    if (response.statusCode == 200) {
      return jsonDecode(response.body);
    } else {
      throw Exception('Failed to load latest version data');
    }
  }

  void _showUpdateDialog() {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('Update Available'),
          content: Text('A new version of the app ($_latestVersion) is available. Please update.'),
          actions: <Widget>[
            FlatButton(
              child: Text('OK'),
              onPressed: () {
                // 可以在这里添加打开应用商店的代码,例如使用url_launcher插件
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Version Checker'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Local Version: $_localVersion'),
            SizedBox(height: 20),
            Text('Latest Version: $_latestVersion'),
            SizedBox(height: 20),
            if (_isUpdateAvailable)
              Text(
                'Update Available!',
                style: TextStyle(color: Colors.red),
              ),
          ],
        ),
      ),
    );
  }
}

注意事项

  1. API端点:在上面的代码中,latestVersionUrl是你的服务器返回最新版本信息的API端点。你需要替换为实际的URL。
  2. 权限:确保你的应用有访问网络的权限(在AndroidManifest.xmlInfo.plist中配置)。
  3. 错误处理:上面的代码没有详细的错误处理逻辑,你可以根据需求添加更多的错误处理,例如网络错误、JSON解析错误等。
  4. 应用商店跳转:上面的_showUpdateDialog方法只是显示了一个对话框,你可以使用url_launcher插件来跳转到应用商店下载更新。

希望这个示例能帮你更好地理解和使用check_app_version插件进行版本检查。

回到顶部