Flutter 弹框6种

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, "温馨提示", '登陆已过期，请重新登陆');