app popups < A flutter package to help you beautify your > 1

flutter_app popups

a flutter package to help you beautify your app popup, can be used in all platform.

getting started

add dependency to you pubspec.yaml:

dependencies:
    flutter_beautiful_popup: ^1.4.0

import the dependency:

import 'package:beautiful_popup/main.dart';

and then you can display a popup with certain template like this:

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

if you wan to recolor the illustration of the template, you can call the recolor method, but this function takes a little time to caculate/offset the color cahnnel of the illustration:

final newcolor = colors.red.withopacity(0.5);
await popup.recolor(newcolor);

all available templates you can find in live demo.

customize your own beautifulpopuptemplate

you can extend beautifulpopuptemplate to customize your own template like this:

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(),
      ),
    ];
  }
}

to display a popup with your own template:

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'
        ]);
      },
    ),
  ],
);