flutter_pagination_widget 0.1.0

flutter_pagination_widget: ^0.1.0 copied to clipboard

example/lib/main.dart

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Pagination Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
        useMaterial3: true,
      ),
      home: const PaginationDemoScreen(),
    );
  }
}

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

  @override
  State<PaginationDemoScreen> createState() => _PaginationDemoScreenState();
}

class _PaginationDemoScreenState extends State<PaginationDemoScreen> {
  int current = 1;
  int itemsPerPage = 10;
  final int totalItems = 125;

  bool showFirstLast = true;
  bool showPageSize = true;
  bool showJump = true;
  PaginationLayoutMode layoutMode = PaginationLayoutMode.auto;

  List<String> get _currentItems {
    int start = (current - 1) * itemsPerPage;
    int end = (start + itemsPerPage).clamp(0, totalItems);
    if (start >= totalItems) return [];
    return List.generate(
      end - start,
      (index) => 'User Item #${start + index + 1}',
    );
  }

  @override
  Widget build(BuildContext context) {
    // Automatically calculate from, to, lastPage using PaginationModel.calculate
    final meta = PaginationModel.calculate(
      total: totalItems,
      currentPage: current,
      pageSize: itemsPerPage,
    );

    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Pagination Widget'),
        backgroundColor: Colors.teal,
        foregroundColor: Colors.white,
      ),
      body: Column(
        children: [
          // Control panel to toggle pagination options
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            color: Colors.teal.shade50,
            child: Wrap(
              alignment: WrapAlignment.spaceAround,
              crossAxisAlignment: WrapCrossAlignment.center,
              spacing: 12,
              runSpacing: 8,
              children: [
                Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    const Text('First/Last: '),
                    Switch(
                      value: showFirstLast,
                      onChanged: (v) => setState(() => showFirstLast = v),
                    ),
                  ],
                ),
                Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    const Text('Page Size: '),
                    Switch(
                      value: showPageSize,
                      onChanged: (v) => setState(() => showPageSize = v),
                    ),
                  ],
                ),
                Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    const Text('Jump Input: '),
                    Switch(
                      value: showJump,
                      onChanged: (v) => setState(() => showJump = v),
                    ),
                  ],
                ),
              ],
            ),
          ),
          const Divider(height: 1),
          // List of items
          Expanded(
            child: _currentItems.isEmpty
                ? const Center(child: Text('No items on this page.'))
                : ListView.builder(
                    itemCount: _currentItems.length,
                    itemBuilder: (context, index) {
                      final item = _currentItems[index];
                      final globalIndex = (current - 1) * itemsPerPage + index + 1;
                      return Card(
                        margin: const EdgeInsets.symmetric(
                          horizontal: 16,
                          vertical: 6,
                        ),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(12),
                        ),
                        elevation: 2,
                        child: ListTile(
                          contentPadding: const EdgeInsets.symmetric(
                            horizontal: 16,
                            vertical: 8,
                          ),
                          leading: CircleAvatar(
                            backgroundColor: Colors.teal.shade100,
                            foregroundColor: Colors.teal.shade800,
                            child: Text('#$globalIndex'),
                          ),
                          title: Text(
                            item,
                            style: const TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 16,
                            ),
                          ),
                          subtitle: Text(
                            "Displaying record $globalIndex out of $totalItems",
                            style: TextStyle(color: Colors.grey[600]),
                          ),
                          trailing: const Icon(
                            Icons.chevron_right,
                            color: Colors.teal,
                          ),
                          onTap: () {
                            ScaffoldMessenger.of(context).showSnackBar(
                              SnackBar(
                                content: Text("Selected $item"),
                                duration: const Duration(seconds: 1),
                              ),
                            );
                          },
                        ),
                      );
                    },
                  ),
          ),
          const Divider(height: 1),
          const SizedBox(height: 12),

          // Enhanced PaginationWidget
          PaginationWidget(
            meta: meta,
            onPageChanged: (p) => setState(() => current = p),
            onPageSizeChanged: (newSize) {
              setState(() {
                itemsPerPage = newSize;
                current = 1; // Reset to first page when size changes
              });
            },
            showFirstLastButtons: showFirstLast,
            showPageSizeSelector: showPageSize,
            showJumpToPage: showJump,
            pageSizeOptions: const [5, 10, 20, 50],
            primaryColor: Colors.teal,
            borderRadius: BorderRadius.circular(8),
            layoutMode: layoutMode,
          ),
          const SizedBox(height: 16),
        ],
      ),
    );
  }
}