Flutter分页管理插件pagination_flutter的使用

Getting started

Installation

在pubspec.yaml文件中添加依赖：

dependencies:
  pagination_flutter: ^0.0.8

然后在Dart代码中导入包：

import 'package:pagination_flutter/pagination_flutter.dart';

Preview

Usage

下面是一个完整的示例demo，展示了如何使用pagination_flutter插件创建一个带有分页功能的应用程序。

import 'package:flutter/material.dart';
import 'package:pagination_flutter/pagination.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        splashColor: Colors.transparent,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int selectedPage = 1;

  setSelectedPage(int index) {
    setState(() {
      selectedPage = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: const Text("Flutter Pagination"),
          backgroundColor: Colors.black),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Pagination widget with circle style buttons
            Pagination(
              numOfPages: 10,
              selectedPage: selectedPage,
              pagesVisible: 5,
              spacing: 10,
              onPageChanged: (page) {
                setState(() {
                  selectedPage = page;
                });
              },
              nextIcon: const Icon(
                Icons.chevron_right_rounded,
                color: Colors.redAccent,
                size: 20,
              ),
              previousIcon: const Icon(
                Icons.chevron_left_rounded,
                color: Colors.redAccent,
                size: 20,
              ),
              activeTextStyle: const TextStyle(
                color: Colors.white,
                fontSize: 14,
                fontWeight: FontWeight.w700,
              ),
              activeBtnStyle: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.redAccent),
                shape: MaterialStateProperty.all(const CircleBorder(
                  side: BorderSide(
                    color: Colors.redAccent,
                    width: 1,
                  ),
                )),
              ),
              inactiveBtnStyle: ButtonStyle(
                elevation: MaterialStateProperty.all(0),
                backgroundColor: MaterialStateProperty.all(Colors.white),
                shape: MaterialStateProperty.all(const CircleBorder(
                  side: BorderSide(
                    color: Colors.redAccent,
                    width: 1,
                  ),
                )),
              ),
              inactiveTextStyle: const TextStyle(
                fontSize: 14,
                color: Colors.redAccent,
                fontWeight: FontWeight.w700,
              ),
            ),
            const SizedBox(
              height: 30,
            ),
            // Pagination widget with rounded rectangle style buttons
            Pagination(
              numOfPages: 10,
              selectedPage: selectedPage,
              pagesVisible: 5,
              spacing: 10,
              onPageChanged: (page) {
                setState(() {
                  selectedPage = page;
                });
              },
              nextIcon: const Icon(
                Icons.arrow_forward_ios,
                size: 14,
              ),
              previousIcon: const Icon(
                Icons.arrow_back_ios,
                size: 14,
              ),
              activeTextStyle: const TextStyle(
                color: Colors.white,
                fontSize: 14,
                fontWeight: FontWeight.w700,
              ),
              activeBtnStyle: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.black),
                shape: MaterialStateProperty.all(
                  RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(38),
                  ),
                ),
              ),
              inactiveBtnStyle: ButtonStyle(
                shape: MaterialStateProperty.all(RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(38),
                )),
              ),
              inactiveTextStyle: const TextStyle(
                fontSize: 14,
                color: Colors.black,
                fontWeight: FontWeight.w700,
              ),
            ),
            const SizedBox(
              height: 30,
            ),
            // Pagination widget with larger arrow icons
            Pagination(
              numOfPages: 10,
              selectedPage: selectedPage,
              pagesVisible: 5,
              spacing: 10,
              onPageChanged: (page) {
                setState(() {
                  selectedPage = page;
                });
              },
              nextIcon: const Icon(
                Icons.arrow_circle_right_outlined,
                color: Colors.amberAccent,
                size: 35,
              ),
              previousIcon: const Icon(
                Icons.arrow_circle_left_outlined,
                color: Colors.amberAccent,
                size: 35,
              ),
              activeTextStyle: const TextStyle(
                color: Colors.white,
                fontSize: 14,
                fontWeight: FontWeight.w700,
              ),
              activeBtnStyle: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.amber),
                elevation: MaterialStateProperty.all(15),
              ),
              inactiveBtnStyle: ButtonStyle(
                elevation: MaterialStateProperty.all(0),
              ),
              inactiveTextStyle: const TextStyle(
                fontSize: 14,
                color: Colors.amber,
                fontWeight: FontWeight.w700,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Additional information

Properties

Name	Type	Default	Description
numOfPages	int	0	Number of pages to be displayed
selectedPage	int	0	The currently selected page
pagesVisible	int	0	Number of pages to be visible
onPageChanged	Function	null	Function to be called when a page is selected
nextIcon	Widget	null	Widget to be displayed as the next icon
previousIcon	Widget	null	Widget to be displayed as the previous icon
activeTextStyle	TextStyle	null	TextStyle for the active page
activeBtnStyle	ButtonStyle	null	ButtonStyle for the active page
inactiveBtnStyle	ButtonStyle	null	ButtonStyle for the inactive pages
inactiveTextStyle	TextStyle	null	TextStyle for the inactive pages
spacing	double	0	Spacing between the pages

License

MIT

Author

Varun V

Issues

If you find any issues, please report them here

更多关于Flutter分页管理插件pagination_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

htzhanglong 1楼•2 天前

更多关于Flutter分页管理插件pagination_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是一个关于如何在Flutter中使用pagination_flutter插件来实现分页管理的示例代码。pagination_flutter插件可以帮助你轻松地在Flutter应用中实现分页功能。

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

dependencies:
  flutter:
    sdk: flutter
  pagination_flutter: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来，下面是一个完整的示例代码，展示了如何使用pagination_flutter插件来实现分页功能。假设我们有一个API可以分页获取数据，每页返回10条数据。

import 'package:flutter/material.dart';
import 'package:pagination_flutter/pagination_flutter.dart';
import 'package:http/http.dart' as http;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Pagination Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PaginationExample(),
    );
  }
}

