diff --git a/example/lib/pages/components/pagination_example.dart b/example/lib/pages/components/pagination_example.dart index d06836db..df318ed5 100644 --- a/example/lib/pages/components/pagination_example.dart +++ b/example/lib/pages/components/pagination_example.dart @@ -12,18 +12,44 @@ class PaginationExample extends StatefulWidget { } class _PaginationExampleState extends State { + int currentPage = 1; + @override Widget build(BuildContext context) { return ExampleScaffold( name: PaginationExample.name, - child: Column( - children: [ - ZetaPagination(pages: 1000), - ZetaPagination( - pages: 9, - type: ZetaPaginationType.dropdown, + child: Center( + child: Padding( + padding: const EdgeInsets.all(64), + child: Column( + children: [ + Expanded( + child: Center( + child: Text( + 'Current Page: ${currentPage}', + style: Theme.of(context).textTheme.bodyLarge, + ), + ), + ), + ZetaPagination( + pages: 10, + currentPage: currentPage, + onChange: (val) => setState(() { + currentPage = val; + }), + ), + const SizedBox(height: 8), + ZetaPagination( + pages: 10, + currentPage: currentPage, + onChange: (val) => setState(() { + currentPage = val; + }), + type: ZetaPaginationType.dropdown, + ), + ], ), - ], + ), ), ); } diff --git a/example/widgetbook/main.dart b/example/widgetbook/main.dart index 0a348249..96a46c7f 100644 --- a/example/widgetbook/main.dart +++ b/example/widgetbook/main.dart @@ -18,6 +18,7 @@ import 'pages/components/dropdown_widgetbook.dart'; import 'pages/components/in_page_banner_widgetbook.dart'; import 'pages/components/list_item_widgetbook.dart'; import 'pages/components/navigation_bar_widgetbook.dart'; +import 'pages/components/pagination_widgetbook.dart'; import 'pages/components/password_input_widgetbook.dart'; import 'pages/components/progress_widgetbook.dart'; import 'pages/components/radio_widgetbook.dart'; @@ -87,6 +88,7 @@ class HotReload extends StatelessWidget { WidgetbookUseCase(name: 'Dial Pad', builder: (context) => dialPadUseCase(context)), WidgetbookUseCase(name: 'List Item', builder: (context) => listItemUseCase(context)), WidgetbookUseCase(name: 'Navigation Bar', builder: (context) => navigationBarUseCase(context)), + WidgetbookUseCase(name: 'Pagination', builder: (context) => paginationUseCase(context)), WidgetbookComponent( name: 'Progress', useCases: [ diff --git a/example/widgetbook/pages/components/pagination_widgetbook.dart b/example/widgetbook/pages/components/pagination_widgetbook.dart new file mode 100644 index 00000000..2d383ec4 --- /dev/null +++ b/example/widgetbook/pages/components/pagination_widgetbook.dart @@ -0,0 +1,18 @@ +import 'package:flutter/material.dart'; +import 'package:widgetbook/widgetbook.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +import '../../test/test_components.dart'; + +Widget paginationUseCase(BuildContext context) => WidgetbookTestWidget( + widget: ZetaPagination( + pages: 10, + type: context.knobs.list( + label: 'Type', + options: ZetaPaginationType.values, + labelBuilder: (value) => value.name.split('.').last.toUpperCase(), + ), + rounded: context.knobs.boolean(label: 'Rounded'), + disabled: context.knobs.boolean(label: 'Disabled'), + ), + ); diff --git a/lib/src/components/pagination/pagination.dart b/lib/src/components/pagination/pagination.dart index 5d39c0a3..4a79f809 100644 --- a/lib/src/components/pagination/pagination.dart +++ b/lib/src/components/pagination/pagination.dart @@ -28,12 +28,16 @@ class ZetaPagination extends StatefulWidget { this.rounded = true, this.disabled = false, super.key, - }) : assert( + }) : assert( pages > 0, 'Pages must be greater than zero', + ), + assert( + currentPage >= 1 && currentPage <= pages, + 'currentPage must be greater than 1 and less than the number of pages', ); - /// The number of pages to switch between. + /// The number of pages. final int pages; /// The current page. @@ -198,7 +202,6 @@ class _ZetaPaginationState extends State { ), padding: const EdgeInsets.symmetric( horizontal: ZetaSpacing.x3, - // vertical: ZetaSpacing.x2, ), ), ); @@ -216,22 +219,22 @@ class _ZetaPaginationState extends State { _PaginationItem( icon: widget.rounded ? ZetaIcons.first_page_round : ZetaIcons.first_page_sharp, onPressed: () => _onItemPressed(1), - disabled: widget.disabled || _currentPage == 1, + disabled: widget.disabled, rounded: widget.rounded, ), _PaginationItem( icon: widget.rounded ? ZetaIcons.chevron_left_round : ZetaIcons.chevron_left_sharp, onPressed: () => _onItemPressed(max(1, _currentPage - 1)), - disabled: widget.disabled || _currentPage == 1, + disabled: widget.disabled, rounded: widget.rounded, ), if (!showDropdown) ...numberedPaginationItems else paginationDropdown, _PaginationItem( - icon: widget.rounded ? ZetaIcons.chevron_right_round : ZetaIcons.cellular_signal_sharp, + icon: widget.rounded ? ZetaIcons.chevron_right_round : ZetaIcons.chevron_right_sharp, onPressed: () => _onItemPressed( min(widget.pages, _currentPage + 1), ), - disabled: widget.disabled || _currentPage == widget.pages, + disabled: widget.disabled, rounded: widget.rounded, ), if (!showDropdown) @@ -240,7 +243,7 @@ class _ZetaPaginationState extends State { onPressed: () => _onItemPressed( widget.pages, ), - disabled: widget.disabled || _currentPage == widget.pages, + disabled: widget.disabled, rounded: widget.rounded, ), ]; @@ -303,6 +306,9 @@ class _PaginationItemState extends State<_PaginationItem> { Color _getColor(Set states) { final colors = Zeta.of(context).colors; + if (widget.disabled) { + return colors.surfaceDisabled; + } if (widget.selected) { return colors.cool[100]!; } @@ -337,7 +343,10 @@ class _PaginationItemState extends State<_PaginationItem> { ), ); } else if (widget.icon != null) { - child = Icon(widget.icon); + child = Icon( + widget.icon, + color: widget.disabled ? colors.iconDisabled : colors.iconDefault, + ); } return ConstrainedBox( @@ -347,10 +356,10 @@ class _PaginationItemState extends State<_PaginationItem> { minWidth: _itemWidth, ), child: Material( - color: widget.selected ? colors.cool[100] : colors.surfacePrimary, + // color: widget.selected ? colors.cool[100] : colors.surfacePrimary, borderRadius: widget.rounded ? ZetaRadius.minimal : ZetaRadius.none, child: InkWell( - onTap: widget.onPressed, + onTap: widget.disabled ? null : widget.onPressed, statesController: _controller, borderRadius: widget.rounded ? ZetaRadius.minimal : ZetaRadius.none, highlightColor: Colors.transparent,