diff --git a/lib/ui/components/bottom_action_bar/action_bar_widget.dart b/lib/ui/components/bottom_action_bar/action_bar_widget.dart index b1c6df622..bb790a9ec 100644 --- a/lib/ui/components/bottom_action_bar/action_bar_widget.dart +++ b/lib/ui/components/bottom_action_bar/action_bar_widget.dart @@ -2,15 +2,36 @@ import 'package:flutter/material.dart'; import 'package:photos/models/selected_files.dart'; import 'package:photos/theme/ente_theme.dart'; -class ActionBarWidget extends StatelessWidget { +class ActionBarWidget extends StatefulWidget { final String? text; final List iconButtons; + final SelectedFiles? selectedFiles; const ActionBarWidget({ - this.text, required this.iconButtons, + this.text, + this.selectedFiles, super.key, }); + @override + State createState() => _ActionBarWidgetState(); +} + +class _ActionBarWidgetState extends State { + final ValueNotifier _selectedFilesNotifier = ValueNotifier(0); + + @override + void initState() { + widget.selectedFiles?.addListener(_selectedFilesListener); + super.initState(); + } + + @override + void dispose() { + widget.selectedFiles?.removeListener(_selectedFilesListener); + super.dispose(); + } + @override Widget build(BuildContext context) { return SizedBox( @@ -23,13 +44,12 @@ class ActionBarWidget extends StatelessWidget { List _actionBarWidgets(BuildContext context) { final actionBarWidgets = []; - final initialLength = iconButtons.length; + final initialLength = widget.iconButtons.length; final textTheme = getEnteTextTheme(context); final colorScheme = getEnteColorScheme(context); - final hasSelectedFiles = SelectedFiles().files.isNotEmpty; - actionBarWidgets.addAll(iconButtons); - if (text != null) { + actionBarWidgets.addAll(widget.iconButtons); + if (widget.text != null) { //adds 12 px spacing at the start and between iconButton elements for (var i = 0; i < initialLength; i++) { actionBarWidgets.insert( @@ -44,20 +64,29 @@ class ActionBarWidget extends StatelessWidget { Flexible( child: Row( children: [ - Text( - text!, - style: hasSelectedFiles - ? textTheme.body - : textTheme.small.copyWith( - color: colorScheme.textMuted, - ), - ) + widget.selectedFiles != null + ? ValueListenableBuilder( + valueListenable: _selectedFilesNotifier, + builder: (context, value, child) { + return Text( + "${_selectedFilesNotifier.value} selected", + style: textTheme.small.copyWith( + color: colorScheme.blurTextBase, + ), + ); + }, + ) + : Text( + widget.text!, + style: textTheme.small + .copyWith(color: colorScheme.textMuted), + ), ], ), ), ]); //to add whitespace of 8pts or 12 pts at the end - if (iconButtons.length > 1) { + if (widget.iconButtons.length > 1) { actionBarWidgets.add( const SizedBox(width: 8), ); @@ -69,4 +98,10 @@ class ActionBarWidget extends StatelessWidget { } return actionBarWidgets; } + + void _selectedFilesListener() { + if (widget.selectedFiles!.files.isNotEmpty) { + _selectedFilesNotifier.value = widget.selectedFiles!.files.length; + } + } } diff --git a/lib/ui/components/bottom_action_bar/bottom_action_bar_widget.dart b/lib/ui/components/bottom_action_bar/bottom_action_bar_widget.dart index dfbe3b9e3..8a033ffd3 100644 --- a/lib/ui/components/bottom_action_bar/bottom_action_bar_widget.dart +++ b/lib/ui/components/bottom_action_bar/bottom_action_bar_widget.dart @@ -58,6 +58,7 @@ class BottomActionBarWidget extends StatelessWidget { horizontal: text == null ? 12 : 0, ), child: ActionBarWidget( + selectedFiles: selectedFiles, text: text, iconButtons: _iconButtons(), ), diff --git a/lib/ui/viewer/gallery/collection_page.dart b/lib/ui/viewer/gallery/collection_page.dart index 7c1e1a8d2..dac793def 100644 --- a/lib/ui/viewer/gallery/collection_page.dart +++ b/lib/ui/viewer/gallery/collection_page.dart @@ -120,7 +120,7 @@ class _CollectionPageState extends State { child: BottomActionBarWidget( selectedFiles: _selectedFiles, expandedMenu: const SizedBox(height: 150), - text: "3 selected", + text: _selectedFiles.files.length.toString() + ' selected', onCancel: () { if (_selectedFiles.files.isNotEmpty) { _selectedFiles.clearAll();