flutter_update_dialog 一个漂亮的Flutter版本更新弹窗

迷南。 2022-11-26 07:41 454阅读 0赞

# 前言 #

前段时间我发布了一个只针对Android的版本更新框架[flutter\_xupdate][flutter_xupdate],发布以来收到了大家许多的建议.当时我也只是为了自己方便才写的这么一个插件,并没有考虑很多.  
建议有很多,大致可以分为如下几类:

*  能否支持ios版本更新?
 *  能否支持自定义api?
 *  能否支持自定义版本更新弹窗?
 *  能否开发apk安装能力?

…

看到最后,居然还有人问:能不能给我提供检查版本、弹窗显示、apk下载、apk安装的能力,这样我就可以自己写更新逻辑了…

看来真的是不同的人对版本更新是有不同的需求,我想了一下,与其我提供这么一个较重的原生插件,倒不如直接提供一个使用纯dart编写的版本更新弹窗,然后再提供一个使用dart插件组合编写的版本更新功能使用案例,这样大家就可以参照着案例,根据自己的需求来自己写版本更新逻辑了.

下面话不多说,我给出版本更新弹窗`flutter_update_dialog`的插件地址:

[https://github.com/xuexiangjys/flutter\_update\_dialog][https_github.com_xuexiangjys_flutter_update_dialog]

以及使用它实现的版本更新案例`flutter_app_update_example`:

[https://github.com/xuexiangjys/flutter\_app\_update\_example][https_github.com_xuexiangjys_flutter_app_update_example]

--------------------

# 演示 #

![在这里插入图片描述][20200810234635513.gif]

*  默认样式  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpYW5nanlz_size_16_color_FFFFFF_t_70]
 *  自定义样式  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpYW5nanlz_size_16_color_FFFFFF_t_70 1]

--------------------

# 快速集成指南 #

## 添加引用依赖 ##

在你的flutter项目中的`pubspec.yaml`文件中添加`flutter_update_dialog`依赖.

*  方法一: pub集成

dependencies:
      flutter_update_dialog: ^0.0.1

*  方法二: github集成

dependencies:
      flutter_update_dialog:
        git:
          url: git://github.com/xuexiangjys/flutter_update_dialog.git
          ref: master

## 如何使用 ##

### 默认样式 ###

void defaultStyle() {
        if (dialog != null && dialog.isShowing()) {
          return;
        }
        dialog = UpdateDialog.showUpdate(context,
            title: "是否升级到4.1.4版本？",
            updateContent: "新版本大小:2.0M\n1.xxxxxxx\n2.xxxxxxx\n3.xxxxxxx",
            onUpdate: onUpdate);
      }

### 自定义样式 ###

void customStyle() {
        if (dialog != null && dialog.isShowing()) {
          return;
        }
        dialog = UpdateDialog.showUpdate(context,
            width: 250,
            title: "是否升级到4.1.4版本？",
            updateContent: "新版本大小:2.0M\n1.xxxxxxx\n2.xxxxxxx\n3.xxxxxxx",
            titleTextSize: 14,
            contentTextSize: 12,
            buttonTextSize: 12,
            topImage: Image.asset('assets/bg_update_top.png'),
            extraHeight: 5,
            radius: 8,
            themeColor: Color(0xFFFFAC5D),
            progressBackgroundColor: Color(0x5AFFAC5D),
            isForce: true,
            updateButtonTxt: '升级',
            ignoreButtonTxt: '忽略此版本',
            enableIgnore: true, onIgnore: () {
              ToastUtils.waring("忽略");
              dialog.dismiss();
            },
            onUpdate: onUpdate);
      }

