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

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

dot_indication_flutter 是一个用于在 Flutter 应用中实现页面指示器的插件。页面指示器通常用于引导用户当前滑动到的页面位置。

开始使用

首先，你需要将 dot_indication_flutter 添加到你的 pubspec.yaml 文件中：

dependencies:
  dot_indication_flutter: ^版本号

然后运行 flutter pub get 来安装该插件。

接下来，我们通过一个简单的示例来展示如何使用 dot_indication_flutter 插件。

完整示例代码

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

import 'package:flutter/services.dart';
import 'package:dot_indication_flutter/dot_indication_flutter.dart';

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int selectedIndex = 0;
  List listDot = ['1', '2', '3', '4'];

  static const _kDuration = const Duration(milliseconds: 300);

  static const _kCurve = Curves.bounceIn;

  final PageController _pageController = PageController(
    initialPage: 0,
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: Column(
            children: [
              // 页面视图
              Container(
                height: 450,
                child: PageView.builder(
                  controller: _pageController,
                  physics: BouncingScrollPhysics(),
                  allowImplicitScrolling: true,
                  onPageChanged: (int page) {
                    setState(() {
                      selectedIndex = page;
                    });
                  },
                  itemCount: img.length,
                  itemBuilder: (context, index) {
                    return Container(
                      padding: const EdgeInsets.symmetric(horizontal: 16),
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(10),
                        child: FadeInImage(
                          placeholder: AssetImage('assets/exercise1.jpg'),
                          image: AssetImage(img[index]['image']),
                          fit: BoxFit.cover,
                        ),
                      ),
                    );
                  },
                ),
              ),
              // 页面指示器
              Container(
                padding: const EdgeInsets.all(10.0),
                child: new Center(
                  child: new DotsIndicator(
                    color: Color(0XFFe6bc5f),
                    materialType: MaterialType.circle,
                    controller: _pageController,
                    itemCount: listDot.length,
                    onPageSelected: (int page) {
                      _pageController.animateToPage(
                        page,
                        duration: _kDuration,
                        curve: _kCurve,
                      );
                    },
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// 图片列表
List<dynamic> img = [
  {'image': 'assets/exercise1.jpg'},
  {'image': 'assets/exercise2.jpg'},
  {'image': 'assets/exercise3.jpg'},
  {'image': 'assets/exercise4.jpg'},
];

代码解释

  1. 导入库：

    import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter/services.dart';
import 'package:dot_indication_flutter/dot_indication_flutter.dart';

  2. 定义主应用类：

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

  3. 定义状态类：

    class _MyAppState extends State<MyApp> {
  int selectedIndex = 0;
  List listDot = ['1', '2', '3', '4'];
  static const _kDuration = const Duration(milliseconds: 300);
  static const _kCurve = Curves.bounceIn;
  final PageController _pageController = PageController(initialPage: 0);

  4. 构建UI：

    [@override](/user/override)
Widget build(BuildContext context) {
  return MaterialApp(
    debugShowCheckedModeBanner: false,
    home: Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Container(
              height: 450,
              child: PageView.builder(
                controller: _pageController,
                physics: BouncingScrollPhysics(),
                allowImplicitScrolling: true,
                onPageChanged: (int page) {
                  setState(() {
                    selectedIndex = page;
                  });
                },
                itemCount: img.length,
                itemBuilder: (context, index) {
                  return Container(
                    padding: const EdgeInsets.symmetric(horizontal: 16),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(10),
                      child: FadeInImage(
                        placeholder: AssetImage('assets/exercise1.jpg'),
                        image: AssetImage(img[index]['image']),
                        fit: BoxFit.cover,
                      ),
                    ),
                  );
                },
              ),
            ),
            Container(
              padding: const EdgeInsets.all(10.0),
              child: new Center(
                child: new DotsIndicator(
                  color: Color(0XFFe6bc5f),
                  materialType: MaterialType.circle,
                  controller: _pageController,
                  itemCount: listDot.length,
                  onPageSelected: (int page) {
                    _pageController.animateToPage(
                      page,
                      duration: _kDuration,
                      curve: _kCurve,
                    );
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

  5. 定义图片列表：

    List<dynamic> img = [
  {'image': 'assets/exercise1.jpg'},
  {'image': 'assets/exercise2.jpg'},
  {'image': 'assets/exercise3.jpg'},
  {'image': 'assets/exercise4.jpg'},
];

更多关于Flutter页面指示器插件dot_indication_flutter的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter页面指示器插件dot_indication_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


dot_indication_flutter 是一个用于在 Flutter 应用中创建页面指示器的插件。它可以帮助你在轮播图或分页视图中显示当前页面的指示点。以下是使用 dot_indication_flutter 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 dot_indication_flutter 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  dot_indication_flutter: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入 dot_indication_flutter：

import 'package:dot_indication_flutter/dot_indication_flutter.dart';

3. 使用 DotIndication

DotIndication 是一个小部件，可以用来显示页面指示器。你可以将其与 PageView 或其他分页组件一起使用。

以下是一个简单的示例，展示如何使用 DotIndication 与 PageView：

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

class MyPageView extends StatefulWidget {
  [@override](/user/override)
  _MyPageViewState createState() => _MyPageViewState();
}

class _MyPageViewState extends State<MyPageView> {
  final PageController _pageController = PageController();
  int _currentPage = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PageView with DotIndication'),
      ),
      body: Column(
        children: [
          Expanded(
            child: PageView(
              controller: _pageController,
              onPageChanged: (index) {
                setState(() {
                  _currentPage = index;
                });
              },
              children: [
                Container(color: Colors.red),
                Container(color: Colors.green),
                Container(color: Colors.blue),
              ],
            ),
          ),
          DotIndication(
            count: 3, // 总页数
            currentIndex: _currentPage, // 当前页索引
            activeColor: Colors.blue, // 激活的点的颜色
            inactiveColor: Colors.grey, // 未激活的点的颜色
            size: 10.0, // 点的大小
            spacing: 8.0, // 点之间的间距
          ),
        ],
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }
}

void main() {
  runApp(MaterialApp(
    home: MyPageView(),
  ));
}
回到顶部