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

更新時間：2020年07月24日 08:54:47 作者：管管

這篇文章主要介紹了Flutter之自定義Dialog實現版本更新彈窗功能的實現,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

功能點：

1.更新彈窗UI

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

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

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

先看下效果圖：

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('發(fā)現新版本',
       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.優(yōu)化用戶體驗', false);
  }else if(Platform.isIOS){
  //iOS平臺跳轉道AppStore進行更新
  }
 }
 }

重點說明：

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

barrierDismissible: false,

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

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

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

到此這篇關于Flutter之自定義Dialog實現版本更新彈窗功能的實現的文章就介紹到這了,更多相關Flutter自定義Dialog彈窗內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Android實現弧形菜單效果
本文主要介紹了Android實現弧形菜單效果的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧
2017-03-03
Android實現視圖輪播效果
這篇文章主要為大家詳細介紹了Android實現視圖輪播效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
flutter仿微信底部圖標漸變功能的實現代碼
這篇文章主要介紹了flutter仿微信底部圖標漸變功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-04-04
Android性能優(yōu)化之plt?hook與native線程監(jiān)控詳解
這篇文章主要為大家介紹了Android性能優(yōu)化之plt?hook與native線程監(jiān)控詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-09-09
淺析Android中常見三種彈框在項目中的應用
這篇文章主要介紹了淺析Android中常見三種彈框在項目中的應用,需要的朋友可以參考下
2017-03-03
android中RecyclerView懸浮吸頂效果
本篇文章主要介紹了android中RecyclerView懸浮吸頂效果，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06
Flutter 實現下拉刷新上拉加載的示例代碼
這篇文章主要介紹了Flutter 實現下拉刷新上拉加載的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-12-12
Android編程實現圖標拖動效果的方法
這篇文章主要介紹了Android編程實現圖標拖動效果的方法,涉及Android事件響應及圖標變換的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-11-11
Android相機管理工具類
這篇文章主要為大家詳細介紹了Android相機管理工具類，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
Android LocationManager獲取經度與緯度等地理信息
這篇文章主要介紹了Android LocationManager獲取經度與緯度等地理信息的相關資料,希望通過本站大家能掌握這樣的知識，需要的朋友可以參考下
2017-09-09