scaled_list

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

Scaled List is a Flutter package that provides a horizontally scrollable list with a visually striking, scaled current item and custom curved painting effects. It enhances user experience by emphasizing the active item through size scaling and smooth animations, making it ideal for carousels or cover flow interfaces. The package supports multiple platforms including Android, iOS, Web, macOS, Windows, and Linux, offering consistent behavior across devices. Developers can customize appearance and interaction, enabling creative UI designs with minimal effort.

Use cases

Creating interactive carousels
Designing cover flow navigation
Building image sliders with visual focus
Enhancing product showcases
Implementing animated horizontal lists
Adding dynamic item scaling in UIs

Key features

Scaled current item visualization
Custom curved painting support
Smooth horizontal scrolling
Cross-platform compatibility
Extensible customization options
Built-in animation transitions

Suitable for

UI designers seeking visual impact
Developers building media galleries
Apps requiring focused item highlighting
Interactive product browsing features
Projects with carousel-style navigation

Considerations

May require performance tuning on low-end devices
Custom painting could increase complexity
Limited vertical support
Best suited for horizontal layouts only
Potential memory usage with large datasets

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

Pub.dev

Scaled List

A Horizontal List view With Lots of modification including a scaled current item.

Provided with curved custom painting and Dots indictor below it.
it makes the widget of item builder responsive to the device screen's width and height.
You can also set the relative width, margin width, height of selected and unselected Card to the entire screen

Usage

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ScaledList(
        itemCount: Data.categories.length,
        itemColor: (index) {
          return kMixedColors[index % kMixedColors.length];
        },
        itemBuilder: (index, selectedIndex) {
          final category = Data.categories[index];
          return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                height: selectedIndex == index
                    ? 100
                    : 80,
                child: Image.asset(category.image),
              ),
              SizedBox(height: 15),
              Text(
                category.name,
                style: TextStyle(
                    color: Colors.white,
                    fontSize: selectedIndex == index
                        ? 25
                        : 20),
              )
            ],
          );
        },
      ),
    );
  }

Usage Scenarios

When You like to add items in scaled manner and add custom curved painting over each item.

Contributers

Hosain Mohamed Muhammad Alsaied

Search categories, packages and repositories

Install package