## 属性表 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">Name</th> 
   <th align="center">Type</th> 
   <th align="center">Default</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">width</td> 
   <td align="center">double</td> 
   <td align="center">0.618 * screenWidth</td> 
   <td align="left">弹窗的宽度</td> 
  </tr> 
  <tr> 
   <td align="left">title</td> 
   <td align="center">String</td> 
   <td align="center">/</td> 
   <td align="left">更新标题</td> 
  </tr> 
  <tr> 
   <td align="left">updateContent</td> 
   <td align="center">String</td> 
   <td align="center">/</td> 
   <td align="left">更新内容</td> 
  </tr> 
  <tr> 
   <td align="left">onUpdate</td> 
   <td align="center">VoidCallback</td> 
   <td align="center">/</td> 
   <td align="left">点击更新按钮的回调</td> 
  </tr> 
  <tr> 
   <td align="left">titleTextSize</td> 
   <td align="center">double</td> 
   <td align="center">16.0</td> 
   <td align="left">标题文字大小</td> 
  </tr> 
  <tr> 
   <td align="left">contentTextSize</td> 
   <td align="center">double</td> 
   <td align="center">14.0</td> 
   <td align="left">更新内容文字的大小</td> 
  </tr> 
  <tr> 
   <td align="left">buttonTextSize</td> 
   <td align="center">double</td> 
   <td align="center">14.0</td> 
   <td align="left">按钮文字的大小</td> 
  </tr> 
  <tr> 
   <td align="left">themeColor</td> 
   <td align="center">Color</td> 
   <td align="center">Colors.red</td> 
   <td align="left">主题颜色(按钮、进度条的颜色)</td> 
  </tr> 
  <tr> 
   <td align="left">progressBackgroundColor</td> 
   <td align="center">Color</td> 
   <td align="center">0xFFFFCDD2</td> 
   <td align="left">进度条背景的颜色</td> 
  </tr> 
  <tr> 
   <td align="left">topImage</td> 
   <td align="center">Image</td> 
   <td align="center">/</td> 
   <td align="left">更新弹窗顶部的图片</td> 
  </tr> 
  <tr> 
   <td align="left">extraHeight</td> 
   <td align="center">double</td> 
   <td align="center">5.0</td> 
   <td align="left">距离顶部图片的拓展高度</td> 
  </tr> 
  <tr> 
   <td align="left">radius</td> 
   <td align="center">double</td> 
   <td align="center">4.0</td> 
   <td align="left">弹窗圆角大小</td> 
  </tr> 
  <tr> 
   <td align="left">enableIgnore</td> 
   <td align="center">bool</td> 
   <td align="center">false</td> 
   <td align="left">是否开启忽略版本的按钮</td> 
  </tr> 
  <tr> 
   <td align="left">updateButtonText</td> 
   <td align="center">String</td> 
   <td align="center">‘更新’</td> 
   <td align="left">更新按钮的文字</td> 
  </tr> 
  <tr> 
   <td align="left">ignoreButtonText</td> 
   <td align="center">String</td> 
   <td align="center">‘忽略此版本’</td> 
   <td align="left">忽略按钮的文字</td> 
  </tr> 
  <tr> 
   <td align="left">isForce</td> 
   <td align="center">bool</td> 
   <td align="center">false</td> 
   <td align="left">是否强制更新(是否有关闭的按钮)</td> 
  </tr> 
  <tr> 
   <td align="left">onIgnore</td> 
   <td align="center">VoidCallback</td> 
   <td align="center">/</td> 
   <td align="left">点击忽略按钮的回调</td> 
  </tr> 
 </tbody> 
</table>

--------------------

## 关联链接 ##

*  [XUpdate 的Flutter插件][flutter_xupdate]
 *  [XUpdate 一个轻量级、高可用性的Android版本更新框架][XUpdate _Android]
 *  [XUpdate 使用说明文档][XUpdate]
 *  [XUpdate 后台管理服务][XUpdate 1]
 *  [XUpdate 后台管理系统][XUpdate 2]

## 微信公众号 ##

![在这里插入图片描述][20200211005843306.jpg]

[flutter_xupdate]: https://github.com/xuexiangjys/flutter_xupdate
[https_github.com_xuexiangjys_flutter_update_dialog]: https://github.com/xuexiangjys/flutter_update_dialog
[https_github.com_xuexiangjys_flutter_app_update_example]: https://github.com/xuexiangjys/flutter_app_update_example
[20200810234635513.gif]: /images/20221124/6e1a3b1d3e3e49a897b19117b7c28d82.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpYW5nanlz_size_16_color_FFFFFF_t_70]: /images/20221124/a229b18227694c0cb47a235d4f402baa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpYW5nanlz_size_16_color_FFFFFF_t_70 1]: /images/20221124/57ce354464d94cfc84745b523009e8d7.png
[XUpdate _Android]: https://github.com/xuexiangjys/XUpdate
[XUpdate]: https://github.com/xuexiangjys/XUpdate/wiki
[XUpdate 1]: https://github.com/xuexiangjys/XUpdateService
[XUpdate 2]: https://github.com/xuexiangjys/xupdate-management
[20200211005843306.jpg]: /images/20221124/2248767e554647d68c5ce056f684ba86.png