Need help with Flutter_beautiful_popup?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

462 Stars 66 Forks BSD 3-Clause "New" or "Revised" License 33 Commits 3 Opened issues


A flutter package help you beautify your app popups.

Services available


Need anything else?

Contributors list

# 28,077
30 commits

flutterbeautifulpopup 中文

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


Getting Started

Add dependency to you

    flutter_beautiful_popup: ^1.7.0

Import the dependency:

import 'package:flutter_beautiful_popup/main.dart';

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

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

If you wan to

the illustration of the template, you can call the
method, but this function takes a little time to caculate/offset the color cahnnel of the illustration:
final newColor =;
await popup.recolor(newColor);

All available templates you can find in Live Demo.

Customize your own BeautifulPopupTemplate

You can extend

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 @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),
  title: 'Example',
  content: Container(
    color: Colors.black12,
    child: Text(
        'This popup shows you how to customize your own BeautifulPopupTemplate.'),
  actions: [
      label: 'Code',
      onPressed: () {
        js.context.callMethod('open', [


We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.