Flutter學習筆記（41）--自定義Dialog實現版本更新彈窗

如需轉載，請註明出處：Flutter學習筆記（41）--自定義Dialog實現版本更新彈窗

功能點：

1.更新彈窗UI

2.強更與非強更且別控制

3.屏蔽物理返回鍵（由於強更的時候點擊返回鍵，彈窗會消失）

4.點擊彈窗外透明區域時，彈窗不消失

先看下效果圖：

 

Dialog實現代碼：

import 'package:flutter/material.dart';
import 'package:xiaopijiang/utils/assets_util.dart';
import 'package:xiaopijiang/utils/toast_util.dart';

///created by WGH
///on 2020/7/23
///description:版本更新提示彈窗
class UpdateDialog extends Dialog {
  final String upDateContent;
  final bool isForce;

  UpdateDialog({this.upDateContent, this.isForce});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            width: 319,
            height: 370,
            child: Stack(
              children: <Widget>[
                Image.asset(
                  AssetsUtil.getImagePath(
                      imageName: 'bg_update', suffix: 'png'),
                  fit: BoxFit.cover,
                ),
                Container(
                  width: double.infinity,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Container(
                        margin: EdgeInsets.only(top: 110),
                        child: Text('發現新版本',
                            style: TextStyle(
                                fontSize: 20,
                                color: Colors.white,
                                decoration: TextDecoration.none)),
                      ),
                      Text(upDateContent,
                          style: TextStyle(
                              fontSize: 16,
                              color: Colors.black54,
                              decoration: TextDecoration.none)),
                      Container(
                        width: 250,
                        height: 42,
                        margin: EdgeInsets.only(bottom: 15),
                        child: RaisedButton(
                            color: Colors.red,
                            shape: StadiumBorder(),
                            child: Text(
                              '當即更新',
                              style:
                                  TextStyle(fontSize: 20, color: Colors.white),
                            ),
                            onPressed: () {
                              ToastUtil.showTips('下載apk');
                            }),
                      )
                    ],
                  ),
                ),
              ],
            ),
          ),
          GestureDetector(
            onTap: () {
              Navigator.pop(context);
            },
            child: Offstage(
              offstage: isForce,
              child: Container(
                  margin: EdgeInsets.only(top: 30),
                  child: Image.asset(
                    AssetsUtil.getImagePath(
                        imageName: 'ic_update_close', suffix: 'png'),
                    width: 35,
                    height: 35,
                  )),
            ),
          )
        ],
      ),
    );
  }

  static showUpdateDialog(
      BuildContext context, String mUpdateContent, bool mIsForce) {
    return showDialog(
        barrierDismissible: false,
        context: context,
        builder: (BuildContext context) {
          return WillPopScope(
              child: UpdateDialog(
                  upDateContent: mUpdateContent, isForce: mIsForce),onWillPop: _onWillPop);
        });
  }

  static Future<bool> _onWillPop() async{
    return false;
  }
}

調用Dialog：

  _checkUpdate() async{
    int serviceVersionCode = 101;
    PackageInfo packageInfo = await PackageInfo.fromPlatform();
    //獲取當前的版本號
    int currentVersionCode = int.parse(packageInfo.version.replaceAll('.', ''));
    //若是獲取服務器的版本號比當前應用程序的版本號還高，那麼提示升級
    if (serviceVersionCode > currentVersionCode) {
      if(Platform.isAndroid){
        //Android平臺在應用內進行更新
        //彈出"版本更新"的對話框
        UpdateDialog.showUpdateDialog(context, '1.修復已知bug\n2.優化用戶體驗', false);
      }else if(Platform.isIOS){
        //iOS平臺跳轉道AppStore進行更新
      }
    }
  }

重點說明：

屏蔽物理返回鍵（由於強更的時候點擊返回鍵，彈窗會消失）

 

barrierDismissible: false,

 

4.點擊彈窗外透明區域時，彈窗不消失

 

          return WillPopScope(
              child: UpdateDialog(
                  upDateContent: mUpdateContent, isForce: mIsForce),
              onWillPop: _onWillPop);

  static Future<bool> _onWillPop() async {
    return false;
  }