1. 程式人生 > 程式設計 >Flutter之自定義Dialog實現版本更新彈窗功能的實現

Flutter之自定義Dialog實現版本更新彈窗功能的實現

功能點:

1.更新彈窗UI

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

3.遮蔽物理返回鍵(因為強更的時候點選返回鍵,彈窗會消失)

4.點選彈窗外透明區域時,彈窗不消失

先看下效果圖:

Flutter之自定義Dialog實現版本更新彈窗功能的實現

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,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',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,onWillPop: _onWillPop);

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

到此這篇關於Flutter之自定義Dialog實現版本更新彈窗功能的實現的文章就介紹到這了,更多相關Flutter自定義Dialog彈窗內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!