缩放列表

一个带有大量修改的水平列表视图，包括一个缩放的当前项目。

  • 提供弯曲的自定义绘画和下面的点指示器。
  • 它使项目生成器的小部件对设备屏幕的宽度和高度响应。
  • 您还可以设置选定和未选定卡片相对于整个屏幕的相对宽度、边距宽度和高度。

68747470733a2f2f692e696d6775722e636f6d2f613430626b4d752e706e67

68747470733a2f2f692e696d6775722e636f6d2f7542353870574e2e706e67

68747470733a2f2f692e696d6775722e636f6d2f48304f624f77662e706e67

用法

  @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),
              )
            ],
          );
        },
      ),
    );
  }

使用场景

  • 当您想以缩放方式添加项目并在每个项目上添加自定义弯曲绘画时。

GitHub

https://github.com/hosain-mohamed/scaled_list