1、Flutter 项目默认升级弹框和自定义升级弹框
注：在pubspec.yaml中添加 插件
#版本更新对话框
flutter_update_dialog: ^1.0.0
代码如下：
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_update_dialog/flutter_update_dialog.dart';
///
/// 版本更新对话框
///
class MyUpdateDialog {
static UpdateDialogdialog;
static doubleprogress =0.0;
///默认样式
static defaultStyle(BuildContext context) {
if (dialog !=null &&dialog.isShowing()) {
return;
}
dialog = UpdateDialog.showUpdate(context,
title:"是否升级到4.1.4版本？",
updateContent:"新版本大小:2.0M\n1.更新UI\n2.更新Bug\n3.增加新功能",
onUpdate:onUpdate);
}
///自定义样式
static customStyle(BuildContext context) {
if (dialog !=null &&dialog.isShowing()) {
return;
}
dialog = UpdateDialog.showUpdate(context,
width:250,
title:"是否升级到4.1.4版本？",
updateContent:"新版本大小:2.0M\n1.更新UI\n2.更新Bug\n3.增加新功能",
titleTextSize:14,
contentTextSize:12,
buttonTextSize:12,
topImage:Image.asset('assets/images/image_top.png'),
extraHeight:5,
radius:8,
themeColor:Color(0xFFFFAC5D),
progressBackgroundColor:Color(0x5AFFAC5D),
isForce:true,
updateButtonText:'升级',
ignoreButtonText:'忽略此版本',
enableIgnore:true, onIgnore: () {
// ToastUtils.waring("忽略");
dialog.dismiss();
}, onUpdate:onUpdate);
}
///更新方法
static onUpdate() {
// ToastUtils.success("开始升级...");
Timer.periodic(Duration(milliseconds:50), (timer) {
progress =progress +0.02;
if (progress >1.0001) {
timer.cancel();
dialog.dismiss();
progress =0;
// ToastUtils.success("升级成功！");
}else {
dialog.update(progress);
}
});
}
}
调用：
///默认版本更新对话弹框
MyUpdateDialog.defaultStyle(context);
///自定义 版本更新对话弹框
MyUpdateDialog.customStyle(context);
2.从底部弹窗
代码如下：
AppTool 工具类
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_app1/module/dialogs/widget/bottom_widget.dart';
import 'package:flutter_app1/module/dialogs/widget/center_dialog.dart';
import 'package:flutter_app1/module/dialogs/widget/define_widget.dart';
import 'package:flutter_app1/module/dialogs/widget/input_dialog.dart';
import 'package:flutter_app1/module/dialogs/widget/style_dialog.dart';
///
/// 自定义弹窗
///
///
class AppTool {
/// 底部弹出2个选项框
showBottomAlert(BuildContext context, confirmCallback, String title,
String option1, String option2) {
showCupertinoModalPopup(
context: context,
builder: (context) {
return BottomCustomAlterWidget(
confirmCallback, title, option1, option2);
});
}
/// 中间弹出提示框
showCenterTipsAlter(
BuildContext context, confirmCallback, String title, String desText) {
showDialog(
context: context,
builder: (BuildContext context) {
return CenterTipsAlterWidget(confirmCallback, title, desText);
});
}
/// 中间弹出输入框
showCenterInputAlert(
BuildContext context, confirmCallback, String title, String placeholder) {
showDialog(
context: context,
builder: (BuildContext context) {
return ShowInputAlertWidget(confirmCallback, title, placeholder);
});
}
///自定义弹框
showStyleAlert(BuildContext context, confirmCallback, String title,
String contentTitle) {
showDialog(
context: context,
builder: (BuildContext context) {
return StyleDialog(confirmCallback, title, contentTitle);
});
}
///只有一个确定按钮的弹窗
showDefineAlert(
BuildContext context, confirmCallback, String title, String hintText) {
showDialog(
context: context,
builder: (BuildContext context) {
return ShowDefineAlertWidget(confirmCallback, title, hintText);
});
}
}
底部弹窗Widget
import 'package:flutter/cupertino.dart';
import 'package:flutter/widgets.dart';
///底部弹框
class BottomCustomAlterWidget extends StatefulWidget {
final confirmCallback;
final title;
final option1;
final option2;
const BottomCustomAlterWidget(this.confirmCallback, this.title, this.option1, this.option2);
@override
_BottomCustomAlterWidgetStatecreateState() =>
_BottomCustomAlterWidgetState();
}
class _BottomCustomAlterWidgetStateextends State {
final controller =TextEditingController();
StringinputValuue ="";
@override
Widgetbuild(BuildContext context) {
return CupertinoActionSheet(
///底部弹出的提示框
title:Text(
widget.title,
style:TextStyle(fontSize:22),
),
actions: [
CupertinoActionSheetAction(
onPressed: () {
Navigator.pop(context);
widget.confirmCallback(widget.option1);
},
child:Text(widget.option1)),
CupertinoActionSheetAction(
onPressed: () {
Navigator.pop(context);
widget.confirmCallback(widget.option2);
},
child:Text(widget.option2)),
],
cancelButton:CupertinoActionSheetAction(
onPressed: () {
Navigator.pop(context);
},
child:Text('取消'),
),
);
}
}
调用：
///从底部弹出弹框
AppTool().showBottomAlert(context, sexConfirmCallback, "请选择性别", '男', '女');
3、警告/提示弹框
警告/弹窗Widget CenterTipsAlterWidget
import 'package:flutter/cupertino.dart';
import 'package:flutter/widgets.dart';
///
/// 提示弹框
///
class CenterTipsAlterWidget extends StatefulWidget {
final confirmCallback;
final title;
final desText;
const CenterTipsAlterWidget(this.confirmCallback, this.title, this.desText);
@override
_CenterTipsAlterWidgetStatecreateState() =>_CenterTipsAlterWidgetState();
}
class _CenterTipsAlterWidgetStateextends State {
@override
Widgetbuild(BuildContext context) {
///警告对话框
return CupertinoAlertDialog(
title:Text(widget.title),
content:Column(
children: [
SizedBox(
height:10,
),
Align(
child:Text(widget.desText),
alignment:Alignment(0, 0),
)
],
),
actions: [
CupertinoDialogAction(
child:Text('取消'),
onPressed: () {
Navigator.pop(context);
},
),
CupertinoDialogAction(
child:Text('确定'),
onPressed: () {
widget.confirmCallback('确定');
Navigator.pop(context);
},
),
],
);
}
}
调用：
///警告，提示对话框
AppTool().showCenterTipsAlter(context, centerConfirmCallback, "这是提示的标题", '这是提示的文本');
4.输入弹框
输入弹框Widget ShowInputAlertWidget
import 'package:flutter/cupertino.dart';
import 'package:flutter/widgets.dart';
///
/// 输入提示框
///
class ShowInputAlertWidget extends StatefulWidget {
final confirmCallback;
final title;
final placeholder;
const ShowInputAlertWidget(this.confirmCallback, this.title, this.placeholder);
@override
_ShowInputAlertWidgetStatecreateState() =>_ShowInputAlertWidgetState();
}
class _ShowInputAlertWidgetStateextends State {
StringinputValue ='';
@override
Widgetbuild(BuildContext context) {
return CupertinoAlertDialog(
title:Text(widget.title),
content:Column(
children: [
CupertinoTextField(
placeholder:widget.placeholder,
onChanged: (value){
inputValue = value;
},
)
],
),
actions: [
CupertinoDialogAction(
child:Text('取消'),
onPressed: (){
Navigator.pop(context);
},
),
CupertinoDialogAction(
child:Text('确定'),
onPressed: (){
widget.confirmCallback(inputValue);
},
)
],
);
}
}
调用：
AppTool().showCenterInputAlert(context, inputConfirmCallback, "请输入昵称", '请输入昵称');
5.自定义弹框
代码如下 自定义弹框 StyleDialog Widget
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
///
/// 自定义弹窗
///
class StyleDialog extends StatefulWidget {
final confirmCallback;
final title;
final contentTitle;
const StyleDialog(this.confirmCallback, this.title,this.contentTitle);
@override
_StyleDialogStatecreateState() =>_StyleDialogState();
}
class _StyleDialogStateextends State {
@override
Widgetbuild(BuildContext context) {
return SimpleDialog(
titlePadding:EdgeInsets.only(top:15, bottom:5),
title:Center(
child:Text(widget.title),
),
backgroundColor: Colors.white,
shape:RoundedRectangleBorder(borderRadius:BorderRadius.circular(10)),
children: [
Divider(
height:1,
),
Container(
alignment: Alignment.center,
height:80,
child:Text(widget.contentTitle,
style:TextStyle(fontSize:17, color: Colors.black)),
),
Container(
child:Row(
children: [
Expanded(
flex:2,
child:FlatButton(
onPressed: (){
Navigator.pop(context);
},
child:Container(
alignment: Alignment.center,
height:50,
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(10),
color: Colors.white,
border:Border.all(color:Color(0xffFF4B38), width:1),
),
child:Text('否',
style:TextStyle(
color:Color(0xffFF4B38), fontSize:17)),
),
),
),
Expanded(
flex:3,
child:FlatButton(
onPressed: (){
widget.confirmCallback('');
Navigator.pop(context);
},
child:Container(
alignment: Alignment.center,
height:50,
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(10),
color:Color(0xffFF4B38),
// border: Border.all(color: Color(0xffFF4B38),width: 1),
),
child:Text('是',
style:TextStyle(color: Colors.white, fontSize:17)),
))
)
],
))
],
);
}
}
调用：
///自定义弹框样式
AppTool().showStyleAlert(context, styleConfirmCallback, "提示",'这里是取消关注的提示语…');
6、只有一个按钮的弹框
代码如下： 只有一个按钮弹框 ShowDefineAlertWidget Widget
import 'package:flutter/material.dart';
class ShowDefineAlertWidget extends StatefulWidget {
final confirmCallback;
final title;
final hintText;
const ShowDefineAlertWidget(this.confirmCallback, this.title, this.hintText);
@override
_ShowDefineAlertWidgetStatecreateState() =>_ShowDefineAlertWidgetState();
}
class _ShowDefineAlertWidgetStateextends State {
@override
Widgetbuild(BuildContext context) {
/// 设置弹框的宽度为屏幕宽度的86%
var _dialogWidth = MediaQuery.of(context).size.width *0.86;
return SimpleDialog(
title:Column(
children: [
Padding(
padding:EdgeInsets.only(bottom:10),
child:Text(widget.title,
style:TextStyle(
color: Colors.black,
fontSize:20,
fontWeight: FontWeight.w100)),
),
Text(widget.hintText,
style:TextStyle(
color: Colors.black,
fontSize:18,
fontWeight: FontWeight.w100)),
],
),
titlePadding:EdgeInsets.fromLTRB(10, 20, 10, 20),
contentPadding: EdgeInsets.zero,
children: [
Divider(
height:1,
),
FlatButton(
onPressed: () {
widget.confirmCallback('');
Navigator.pop(context);
},
child:Container(
width: _dialogWidth,
height:40,
alignment: Alignment.center,
child:Text(
'确定',
style:TextStyle(color: Colors.blue, fontSize:18),
),
)),
],
);
}
}
调用：
AppTool().showDefineAlert(context, defineConfirmCallback, "温馨提示", '登陆已过期，请重新登陆');