stack_banners #

A beautiful, customizable stack banners widget for Flutter with smooth animations, multiple alignment options, and flexible styling.

Features #

✨ Multiple Alignments

• centerLeft / centerRight - Horizontal stacking with left/right alignment
• topCenter / bottomCenter - Vertical stacking with top/bottom alignment

🎨 Two Beautiful Styles

• Style 1: Classic stack with smooth transitions
• Style 2: Animated border radius with fade-in effects

🔄 Flexible Scrolling

• Horizontal and vertical scroll directions
• Infinite loop mode
• Smooth swipe gestures
• Auto-play support with customizable intervals

🎯 Highly Customizable

• Customizable border radius
• Smooth corner support
• Configurable animation curves
• Padding and aspect ratio control
• Index change callbacks

Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  stack_banners: ^0.0.1

Then run:

flutter pub get

Usage #

Basic Example #

import 'package:stack_banners/stack_banners.dart';

StackBanners(
  options: StackBannersOptions(
    alignment: Alignment.centerLeft,
    scrollDirection: Axis.horizontal,
    style: StackBannersStyle.style1,
  ),
  items: [
    StackBannersItem(
      image: NetworkImage('https://example.com/image1.jpg'),
    ),
    StackBannersItem(
      image: NetworkImage('https://example.com/image2.jpg'),
    ),
    StackBannersItem(
      image: NetworkImage('https://example.com/image3.jpg'),
    ),
  ],
  onIndexChanged: (index) {
    print('Current index: $index');
  },
)

Advanced Example with Auto-play #

final controller = StackBannersController();

StackBanners(
  controller: controller,
  options: StackBannersOptions(
    alignment: Alignment.centerLeft,
    scrollDirection: Axis.horizontal,
    style: StackBannersStyle.style2,
    loop: true,
    autoPlay: true,
    autoPlayInterval: const Duration(seconds: 3),
    borderRadius: 24.0,
    itemAnimationDuration: const Duration(milliseconds: 600),
  ),
  items: bannerItems,
  onIndexChanged: (index) {
    print('Current index: $index');
  },
)

Examples #

Center Left + Horizontal + Style 1 #

StackBanners(
  options: StackBannersOptions(
    alignment: Alignment.centerLeft,
    scrollDirection: Axis.horizontal,
    style: StackBannersStyle.style1,
  ),
  items: items,
)

Center Right + Horizontal + Style 2 #

StackBanners(
  options: StackBannersOptions(
    alignment: Alignment.centerRight,
    scrollDirection: Axis.horizontal,
    style: StackBannersStyle.style2,
    itemAnimationDuration: const Duration(milliseconds: 600),
  ),
  items: items,
)

Top Center + Vertical + Style 1 #

StackBanners(
  options: StackBannersOptions(
    alignment: Alignment.topCenter,
    scrollDirection: Axis.vertical,
    style: StackBannersStyle.style1,
  ),
  items: items,
)

Bottom Center + Vertical + Style 2 #

StackBanners(
  options: StackBannersOptions(
    alignment: Alignment.bottomCenter,
    scrollDirection: Axis.vertical,
    style: StackBannersStyle.style2,
    itemAnimationDuration: const Duration(milliseconds: 600),
  ),
  items: items,
)

Configuration #

StackBannersOptions #

StackBannersController #

Control the banners programmatically:

final controller = StackBannersController();

// Start auto-play
controller.startAutoPlay();

// Stop auto-play
controller.stopAutoPlay();

// Go to next page
controller.nextPage();

// Go to previous page
controller.previousPage();

Callbacks #

onIndexChanged #

Called when the current index changes:

StackBanners(
  onIndexChanged: (int index) {
    print('Current banner index: $index');
    // Update your UI based on the current index
  },
  // ...
)

Requirements #

• Flutter SDK: >=3.38.1
• Dart SDK: ^3.10.0

Dependencies #

• smooth_corner: ^1.1.1 - For smooth border radius effects

License #

This project is licensed under the MIT License.

Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

Support #

For issues, questions, or suggestions, please visit:

• GitHub Repository
• Homepage

Made with ❤️ by mrone.dev