搜尋套件、儲存庫與 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 項

原始碼儲存庫

使用此套件的專案

暫無相關資料。