Popup Banner

Popup Banner is a package to show banner slider using modal dialog. We can set the image location, auto slide settings, dots indicator and others.

Popup Banner

Features

  • Customizable Popup
  • Custom Close Button
  • Load Image From Network & Local
  • Auto Slider & Timer
  • Custom Dots Indicator Position & Color

Getting started

You must add the library as a dependency to your project.

dependencies:
 popup_banner: ^1.0.0

You should then run flutter packages get

Example Project

There is a detailed example project in the example folder. You can directly run and play on it. There are code snippets from example project below.

Default Popup

PopupBanner(
  context: context,
  images: [
    "https://tinyurl.com/popup-banner-image",
    "https://tinyurl.com/popup-banner-image2",
    "https://tinyurl.com/popup-banner-image3",
    "https://tinyurl.com/popup-banner-image4"
  ],
  onClick: (index) {
    debugPrint("CLICKED $index");
  },
).show();

Hide Dots Popup

PopupBanner(
  context: context,
  images: [
    "https://tinyurl.com/popup-banner-image",
    "https://tinyurl.com/popup-banner-image2",
    "https://tinyurl.com/popup-banner-image3",
    "https://tinyurl.com/popup-banner-image4"
  ],
  useDots: false,
  onClick: (index) {
    debugPrint("CLICKED $index");
  },
).show();

Customize Dots Popup

PopupBanner(
  context: context,
  images: [
    "https://tinyurl.com/popup-banner-image",
    "https://tinyurl.com/popup-banner-image2",
    "https://tinyurl.com/popup-banner-image3",
    "https://tinyurl.com/popup-banner-image4"
  ],
  dotsAlignment: Alignment.bottomCenter,
  dotsColorActive: Colors.blue,
  dotsColorInactive: Colors.grey.withOpacity(0.5),
  onClick: (index) {
    debugPrint("CLICKED $index");
  },
).show();

Disable Auto Slide & Custom Close Popup

PopupBanner(
  context: context,
  images: [
    "https://tinyurl.com/popup-banner-image",
    "https://tinyurl.com/popup-banner-image2",
    "https://tinyurl.com/popup-banner-image3",
    "https://tinyurl.com/popup-banner-image4"
  ],
  autoSlide: false,
  customCloseButton: ElevatedButton(
    onPressed: () => Navigator.pop(context),
    style: ElevatedButton.styleFrom(
      primary: Colors.blue,
    ),
    child: const Text(
      "Close",
      style: TextStyle(
        color: Colors.white,
      ),
    ),
  ),
  onClick: (index) {
      debugPrint("CLICKED $index");
  },
).show();

Local Asset Popup

PopupBanner(
  context: context,
  images: [
    "assets/images/popup-banner-local-image.jpg",
    "assets/images/popup-banner-local-image2.jpg",
    "assets/images/popup-banner-local-image3.jpeg",
    "assets/images/popup-banner-local-image4.jpg"
  ],
  fromNetwork: false,
  onClick: (index) {},
).show()

Contributions

  • If you found a bug, open an issue.
  • If you have a feature request, open an issue.
  • If you want to contribute, submit a pull request.

Version compatability

See CHANGELOG for all breaking (and non-breaking) changes.

Made with ❤ by Yusril Rapsanjani

Libraries