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

插件简介

Flutter PageViewIndicator 是一个用于为 PageView 构建指示标记的插件，它非常可定制化。你可以从任何小部件构建指示器，并且可以轻松地自定义它们的外观。

安装

1. 添加依赖

在你的 pubspec.yaml 文件中添加以下内容：

dependencies:
  flutter_page_view_indicator: ^0.0.5

2. 安装插件

通过命令行安装：

$ flutter pub get

如果你使用的是 Android Studio 或 Intellij，只需点击 pub get 即可。

3. 导入插件

在 Dart 代码中导入插件：

import 'package:flutter_page_view_indicator/flutter_page_view_indicator.dart';

使用方法

基本用法

只需要几行代码即可创建默认的页面指示器：

PageViewIndicator(
    length: screens.length,
    currentIndex: currentIndex,
),

自定义指示器

你可以通过传递不同的属性来自定义指示器的样式和行为。例如：

PageViewIndicator(
   length: length,
   currentIndex: currentIndex,
   otherItemWidth: 20,
   otherItemHeight: 8,
),

或者更复杂的示例：

PageViewIndicator(
   length: screens.length,
   currentIndex: currentIndex,
   currentColor: Colors.teal,
   otherColor: Colors.grey.shade800,
   currentSize: 15,
   otherSize: 15,
   margin: EdgeInsets.all(5),
   borderRadius: 9999.0,
   alignment: MainAxisAlignment.center,
   animationDuration: Duration(milliseconds: 750),
   direction: Axis.horizontal,
),

示例代码

以下是一个完整的示例代码，展示了如何在实际项目中使用 flutter_page_view_indicator 插件。这个例子实现了一个简单的引导页（Onboarding）功能。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_page_view_indicator/flutter_page_view_indicator.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<OnBoardingModel> screens = [
    OnBoardingModel(
      image: 'assets/images/onboarding-1.jpg',
      title: 'Welcome',
      description:
          "Thank you for choosing our plugin, we are very happy and we assure you that you will be too.",
    ),
    OnBoardingModel(
      image: 'assets/images/onboarding-2.jpg',
      title: 'Add To Cart',
      description:
          "Now were up in the big leagues getting our turn at bat. The Brady bunch that's the why we brad bunch.",
    ),
    OnBoardingModel(
      image: 'assets/images/onboarding-3.jpg',
      title: 'Enjoy Purchase!',
      description:
          "Now were up in the big leagues getting our turn at bat. The Brady bunch that's the why we brad bunch.",
    ),
  ];
  PageController? _pageController;
  int currentIndex = 0;

  @override
  void initState() {
    super.initState();
    _pageController = PageController(
      initialPage: 0,
    );
  }

  @override
  void dispose() {
    super.dispose();
    _pageController!.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Stack(
          children: [
            PageView.builder(
              controller: _pageController,
              itemCount: screens.length,
              itemBuilder: (BuildContext context, int index) {
                return Padding(
                  padding: const EdgeInsets.all(28.0),
                  child: SingleOnBoardingScreen(screens[index]),
                );
              },
              onPageChanged: (int index) {
                setState(() {
                  currentIndex = index;
                });
              },
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: Padding(
                padding: const EdgeInsets.only(bottom: 20.0),
                child: PageViewIndicator(
                  length: screens.length,
                  currentIndex: currentIndex,
                  currentColor: Colors.blue,
                  otherColor: Colors.grey,
                  currentSize: 15,
                  otherSize: 10,
                  margin: EdgeInsets.all(5),
                  borderRadius: 9999.0,
                  alignment: MainAxisAlignment.center,
                  animationDuration: Duration(milliseconds: 750),
                  direction: Axis.horizontal,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class OnBoardingModel {
  final String image;
  final String title;
  final String description;

  OnBoardingModel({required this.image, required this.title, required this.description});
}

class SingleOnBoardingScreen extends StatelessWidget {
  final OnBoardingModel model;

  SingleOnBoardingScreen(this.model);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Image.asset(model.image),
        Text(model.title, style: Theme.of(context).textTheme.headline4),
        Text(model.description, textAlign: TextAlign.center, style: Theme.of(context).textTheme.bodyText2),
      ],
    );
  }
}

在这个示例中，我们创建了一个包含三个页面的引导页，每个页面都有一个图片、标题和描述。同时，我们在页面底部添加了一个 PageViewIndicator 来指示当前页面的位置。

希望这个详细的介绍和示例能帮助你更好地理解和使用 flutter_page_view_indicator 插件！如果有任何问题或需要进一步的帮助，请随时提问。