overlap_stack 1.0.1

overlap_stack: ^1.0.1 copied to clipboard

OverlapStack intelligently stacks your widgets, allowing them to partially overlap for a compact and visually interesting layout. This space-saving solution is perfect for user lists, chat previews, or any situation where you want to showcase multiple elements without cluttering the screen.

Demo

Usage #

To read more about classes and other references used by overlap_stack, see the API Reference.

OverlapStack(
  minSpacing: 0.5,
  maxSpacing: 0.5,
  itemSize: const Size(64, 32),
  children: List<Widget>.generate(9, (i) {
    return Container(
      width: 64,
      height: 32,
      alignment: Alignment.center,
      color: Colors.amber[(i + 1) * 100]!,
      child: const FlutterLogo(),
    );
  }),
)

Container(
  color: Colors.black12,
  height: 40,
  child: OverlapStack.builder(
    minSpacing: 0.5,
    maxSpacing: 0.8,
    // align: OverlapStackAlign.end,
    leadIndex: 3,
    // infoIndex: 3,
    // itemSize: const Size.square(40),
    itemLimit: 12,
    itemCount: 25,
    itemBuilder: (context, i) {
      return CircleAvatar(
        foregroundImage: NetworkImage(
          'https://i.pravatar.cc/50?u=$i',
        ),
      );
    },
    infoBuilder: (context, remaining) {
      return CircleAvatar(
        backgroundColor: Colors.red,
        foregroundColor: Colors.white,
        child: Text('+$remaining'),
      );
    },
  ),
)

Sponsoring #

If this package or any other package I created is helping you, please consider to sponsor me so that I can take time to read the issues, fix bugs, merge pull requests and add features to these packages.