A flutter package to help you beautify your app popups.

Related tags

UI Flutter_beautiful_popup
Overview

flutter_beautiful_popup 中文

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

Preview:

Getting Started

Add dependency to you pubspec.yaml:

dependencies:
    flutter_beautiful_popup: ^1.5.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,
);
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'
        ]);
      },
    ),
  ],
);

Contribution

Licence

MIT

Comments
  • Support for Dart 2.12 null safety

    Support for Dart 2.12 null safety

    Any plans to support the latest Dart Null Safety? I'm getting the following dependency error when trying to use this package.

    Because image >=2.0.4 <2.1.14 depends on archive >=1.0.16 <3.0.0 and archive ^1.0.2 requires SDK version <2.0.0, image >=2.0.4 <2.1.14 requires archive ^2.0.0. And because image >=2.1.14 <3.0.0-nullsafety.0 depends on archive ^2.0.0 and every version of flutter_beautiful_popup depends on image ^2.1.4, every version of flutter_beautiful_popup requires archive ^2.0.0. And because archive >=2.0.0 <3.0.0-nullsafety.0 depends on crypto ^2.0.0 and uuid >=3.0.0 depends on crypto ^3.0.0, flutter_beautiful_popup is incompatible with uuid >=3.0.0.

    opened by Roshanalexander 4
  • Add new property into label button

    Add new property into label button

    Can you add labelStyle into popup.button. (with TextStyle class)

    popup.button( label: 'Go Home', labelStyle: TextStyle(fontSize: 20), onPressed: Navigator.of(context).pop, outline: false), ]);

    enhancement 
    opened by malikdoksoz 3
  • Want to know images

    Want to know images

    Please tell me about images you used in your packages, I want to use in my app but not in popup, Can you tell me from where you downloaded this images?

    opened by rupamking1 2
  • build issue

    build issue

    Error: The getter 'subhead' isn't defined for the class 'TextTheme'.

    • 'TextTheme' is from 'package:flutter/src/material/text_theme.dart' ('../../../development/flutter/packages/flutter/lib/src/material/text_theme.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'subhead'. Theme.of(options.context).textTheme.subhead?.fontSize ?? 12,
    opened by nowfalsalahudeen 1
  • Feature/null safety

    Feature/null safety

    Updated the package to null safety. Tested on web, iOS and Android.

    • Migrated to null safety
    • Migrated Android to the new embedding
    • Removed build folder from the example (Most of the removed lines are from this)

    Todo: Upgrade from the old material design. Currently still using text styles such as display1

    opened by JavonneM 0
  • Dark Theme

    Dark Theme

    Hello,

    I use beautiful_popup in my App and I included a dark theme. But the Popup doesn't recognize that. How can I edit the code, that the popup follows the dark theme? Or if that is not possible, how can I change the background color and content color manually?

    Thanks for help!

    opened by Dfisch3r 0
  • Content hidden by keyboard

    Content hidden by keyboard

    Hey, i want to make a login popup but the content gets hidden by the keyboard.

    Here is the code:

    final popup = BeautifulPopup(
    context: context,
    template: TemplateSuccess,
  );
  popup.show(
    title: 'Melde dich an',
    content: Column(
      children: <Widget>[
        Container(
            child: TextField(
          autofocus: true,
          controller: username,
          decoration: InputDecoration(labelText: "Gebe deinen Nutzername ein."),
        )),
        // TODO: Add password
      ],
    ),
    actions: [
      popup.button(
        label: 'Einloggen',
        onPressed: () {
          // TODO: Add login
        },
      ),
    ],
  );

    Here are some pictures: Screenshot_20200229-230020 Screenshot_20200229-230749

    Best regards Elias

    opened by eliasbnr 1
Owner
朱嘉伟
朱嘉伟
GitHub https://jaweii.github.io/Flutter_beautiful_popup/example/build/web/
modern e-commerce store built in flutter with help of GetX.

Shoe Commerce Modern looking shoe store app built in flutter and help of GetX :) Design source: https://www.figma.com/community/file/11473970061435204

ƳƠƲƧƠƑ 6 Nov 24, 2022
It is too hard to build coherent and accessible themes with the right colors. This should help.

Color Studio It is hard to choose colors. Most color pickers give you 16 million colors and ask you to pick one. So many options, in fact, that your c

Bernardo Ferrari 372 Dec 22, 2022
A textField widget to help display different style pin

