Flutter 彈框6種

1、Flutter 項(xiàng)目默認(rèn)升級(jí)彈框和自定義升級(jí)彈框

注：在pubspec.yaml中添加 插件

#版本更新對(duì)話框

flutter_update_dialog: ^1.0.0

代碼如下：

import 'dart:async';

import 'package:flutter/material.dart';

import 'package:flutter_update_dialog/flutter_update_dialog.dart';

///

/// 版本更新對(duì)話框

///

class MyUpdateDialog {

static UpdateDialogdialog;

static doubleprogress =0.0;

? ///默認(rèn)樣式

? static defaultStyle(BuildContext context) {

????if (dialog !=null &&dialog.isShowing()) {

????????return;

? ? }

? dialog = UpdateDialog.showUpdate(context,

? ? ? ? title:"是否升級(jí)到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:"是否升級(jí)到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:'升級(jí)',

? ? ? ? ignoreButtonText:'忽略此版本',

? ? ? ? enableIgnore:true, onIgnore: () {

????????// ToastUtils.waring("忽略");

? ? ? ????dialog.dismiss();

? ? }, onUpdate:onUpdate);

? }

///更新方法

? static onUpdate() {

????// ToastUtils.success("開始升級(jí)...");

? ? Timer.periodic(Duration(milliseconds:50), (timer) {

? ? ? progress =progress +0.02;

? ? ? if (progress >1.0001) {

????????timer.cancel();

? ? ? ? dialog.dismiss();

? ? ? ? progress =0;

? ? ? ? // ToastUtils.success("升級(jí)成功！");

? ? ? }else {

????????dialog.update(progress);

? ? ? }

});

? }

}


調(diào)用：

///默認(rèn)版本更新對(duì)話彈框

MyUpdateDialog.defaultStyle(context);

///自定義 版本更新對(duì)話彈框

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個(gè)選項(xiàng)框

? 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);

? ? ? ? });

? }

///只有一個(gè)確定按鈕的彈窗

? 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('取消'),

? ? ? ),

? ? );

? }

}

調(diào)用：

///從底部彈出彈框

AppTool().showBottomAlert(context, sexConfirmCallback, "請(qǐng)選擇性別", '男', '女');


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) {

///警告對(duì)話框

? ? 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);

? ? ? ? ? },

? ? ? ? ),

? ? ? ],

? ? );

? }

}

調(diào)用：

///警告，提示對(duì)話框

AppTool().showCenterTipsAlter(context, centerConfirmCallback, "這是提示的標(biāo)題", '這是提示的文本');


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

? ? ? ? ? },

? ? ? ? )

????],

? ? );

? }

}

調(diào)用：

AppTool().showCenterInputAlert(context, inputConfirmCallback, "請(qǐng)輸入昵稱", '請(qǐng)輸入昵稱');


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)),

? ? ? ? ? ? ? ? ? ? ? ? ))

????????)

????],

? ?))

],

? ? );

? }

}

調(diào)用：

///自定義彈框樣式

AppTool().showStyleAlert(context, styleConfirmCallback, "提示",'這里是取消關(guān)注的提示語…');

6、只有一個(gè)按鈕的彈框

代碼如下： 只有一個(gè)按鈕彈框? ?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) {

????/// 設(shè)置彈框的寬度為屏幕寬度的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),

? ? ? ? ? ? ? ),

? ? ? ? ? ? )),

? ? ? ],

? ? );

? }

}

調(diào)用：

AppTool().showDefineAlert(context, defineConfirmCallback, "溫馨提示", '登陸已過期，請(qǐng)重新登陸');

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容