搜索插件、代码仓与 APP 分类

carousel_indicator 封面
插件详情v1.0.6

carousel_indicator

一个极简且简单的轮播指示器库,接受索引作为参数并更新指示器索引。该库具有预构建的滑动动画。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
2820
喜欢数
36
Pub 分数
140

安装插件

flutter pub add carousel_indicator

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个轻量级且简单的 Flutter 包,用于创建根据当前索引更新的轮播指示器。它具有内置的滑动动画,可实现指示器状态之间的平滑过渡。设计简洁,可轻松集成到任何轮播或覆盖流 UI 中,无需额外复杂性即可提供当前幻灯片位置的视觉反馈。非常适合需要极简、动画指示器且设置简单的应用程序。

适合场景

  • 在轮播图中显示幻灯片进度
  • 通过视觉反馈提升用户体验
  • 为封面流布局创建动画指示器
  • 与 PageView 或 Carousel 小部件集成
  • 使用最少的代码自定义指示器外观

主要特点

  • 基于索引的简单更新
  • 预构建的幻灯片动画
  • 最小 API 表面
  • 支持多个平台
  • 与 PageView 的轻松集成
  • 可自定义的指示器样式

适合对象

  • 寻求轻量级轮播指示器的开发者
  • 动态内容轮播的应用程序
  • 需要微妙视觉提示的UI
  • 注重简单性和性能的项目
  • Flutter 初学者探索轮播组件

使用建议

  • 超出基本样式的定制功能有限
  • 不支持非线性动画的内置支持
  • 需要手动处理状态管理
  • 不适合复杂的交互式轮播图
  • 依赖外部 PageView 或类似小部件以实现功能

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

carousel_indicator

A Minimal and Simple carousel indicator library.

Author

Tech Skape (Love K.) techskape@gmail.com

Screenshot

showcases

Example

import 'package:carousel_indicator/carousel_indicator.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
      
        primarySwatch: Colors.blue,
      
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 int pageIndex=0;

  List<Widget> _demo=[
    Container(height: 300,color: Colors.amber),
              Container(height: 300,color: Colors.black),
              Container(height: 300,color: Colors.blue),
              Container(height: 300,color: Colors.green),
  ];
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          height: 300,
          width: double.infinity,
          child: PageView(
            children: _demo,
            
            onPageChanged: (index){
                setState(() {
                  pageIndex=index;
                });
            },
          ),
        ),
        SizedBox(height: 40,),
        CarouselIndicator(
          count: _demo.length,
          index: pageIndex,
        ),
      ],
    );
  }
}

Getting Started

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

所属分类

依赖

依赖清单 1 项

源码仓库

使用此插件的项目

暂无相关数据。