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。

相关文章

使用Python开发一个带EPUB转换功能的Markdown编辑器

使用Python开发一个带EPUB转换功能的Markdown编辑器

《使用Python开发一个带EPUB转换功能的Markdown编辑器》Markdown因其简单易用和强大的格式支持,成为了写作者、开发者及内容创作者的首选格式,本文将通过Python开发一个Markd... 目录应用概览代码结构与核心组件1. 初始化与布局 (__init__)2. 工具栏 (setup_t
阅读更多...
Spring Shell 命令行实现交互式Shell应用开发

Spring Shell 命令行实现交互式Shell应用开发

《SpringShell命令行实现交互式Shell应用开发》本文主要介绍了SpringShell命令行实现交互式Shell应用开发,能够帮助开发者快速构建功能丰富的命令行应用程序,具有一定的参考价... 目录引言一、Spring Shell概述二、创建命令类三、命令参数处理四、命令分组与帮助系统五、自定义S
阅读更多...
Python通过模块化开发优化代码的技巧分享

Python通过模块化开发优化代码的技巧分享

《Python通过模块化开发优化代码的技巧分享》模块化开发就是把代码拆成一个个“零件”,该封装封装,该拆分拆分,下面小编就来和大家简单聊聊python如何用模块化开发进行代码优化吧... 目录什么是模块化开发如何拆分代码改进版：拆分成模块让模块更强大：使用 __init__.py你一定会遇到的问题模www.
阅读更多...
Spring Security基于数据库的ABAC属性权限模型实战开发教程

Spring Security基于数据库的ABAC属性权限模型实战开发教程

《SpringSecurity基于数据库的ABAC属性权限模型实战开发教程》：本文主要介绍SpringSecurity基于数据库的ABAC属性权限模型实战开发教程,本文给大家介绍的非常详细,对大... 目录1. 前言2. 权限决策依据RBACABAC综合对比3. 数据库表结构说明4. 实战开始5. MyBA
阅读更多...
使用Python开发一个简单的本地图片服务器

使用Python开发一个简单的本地图片服务器

《使用Python开发一个简单的本地图片服务器》本文介绍了如何结合wxPython构建的图形用户界面GUI和Python内建的Web服务器功能,在本地网络中搭建一个私人的,即开即用的网页相册,文中的示... 目录项目目标核心技术栈代码深度解析完整代码工作流程主要功能与优势潜在改进与思考运行结果总结你是否曾经
阅读更多...
Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战：从入门到进阶优化1. MyBatis
阅读更多...
MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

《MyBatis动态SQL优化之标签的实战与技巧(常见用法)》本文通过详细的示例和实际应用场景,介绍了如何有效利用这些标签来优化MyBatis配置,提升开发效率,确保SQL的高效执行和安全性,感... 目录动态SQL详解一、动态SQL的核心概念1.1 什么是动态SQL？1.2 动态SQL的优点1.3 动态S
阅读更多...
Python基于wxPython和FFmpeg开发一个视频标签工具

Python基于wxPython和FFmpeg开发一个视频标签工具

《Python基于wxPython和FFmpeg开发一个视频标签工具》在当今数字媒体时代,视频内容的管理和标记变得越来越重要,无论是研究人员需要对实验视频进行时间点标记,还是个人用户希望对家庭视频进行... 目录引言1. 应用概述2. 技术栈分析2.1 核心库和模块2.2 wxpython作为GUI选择的优
阅读更多...
Pandas使用SQLite3实战

Pandas使用SQLite3实战

《Pandas使用SQLite3实战》本文主要介绍了Pandas使用SQLite3实战,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1 环境准备2 从 SQLite3VlfrWQzgt 读取数据到 DataFrame基础用法：读
阅读更多...
Flutter打包APK的几种方式小结

Flutter打包APK的几种方式小结

《Flutter打包APK的几种方式小结》Flutter打包不同于RN,Flutter可以在AndroidStudio里编写Flutter代码并最终打包为APK,本篇主要阐述涉及到的几种打包方式,通... 目录前言1. android原生打包APK方式2. Flutter通过原生工程打包方式3. Futte
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2