当前位置: 移动技术网 > IT编程>移动开发>Android > Flutter之自定义Dialog实现版本更新弹窗功能的实现

Flutter之自定义Dialog实现版本更新弹窗功能的实现

2020年08月17日  | 移动技术网IT编程  | 我要评论
功能点:1.更新弹窗ui2.强更与非强更且别控制3.屏蔽物理返回键(因为强更的时候点击返回键,弹窗会消失)4.点击弹窗外透明区域时,弹窗不消失先看下效果图:dialog实现代码:import 'pac

功能点:

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

到此这篇关于flutter之自定义dialog实现版本更新弹窗功能的实现的文章就介绍到这了,更多相关flutter自定义dialog弹窗内容请搜索移动技术网以前的文章或继续浏览下面的相关文章希望大家以后多多支持移动技术网!

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网