pin_input_text_field 中文版点我 PinInputTextField is a TextField widget to help display different style pin. It supports all the platforms flutter supports

Tino 324 Jan 4, 2023
A flutter package to display a country, states, and cities. In addition it gives the possibility to select a list of countries, States and Cities depends on Selected, also you can search country, state, and city all around the world.

A flutter package to display a country, states, and cities. In addition it gives the possibility to select a list of countries, States and Cities depends on Selected, also you can search country, state, and city all around the world.

Altaf Razzaque 25 Dec 20, 2022
This package provides some widgets you can use to create a smooshy UI.

Dough Library Squishy widgets for Flutter. Quick Links Dough Demos Here are a few samples of the different widgets provided by this repo. You can find

Josiah Saunders 530 Dec 23, 2022
A simple package that provides you with some widgets and cutom clippers which implements the shape of a coupon card.

Coupon UI Kit A simple package that provides you with some widgets and cutom clippers which implements the shape of a coupon card. The example contain

AbdulMuaz Aqeel 15 Dec 20, 2022
A Flutter package to easily create a Credit Card in your application.

Awesome Card A flutter package to create a Credit Card widget in your application. Stay tuned for the latest updates: ?? Screenshots ⚙️ Installation I

Vivek Kaushik 142 Dec 1, 2022
A TypeAhead widget for Flutter, where you can show suggestions to users as they type

Flutter TypeAhead A TypeAhead (autocomplete) widget for Flutter, where you can show suggestions to users as they type Features Shows suggestions in an

null 661 Jan 5, 2023
With flutter tags you can create selectable or input tags that automatically adapt to the screen width

flutter_tags Create beautiful tags quickly and easily. Installing Add this to your package's pubspec.yaml file: dependencies: flutter_tags: "^0.4.9+

Antonino Di Natale 417 Dec 21, 2022
Flutter Widgets that you can touch and feel

Flutter widgets you haven't used yet. Problems that proximity solves Currently, Flutter has a lot of useful pre-built widgets, no, too many widgets. T

Masahiro Aoki 32 Nov 8, 2022
Fluid layouts allows you to create responsive layout for mobile, web and desktop from a single codebase.

Fluid layout aims to help building a responsive experience through all the different screen sizes. Based in the boostrap approach, FluidLayout calculates a padding content (fluid_padding) that changes depending on the parent size. The Fluid widget uses that padding to set its size

Jaime Blasco 3 Jan 10, 2022
2D water ripple effect for your flutter app

ripple_effect Create a 2D ripple effect using flutter and dart (Still experimental) Next experiments try using flutter ImageShader to make some calcul

Gautier 12 Dec 7, 2022
A nice clean onboarding screen for your e-commerce app that can run both Andriod and iOS devices because it builds with flutter

A nice clean onboarding screen for your e-commerce app that can run both Andriod and iOS devices because it builds with flutter

null 23 Dec 4, 2022
The Coolicons icon pack for Flutter with over 400 icons available for your flutter project.

coolicons This flutter package allows you to use the Coolicons icon pack. Made from Coolicons. ?? Installation In the dependencies: section of your pu

Stephen Joel 1 May 24, 2022
A Flutter Widget Approach for using HTML tags & CSS styles in your upcoming Apps.

html_widgets A Flutter Widget Approach for using HTML tags & CSS styles in your upcoming Apps. Text Widgets *text property is required for all the tex

XenonLabz 7 Jul 14, 2022
Code generation for Flutter Padding widgets based on your constants

Paddinger Paddinger is a Flutter package to generate Padding widgets. Given a set of constants like: @paddinger const double PADDING_NORMAL = 8; A set

Emanuele 14 Oct 20, 2022
A better way for new feature introduction and step-by-step users guide for your Flutter project.

A better way for new feature introduction and step-by-step users guide for your Flutter project.

好未来技术 139 Oct 26, 2022
HSV(HSB)/HSL/RGB/Material color picker inspired by all the good design for your amazing flutter apps.

flutter_colorpicker HSV(HSB)/HSL/RGB/Material color picker inspired by all the good design for your amazing flutter apps. Adorable color pickers out o

Dark Knight 279 Dec 30, 2022
Keyviz is a free and open-source software to visualize your ⌨️ keystrokes in realtime

Keyviz is a free and open-source software to visualize your ⌨️ keystrokes in realtime! Let your audience know what handy shortcuts/keys you're pressing during screencasts, presentations, collaborations, or whenever you need it.

Derek Jones 8 Oct 31, 2022