1. 程式人生 > 實用技巧 >Flutter學習筆記(41)--自定義Dialog實現版本更新彈窗

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;
  }