class PaginationExample extends StatefulWidget {
  @override
  _PaginationExampleState createState() => _PaginationExampleState();
}

class _PaginationExampleState extends State<PaginationExample> {
  final PaginationController _paginationController = PaginationController(initialPage: 1, pageLength: 10);
  List<dynamic> _items = [];

  @override
  void initState() {
    super.initState();
    _paginationController.addPageRequestListener((pageKey) {
      loadData(pageKey);
    });
  }

  Future<void> loadData(int page) async {
    try {
      final response = await http.get(Uri.parse('https://api.example.com/items?page=$page&limit=10'));
      final data = await response.json();
      setState(() {
        if (page == _paginationController.page) {
          _items = page == 1 ? data : _items + data;
        } else {
          // If the user navigates back to a previous page, we need to update the items list accordingly
          _items = _items.sublist(0, (page - 1) * 10) + data;
          for (int i = page + 1; i <= _paginationController.page; i++) {
            _paginationController.removePage(i);
          }
          _paginationController.setPage(page);
        }
      });
    } catch (error) {
      print('Error fetching data: $error');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Pagination Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            Expanded(
              child: ListView.builder(
                itemCount: _items.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text('Item ${_items[index]['id']}: ${_items[index]['name']}'),
                  );
                },
              ),
            ),
            PaginationWidget(
              paginationController: _paginationController,
              builder: (context, state) {
                if (state.isLastPage) {
                  return Center(child: Text('No more items'));
                }
                if (state.isFirstPage) {
                  return Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      ElevatedButton(
                        onPressed: () => _paginationController.nextPage(),
                        child: Text('Load More'),
                      ),
                    ],
                  );
                }
                return Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    ElevatedButton(
                      onPressed: () => _paginationController.previousPage(),
                      child: Text('Previous'),
                    ),
                    SizedBox(width: 16),
                    ElevatedButton(
                      onPressed: () => _paginationController.nextPage(),
                      child: Text('Next'),
                    ),
                  ],
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

代码说明：

依赖添加：
- 在pubspec.yaml中添加pagination_flutter依赖。
PaginationController：
- 创建一个PaginationController实例，用于管理分页状态。
数据加载：
- 使用addPageRequestListener监听分页请求，并在请求时调用loadData函数从API获取数据。
- loadData函数使用http包发送GET请求，获取数据后更新UI。
UI构建：
- 使用ListView.builder构建列表项。
- 使用PaginationWidget构建分页控件，并根据分页状态显示相应的按钮。
错误处理：
- 在loadData函数中添加简单的错误处理，打印错误信息。

请确保替换https://api.example.com/items?page=$page&limit=10为你的实际API URL，并根据API返回的数据结构修改data的处理逻辑。