flutter_beautiful_popup

一个 Flutter 包，可以帮助您美化您的应用弹出窗口，可用于所有平台。

flutter_beautiful_popup

入门

将依赖添加到您的 pubspec.yaml 文件中

dependencies:
    flutter_beautiful_popup: ^1.4.0

导入依赖

import 'package:beautiful_popup/main.dart';

然后您可以使用特定的模板显示一个弹窗，例如：

final popup = BeautifulPopup(
  context: context,
  template: TemplateGift,
);
popup.show(
  title: 'String or Widget',
  content: 'String or Widget',
  actions: [
    popup.button(
      label: 'Close',
      onPressed: Navigator.of(context).pop,
    ),
  ],
  // bool barrierDismissible = false,
  // Widget close,
);

如果您想为模板中的插图重新着色，可以调用recolor方法，但此函数需要一些时间来计算/偏移插图的颜色通道。

final newColor = Colors.red.withOpacity(0.5);
await popup.recolor(newColor);

您可以在 Live Demo 中找到所有可用的模板。

自定义您自己的 BeautifulPopupTemplate

您可以扩展 BeautifulPopupTemplate 来自定义您自己的模板，如下所示：

import 'package:flutter/material.dart';
import 'package:flutter_beautiful_popup/main.dart';

class MyTemplate extends BeautifulPopupTemplate {
  final BeautifulPopup options;
  MyTemplate(this.options) : super(options);

  @override
  final illustrationKey = 'images/mytemplate.png';
  @override
  Color get primaryColor => options.primaryColor ?? Color(0xff000000); // The default primary color of the template is Colors.black.
  @override
  final maxWidth = 400; // In most situations, the value is the illustration size.
  @override
  final maxHeight = 600;
  @override
  final bodyMargin = 10;

  // You need to adjust the layout to fit into your illustration.
  @override
  get layout {
    return [
      Positioned(
        child: background,
      ),
      Positioned(
        top: percentH(10),
        child: title,
      ),
      Positioned(
        top: percentH(40),
        height: percentH(actions == null ? 32 : 42),
        left: percentW(10),
        right: percentW(10),
        child: content,
      ),
      Positioned(
        bottom: percentW(10),
        left: percentW(10),
        right: percentW(10),
        child: actions ?? Container(),
      ),
    ];
  }
}

显示一个带有您自定义模板的弹窗

final popup = BeautifulPopup.customize(
  context: context,
  build: (options) => MyTemplate(options),
);
popup.show(
  title: 'Example',
  content: Container(
    color: Colors.black12,
    child: Text(
        'This popup shows you how to customize your own BeautifulPopupTemplate.'),
  ),
  actions: [
    popup.button(
      label: 'Code',
      onPressed: () {
        js.context.callMethod('open', [
          'https://github.com/jaweii/Flutter_beautiful_popup/blob/master/example/lib/MyTemplate.dart'
        ]);
      },
    ),
  ],
);

GitHub

https://github.com/jaweii/Flutter_beautiful_popup