Flutter页面指示器插件smooth_page_indicator的使用

简介

Page indicators是任何涉及多页的应用程序的关键部分。它们帮助用户理解页面数量及其当前位置。SmoothPageIndicator是一个Flutter包，提供了一组带有多种效果的动画页面指示器。

效果

SmoothPageIndicator自带了一些内置的效果来动画化激活的点，也可以自定义每个效果。对于更具体的自定义，可以尝试CustomizableEffect，它允许更多的自定义选项。

Effect	Preview
Worm
Expanding Dots
Jumping dot
Scrolling Dots
Slide
Scale

使用方法

SmoothPageIndicator使用PageController的滚动偏移量来动画化活动点。

SmoothPageIndicator(
   controller: controller,  // PageController    
   count:  6,    
   effect:  WormEffect(),  // your preferred effect    
   onDotClicked: (index){
  }
)

不使用PageController的情况

与SmoothPageIndicator不同，AnimatedSmoothIndicator是自我动画化的，只需要提供活动索引即可。

AnimatedSmoothIndicator(
   activeIndex: yourActiveIndex,
   count: 6,
   effect: WormEffect(),
)

垂直布局支持

SmoothPageIndicator支持水平和垂直布局。

SmoothPageIndicator(
   controller: controller,
   count:  6,
   axisDirection: Axis.vertical,
   effect:  WormEffect(),
)

滚动点效果

SmoothPageIndicator自带了类似Instagram的滚动点效果，适用于大量页面的情况。

自定义

每个效果都有自己的属性集，可以根据需要进行自定义。例如，可以自定义SlideEffect的方向、宽度、高度、半径、间距、绘画样式、颜色等。

SmoothPageIndicator(
   controller: controller,
   count:  6,
   axisDirection: Axis.vertical,
   effect:  SlideEffect(
      spacing:  8.0,
      radius:  4.0,
      dotWidth:  24.0,
      dotHeight:  16.0,
      paintStyle:  PaintingStyle.stroke,
      strokeWidth:  1.5,
      dotColor:  Colors.grey,
      activeDotColor:  Colors.indigo
  ),
)

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用SmoothPageIndicator。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Smooth Page Indicator Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final controller = PageController(viewportFraction: 0.8, keepPage: true);

  @override
  Widget build(BuildContext context) {
    final pages = List.generate(
        6,
        (index) => Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(16),
                color: Colors.grey.shade300,
              ),
              margin: EdgeInsets.symmetric(horizontal: 10, vertical: 4),
              child: Container(
                height: 280,
                child: Center(
                    child: Text(
                  "Page $index",
                  style: TextStyle(color: Colors.indigo),
                )),
              ),
            ));

    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              SizedBox(height: 16),
              SizedBox(
                height: 240,
                child: PageView.builder(
                  controller: controller,
                  // itemCount: pages.length,
                  itemBuilder: (_, index) {
                    return pages[index % pages.length];
                  },
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 24, bottom: 12),
                child: Text(
                  'Worm',
                  style: TextStyle(color: Colors.black54),
                ),
              ),
              SmoothPageIndicator(
                controller: controller,
                count: pages.length,
                effect: const WormEffect(
                  dotHeight: 16,
                  dotWidth: 16,
                  type: WormType.thinUnderground,
                ),
              ),
              // 可以添加其他效果的SmoothPageIndicator
            ],
          ),
        ),
      ),
    );
  }
}

通过上述内容，您可以了解并使用smooth_page_indicator插件来为您的Flutter应用添加美观且功能丰富的页面指示器。