flutter开发实战-可扩展popup弹窗template模版样式

2024-02-05 15:04
文章标签 实战 开发 扩展 样式 template flutter 模版 弹窗 popup

本文主要是介绍flutter开发实战-可扩展popup弹窗template模版样式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

flutter开发实战-可扩展popup弹窗template模版样式

最近在看到一个flutter_beautiful_popup，可以美化弹窗窗口样式。该插件通过一个template模版的类BeautifulPopupTemplate作为抽象的base类。
在这里插入图片描述

一、基类BeautifulPopupTemplate

在BeautifulPopupTemplate中，BeautifulPopupTemplate为抽象类。该类定义了get方法size、width、height、maxWidth、maxHeight、bodyMargin、illustrationPath、primaryColor、close、background、title、content、actions、button。

在一个popup中一般有标题title、内容content、操作的按钮、关闭按钮等，所以这个BeautifulPopupTemplate定义了这些内容。
BeautifulPopupTemplate需要传递一个BeautifulPopup，该类中包括了BeautifulPopupTemplate需要的context、_illustration等。

BeautifulPopupTemplate代码如下

import 'package:flutter/material.dart';
import '../flutter_component_beautiful_popup.dart';
import 'dart:ui' as ui;
import 'package:auto_size_text/auto_size_text.dart';typedef Widget BeautifulPopupButton({required String label,required void Function() onPressed,TextStyle labelStyle,bool outline,bool flat,
});/// You can extend this class to custom your own template.
abstract class BeautifulPopupTemplate extends StatefulWidget {final BeautifulPopup options;BeautifulPopupTemplate(this.options);final State<StatefulWidget> state = BeautifulPopupTemplateState();@overrideState<StatefulWidget> createState() => state;Size get size {double screenWidth = MediaQuery.of(options.context).size.width;double screenHeight = MediaQuery.of(options.context).size.height;double height = screenHeight > maxHeight ? maxHeight : screenHeight;double width;height = height - bodyMargin * 2;if ((screenHeight - height) < 140) {// For keep close button visibleheight = screenHeight - 140;width = height / maxHeight * maxWidth;} else {if (screenWidth > maxWidth) {width = maxWidth - bodyMargin * 2;} else {width = screenWidth - bodyMargin * 2;}height = width / maxWidth * maxHeight;}return Size(width, height);}double get width => size.width;double get height => size.height;double get maxWidth;double get maxHeight;double get bodyMargin;/// The path of the illustration asset.String get illustrationPath => '';String get illustrationKey =>'packages/flutter_component_beautiful_popup/$illustrationPath';Color get primaryColor;double percentW(double n) {return width * n / 100;}double percentH(double n) {return height * n / 100;}Widget get close {return MaterialButton(shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(100)),splashColor: Colors.transparent,hoverColor: Colors.transparent,minWidth: 45,height: 45,child: Container(padding: EdgeInsets.all(20),child: Icon(Icons.close, color: Colors.white70, size: 26),),padding: EdgeInsets.all(0),onPressed: Navigator.of(options.context).pop,);}Widget get background {final illustration = options.illustration;return illustration == null? Image.asset(illustrationKey,width: percentW(100),height: percentH(100),fit: BoxFit.fill,): CustomPaint(size: Size(percentW(100), percentH(100)),painter: ImageEditor(image: illustration,),);}Widget get title {if (options.title is Widget) {return Container(width: percentW(100),height: percentH(10),alignment: Alignment.center,child: options.title,);}return Container(alignment: Alignment.center,width: percentW(100),height: percentH(10),child: Opacity(opacity: 0.95,child: AutoSizeText(options.title,maxLines: 1,style: TextStyle(fontSize: Theme.of(options.context).textTheme.headline6?.fontSize,color: primaryColor,fontWeight: FontWeight.bold,),),),);}Widget get content {return options.content is String? AutoSizeText(options.content,minFontSize: 10,style: TextStyle(color: Colors.black87,),): options.content;}Widget? get actions {final actionsList = options.actions;if (actionsList == null || actionsList.length == 0) return null;return Flex(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,mainAxisSize: MainAxisSize.max,direction: Axis.horizontal,children: actionsList.map((button) => Flexible(flex: 1,child: Padding(padding: EdgeInsets.symmetric(horizontal: 5),child: button,),),).toList(),);}BeautifulPopupButton get button {return ({required String label,required void Function() onPressed,bool outline = false,bool flat = false,TextStyle labelStyle = const TextStyle(),}) {final gradient = LinearGradient(colors: [primaryColor.withOpacity(0.5),primaryColor,]);final double elevation = (outline || flat) ? 0 : 2;final labelColor =(outline || flat) ? primaryColor : Colors.white.withOpacity(0.95);final decoration = BoxDecoration(gradient: (outline || flat) ? null : gradient,borderRadius: BorderRadius.all(Radius.circular(80.0)),border: Border.all(color: outline ? primaryColor : Colors.transparent,width: (outline && !flat) ? 1 : 0,),);final minHeight = 40.0 - (outline ? 2 : 0);return ElevatedButton(// color: Colors.transparent,// elevation: elevation,// highlightElevation: 0,// splashColor: Colors.transparent,child: Ink(decoration: decoration,child: Container(constraints: BoxConstraints(minWidth: 100,minHeight: minHeight,),alignment: Alignment.center,child: Text(label,style: TextStyle(color: labelColor,).merge(labelStyle),),),),// padding: EdgeInsets.all(0),// shape: RoundedRectangleBorder(//   borderRadius: BorderRadius.circular(50),// ),onPressed: onPressed,);};}List<Positioned> get layout;
}class BeautifulPopupTemplateState extends State<BeautifulPopupTemplate> {OverlayEntry? closeEntry;@overridevoid initState() {super.initState();// Display close buttonFuture.delayed(Duration.zero, () {closeEntry = OverlayEntry(builder: (ctx) {final bottom = (MediaQuery.of(context).size.height -widget.height -widget.bodyMargin * 2) /4 -20;return Stack(// overflow: Overflow.visible,clipBehavior: Clip.none,children: <Widget>[Positioned(child: Container(alignment: Alignment.center,child: widget.options.close ?? Container(),),left: 0,right: 0,bottom: bottom,)],);},);final entry = closeEntry;if (entry != null) Overlay.of(context)?.insert(entry);});}@overrideWidget build(BuildContext context) {return Column(mainAxisSize: MainAxisSize.min,mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Material(color: Colors.transparent,child: Container(margin: EdgeInsets.all(widget.bodyMargin),height: widget.height,width: widget.width,child: Stack(// overflow: Overflow.visible,clipBehavior: Clip.none,children: widget.layout,),),)],);}@overridevoid dispose() {closeEntry?.remove();super.dispose();}
}class ImageEditor extends CustomPainter {ui.Image image;ImageEditor({required this.image,});@overridevoid paint(Canvas canvas, Size size) {canvas.drawImageRect(image,Rect.fromLTRB(0, 0, image.width.toDouble(), image.height.toDouble()),Rect.fromLTRB(0, 0, size.width, size.height),new Paint(),);}@overridebool shouldRepaint(CustomPainter oldDelegate) => false;
}

二、BeautifulPopup

该类中包括了BeautifulPopupTemplate需要的context、_illustration等。

library flutter_component_beautiful_popup;import 'dart:typed_data';import 'package:flutter/material.dart';
import 'dart:ui' as ui;
import 'package:image/image.dart' as img;
import 'package:flutter/services.dart';
import 'templates/Common.dart';
import 'templates/OrangeRocket.dart';
import 'templates/GreenRocket.dart';
import 'templates/OrangeRocket2.dart';
import 'templates/Coin.dart';
import 'templates/BlueRocket.dart';
import 'templates/Thumb.dart';
import 'templates/Gift.dart';
import 'templates/Camera.dart';
import 'templates/Notification.dart';
import 'templates/Geolocation.dart';
import 'templates/Success.dart';
import 'templates/Fail.dart';
import 'templates/Authentication.dart';
import 'templates/Term.dart';
import 'templates/RedPacket.dart';export 'templates/Common.dart';
export 'templates/OrangeRocket.dart';
export 'templates/GreenRocket.dart';
export 'templates/OrangeRocket2.dart';
export 'templates/Coin.dart';
export 'templates/BlueRocket.dart';
export 'templates/Thumb.dart';
export 'templates/Gift.dart';
export 'templates/Camera.dart';
export 'templates/Notification.dart';
export 'templates/Geolocation.dart';
export 'templates/Success.dart';
export 'templates/Fail.dart';
export 'templates/Authentication.dart';
export 'templates/Term.dart';
export 'templates/RedPacket.dart';class BeautifulPopup {BuildContext _context;BuildContext get context => _context;Type? _template;Type? get template => _template;BeautifulPopupTemplate Function(BeautifulPopup options)? _build;BeautifulPopupTemplate get instance {final build = _build;if (build != null) return build(this);switch (template) {case TemplateOrangeRocket:return TemplateOrangeRocket(this);case TemplateGreenRocket:return TemplateGreenRocket(this);case TemplateOrangeRocket2:return TemplateOrangeRocket2(this);case TemplateCoin:return TemplateCoin(this);case TemplateBlueRocket:return TemplateBlueRocket(this);case TemplateThumb:return TemplateThumb(this);case TemplateGift:return TemplateGift(this);case TemplateCamera:return TemplateCamera(this);case TemplateNotification:return TemplateNotification(this);case TemplateGeolocation:return TemplateGeolocation(this);case TemplateSuccess:return TemplateSuccess(this);case TemplateFail:return TemplateFail(this);case TemplateAuthentication:return TemplateAuthentication(this);case TemplateTerm:return TemplateTerm(this);case TemplateRedPacket:default:return TemplateRedPacket(this);}}ui.Image? _illustration;ui.Image? get illustration => _illustration;dynamic title = '';dynamic content = '';List<Widget>? actions;Widget? close;bool? barrierDismissible;Color? primaryColor;BeautifulPopup({required BuildContext context,required Type? template,})   : _context = context,_template = template {primaryColor = instance.primaryColor; // Get the default primary color.}static BeautifulPopup customize({required BuildContext context,required BeautifulPopupTemplate Function(BeautifulPopup options) build,}) {final popup = BeautifulPopup(context: context,template: null,);popup._build = build;return popup;}/// Recolor the BeautifulPopup./// This method is  kind of slow.RFuture<BeautifulPopup> recolor(Color color) async {this.primaryColor = color;final illustrationData = await rootBundle.load(instance.illustrationKey);final buffer = illustrationData.buffer.asUint8List();img.Image? asset;asset = img.readPng(buffer);if (asset != null) {img.adjustColor(asset,saturation: 0,// hue: 0,);img.colorOffset(asset,red: color.red,// I don't know why the effect is nicer with the number ╮(╯▽╰)╭green: color.green ~/ 3,blue: color.blue ~/ 2,alpha: 0,);}final paint = await PaintingBinding.instance?.instantiateImageCodec(asset != null ? Uint8List.fromList(img.encodePng(asset)) : buffer);final nextFrame = await paint?.getNextFrame();_illustration = nextFrame?.image;return this;}/// `title`: Must be a `String` or `Widget`. Defaults to `''`.////// `content`: Must be a `String` or `Widget`. Defaults to `''`.////// `actions`: The set of actions that are displaed at bottom of the dialog,//////  Typically this is a list of [BeautifulPopup.button]. Defaults to `[]`.////// `barrierDismissible`: Determine whether this dialog can be dismissed. Default to `False`.////// `close`: Close widget.Future<T?> show<T>({dynamic title,dynamic content,List<Widget>? actions,bool barrierDismissible = false,Widget? close,}) {this.title = title;this.content = content;this.actions = actions;this.barrierDismissible = barrierDismissible;this.close = close ?? instance.close;final child = WillPopScope(onWillPop: () {return Future.value(barrierDismissible);},child: instance,);return showGeneralDialog<T>(barrierColor: Colors.black38,barrierDismissible: barrierDismissible,barrierLabel: barrierDismissible ? 'beautiful_popup' : null,context: context,pageBuilder: (context, animation1, animation2) {return child;},transitionDuration: Duration(milliseconds: 150),transitionBuilder: (ctx, a1, a2, child) {return Transform.scale(scale: a1.value,child: Opacity(opacity: a1.value,child: child,),);},);}BeautifulPopupButton get button => instance.button;
}

三、根据需要继承BeautifulPopupTemplate

根据需要指定弹窗的样式，例如TemplateGift继承了BeautifulPopupTemplate
重写了button、layout、等方法

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'Common.dart';
import '../flutter_component_beautiful_popup.dart';/// ![](https://raw.githubusercontent.com/jaweii/Flutter_beautiful_popup/master/img/bg/gift.png)
class TemplateGift extends BeautifulPopupTemplate {final BeautifulPopup options;TemplateGift(this.options) : super(options);@overridefinal illustrationPath = 'img/bg/gift.png';@overrideColor get primaryColor => options.primaryColor ?? Color(0xffFF2F49);@overridefinal maxWidth = 400;@overridefinal maxHeight = 580;@overridefinal bodyMargin = 30;@overrideBeautifulPopupButton get button {return ({required String label,required void Function() onPressed,bool outline = false,bool flat = false,TextStyle labelStyle = const TextStyle(),}) {final gradient = LinearGradient(colors: [primaryColor.withOpacity(0.5),primaryColor,]);final double elevation = (outline || flat) ? 0 : 2;final labelColor =(outline || flat) ? primaryColor : Colors.white.withOpacity(0.95);final decoration = BoxDecoration(gradient: (outline || flat) ? null : gradient,borderRadius: BorderRadius.all(Radius.circular(80.0)),border: Border.all(color: outline ? primaryColor : Colors.transparent,width: (outline && !flat) ? 1 : 0,),);final minHeight = 40.0 - (outline ? 4 : 0);return ElevatedButton(// color: Colors.transparent,// elevation: elevation,// highlightElevation: 0,// splashColor: Colors.transparent,child: Ink(decoration: decoration,child: Container(constraints: BoxConstraints(minWidth: 100,minHeight: minHeight,),alignment: Alignment.center,child: Text(label,style: TextStyle(color: Colors.white.withOpacity(0.95),fontWeight: FontWeight.bold,).merge(labelStyle),),),),// padding: EdgeInsets.all(0),// shape: RoundedRectangleBorder(//   borderRadius: BorderRadius.circular(50),// ),onPressed: onPressed,);};}@overrideget layout {return [Positioned(child: background,),Positioned(top: percentH(26),child: title,),Positioned(top: percentH(36),left: percentW(5),right: percentW(5),height: percentH(actions == null ? 60 : 50),child: content,),Positioned(bottom: percentW(5),left: percentW(5),right: percentW(5),child: actions ?? Container(),),];}
}

四、调用显示弹窗

调用显示弹窗使用的showGeneralDialog，弹出弹窗代码如下

/// `title`: Must be a `String` or `Widget`. Defaults to `''`.////// `content`: Must be a `String` or `Widget`. Defaults to `''`.////// `actions`: The set of actions that are displaed at bottom of the dialog,//////  Typically this is a list of [BeautifulPopup.button]. Defaults to `[]`.////// `barrierDismissible`: Determine whether this dialog can be dismissed. Default to `False`.////// `close`: Close widget.Future<T?> show<T>({dynamic title,dynamic content,List<Widget>? actions,bool barrierDismissible = false,Widget? close,}) {this.title = title;this.content = content;this.actions = actions;this.barrierDismissible = barrierDismissible;this.close = close ?? instance.close;final child = WillPopScope(onWillPop: () {return Future.value(barrierDismissible);},child: instance,);return showGeneralDialog<T>(barrierColor: Colors.black38,barrierDismissible: barrierDismissible,barrierLabel: barrierDismissible ? 'beautiful_popup' : null,context: context,pageBuilder: (context, animation1, animation2) {return child;},transitionDuration: Duration(milliseconds: 150),transitionBuilder: (ctx, a1, a2, child) {return Transform.scale(scale: a1.value,child: Opacity(opacity: a1.value,child: child,),);},);}

这里看到源码后，觉得格式结构很好。可以参考将flutter_beautiful_popup下载后看下源码。地址：https://pub-web.flutter-io.cn/packages/flutter_beautiful_popup

五、小结

flutter开发实战-可扩展popup弹窗template模版样式

学习记录，每天不停进步。

这篇关于flutter开发实战-可扩展popup弹窗template模版样式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/681291。

相关文章

PostgreSQL的扩展dict_int应用案例解析

PostgreSQL的扩展dict_int应用案例解析

《PostgreSQL的扩展dict_int应用案例解析》dict_int扩展为PostgreSQL提供了专业的整数文本处理能力,特别适合需要精确处理数字内容的搜索场景,本文给大家介绍PostgreS... 目录PostgreSQL的扩展dict_int一、扩展概述二、核心功能三、安装与启用四、字典配置方法
阅读更多...
从原理到实战深入理解Java 断言assert

从原理到实战深入理解Java 断言assert

《从原理到实战深入理解Java断言assert》本文深入解析Java断言机制,涵盖语法、工作原理、启用方式及与异常的区别,推荐用于开发阶段的条件检查与状态验证,并强调生产环境应使用参数验证工具类替代... 目录深入理解 Java 断言（assert）：从原理到实战引言：为什么需要断言？一、断言基础1.1 语
阅读更多...
Java MQTT实战应用

Java MQTT实战应用

《JavaMQTT实战应用》本文详解MQTT协议,涵盖其发布/订阅机制、低功耗高效特性、三种服务质量等级（QoS0/1/2）,以及客户端、代理、主题的核心概念,最后提供Linux部署教程、Sprin... 目录一、MQTT协议二、MQTT优点三、三种服务质量等级四、客户端、代理、主题1. 客户端（Clien
阅读更多...
在Spring Boot中集成RabbitMQ的实战记录

在Spring Boot中集成RabbitMQ的实战记录

《在SpringBoot中集成RabbitMQ的实战记录》本文介绍SpringBoot集成RabbitMQ的步骤,涵盖配置连接、消息发送与接收,并对比两种定义Exchange与队列的方式:手动声明(... 目录前言准备工作1. 安装 RabbitMQ2. 消息发送者（Producer）配置1. 创建 Spr
阅读更多...
深度解析Spring Boot拦截器Interceptor与过滤器Filter的区别与实战指南

深度解析Spring Boot拦截器Interceptor与过滤器Filter的区别与实战指南

《深度解析SpringBoot拦截器Interceptor与过滤器Filter的区别与实战指南》本文深度解析SpringBoot中拦截器与过滤器的区别,涵盖执行顺序、依赖关系、异常处理等核心差异,并... 目录Spring Boot拦截器（Interceptor）与过滤器（Filter）深度解析：区别、实现
阅读更多...
深度解析Spring AOP @Aspect 原理、实战与最佳实践教程

深度解析Spring AOP @Aspect 原理、实战与最佳实践教程

《深度解析SpringAOP@Aspect原理、实战与最佳实践教程》文章系统讲解了SpringAOP核心概念、实现方式及原理,涵盖横切关注点分离、代理机制（JDK/CGLIB）、切入点类型、性能... 目录1. @ASPect 核心概念1.1 AOP 编程范式1.2 @Aspect 关键特性2. 完整代码实
阅读更多...
MySQL中的索引结构和分类实战案例详解

MySQL中的索引结构和分类实战案例详解

《MySQL中的索引结构和分类实战案例详解》本文详解MySQL索引结构与分类,涵盖B树、B+树、哈希及全文索引,分析其原理与优劣势,并结合实战案例探讨创建、管理及优化技巧,助力提升查询性能,感兴趣的朋... 目录一、索引概述1.1 索引的定义与作用1.2 索引的基本原理二、索引结构详解2.1 B树索引2.2
阅读更多...
SpringBoot开发中十大常见陷阱深度解析与避坑指南

SpringBoot开发中十大常见陷阱深度解析与避坑指南

《SpringBoot开发中十大常见陷阱深度解析与避坑指南》在SpringBoot的开发过程中,即使是经验丰富的开发者也难免会遇到各种棘手的问题,本文将针对SpringBoot开发中十大常见的“坑... 目录引言一、配置总出错？是不是同时用了.properties和.yml？二、换个位置配置就失效？搞清楚加
阅读更多...
从入门到精通MySQL 数据库索引(实战案例)

从入门到精通MySQL 数据库索引(实战案例)

《从入门到精通MySQL数据库索引(实战案例)》索引是数据库的目录,提升查询速度,主要类型包括BTree、Hash、全文、空间索引,需根据场景选择,建议用于高频查询、关联字段、排序等,避免重复率高或... 目录一、索引是什么？能干嘛？核心作用：二、索引的 4 种主要类型（附通俗例子）1. BTree 索引（
阅读更多...
Java Web实现类似Excel表格锁定功能实战教程

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2