Merge pull request #585 from nextcloud/performance/neonListView

Performance/neon list view

packages/neon/neon/lib/src/widgets/list_view.dart

@@ -2,65 +2,85 @@ import 'package:flutter/material.dart';
 import 'package:neon/src/widgets/error.dart';
 import 'package:neon/src/widgets/linear_progress_indicator.dart';
 
-class NeonListView<T> extends StatelessWidget {
+class NeonListView extends StatelessWidget {
-  const NeonListView({
+  NeonListView({
-    required this.items,
     required this.isLoading,
     required this.error,
     required this.onRefresh,
-    required this.builder,
+    required final NullableIndexedWidgetBuilder itemBuilder,
+    final int? itemCount,
+    this.scrollKey,
+    this.topFixedChildren,
+    this.topScrollingChildren,
+    super.key,
+  }) : sliver = SliverList.builder(
+          itemCount: itemCount,
+          itemBuilder: itemBuilder,
+        );
+
+  const NeonListView.custom({
+    required this.isLoading,
+    required this.error,
+    required this.onRefresh,
+    required this.sliver,
     this.scrollKey,
-    this.withFloatingActionButton = false,
     this.topFixedChildren,
     this.topScrollingChildren,
     super.key,
   });
 
-  final Iterable<T>? items;
   final bool isLoading;
   final Object? error;
   final RefreshCallback onRefresh;
-  final Widget Function(BuildContext, T data) builder;
   final String? scrollKey;
-  final bool withFloatingActionButton;
   final List<Widget>? topFixedChildren;
   final List<Widget>? topScrollingChildren;
+  final Widget sliver;
 
   @override
-  Widget build(final BuildContext context) => RefreshIndicator(
+  Widget build(final BuildContext context) {
+    final refreshIndicatorKey = GlobalKey<RefreshIndicatorState>();
+    final hasFloatingActionButton = Scaffold.maybeOf(context)?.hasFloatingActionButton ?? false;
+
+    return RefreshIndicator.adaptive(
+      key: refreshIndicatorKey,
       onRefresh: onRefresh,
-        child: Column(
+      child: CustomScrollView(
-          children: [
+        key: scrollKey != null ? PageStorageKey<String>(scrollKey!) : null,
-            ...?topFixedChildren,
+        primary: true,
-            NeonLinearProgressIndicator(
+        slivers: [
-              margin: const EdgeInsets.symmetric(
+          if (topFixedChildren != null)
+            SliverList.builder(
+              itemCount: topFixedChildren!.length,
+              itemBuilder: (final context, final index) => topFixedChildren![index],
+            ),
+          if (isLoading)
+            const SliverToBoxAdapter(
+              child: NeonLinearProgressIndicator(
+                margin: EdgeInsets.symmetric(
                   horizontal: 10,
                   vertical: 5,
                 ),
-              visible: isLoading,
               ),
-            Expanded(
+            ),
-              child: Scrollbar(
+          if (error != null)
-                child: ListView(
+            SliverToBoxAdapter(
-                  primary: true,
+              child: NeonError(
-                  key: scrollKey != null ? PageStorageKey<String>(scrollKey!) : null,
-                  padding: withFloatingActionButton ? const EdgeInsets.only(bottom: 88) : null,
-                  children: [
-                    ...?topScrollingChildren,
-                    NeonError(
                 error,
-                      onRetry: onRefresh,
+                onRetry: () async => refreshIndicatorKey.currentState!.show(),
               ),
-                    if (items != null) ...[
-                      for (final item in items!) ...[
-                        builder(context, item),
-                      ],
-                    ],
-                  ],
             ),
+          if (topScrollingChildren != null)
+            SliverList.builder(
+              itemCount: topScrollingChildren!.length,
+              itemBuilder: (final context, final index) => topScrollingChildren![index],
             ),
+          SliverPadding(
+            padding: hasFloatingActionButton ? const EdgeInsets.only(bottom: 88) : EdgeInsets.zero,
+            sliver: sliver,
           ),
         ],
       ),
     );
   }
+}

packages/neon/neon/lib/src/widgets/unified_search_results.dart

@@ -29,12 +29,18 @@ class NeonUnifiedSearchResults extends StatelessWidget {
     final bloc = accountsBloc.activeUnifiedSearchBloc;
     return ResultBuilder.behaviorSubject(
       stream: bloc.results,
-      builder: (final context, final results) => NeonListView(
+      builder: (final context, final results) {
-        items: results.data?.entries,
+        final values = results.data?.entries.toList();
+
+        return NeonListView(
           isLoading: results.isLoading,
           error: results.error,
           onRefresh: bloc.refresh,
-        builder: (final context, final snapshot) => AnimatedSize(
+          itemCount: values?.length ?? 0,
+          itemBuilder: (final context, final index) {
+            final snapshot = values![index];
+
+            return AnimatedSize(
               duration: const Duration(milliseconds: 100),
               child: _buildProvider(
                 context,
@@ -43,8 +49,10 @@ class NeonUnifiedSearchResults extends StatelessWidget {
                 snapshot.key,
                 snapshot.value,
               ),
-        ),
+            );
-      ),
+          },
+        );
+      },
     );
   }
 

packages/neon/neon_files/lib/neon_files.dart

@@ -11,7 +11,6 @@ import 'package:flutter/material.dart';
 import 'package:flutter_material_design_icons/flutter_material_design_icons.dart';
 import 'package:go_router/go_router.dart';
 import 'package:image_picker/image_picker.dart';
-import 'package:intersperse/intersperse.dart';
 import 'package:neon/blocs.dart';
 import 'package:neon/models.dart';
 import 'package:neon/nextcloud.dart';
@@ -44,6 +43,7 @@ part 'sort/files.dart';
 part 'utils/task.dart';
 part 'widgets/browser_view.dart';
 part 'widgets/file_preview.dart';
+part 'widgets/navigator.dart';
 
 class FilesApp extends AppImplementation<FilesBloc, FilesAppSpecificOptions> {
   FilesApp();

packages/neon/neon_files/lib/widgets/browser_view.dart

@@ -68,28 +68,32 @@ class _FilesBrowserViewState extends State<FilesBrowserView> {
                       input: files.data,
                       builder: (final context, final sorted) => ValueListenableBuilder(
                         valueListenable: widget.bloc.options.showHiddenFilesOption,
-                        builder: (final context, final showHiddenFiles, final _) => NeonListView<Widget>(
+                        builder: (final context, final showHiddenFiles, final _) {
-                          scrollKey: 'files-${pathSnapshot.requireData.join('/')}',
+                          final uploadingTasks = tasksSnapshot.requireData
-                          withFloatingActionButton: true,
+                              .whereType<FilesUploadTask>()
-                          items: [
+                              .where(
-                            for (final uploadTask in tasksSnapshot.requireData.whereType<FilesUploadTask>().where(
                                 (final task) =>
                                     sorted.where((final file) => _pathMatchesFile(task.path, file.name)).isEmpty,
-                                )) ...[
+                              )
-                              FileListTile(
+                              .toList();
+
+                          return NeonListView(
+                            scrollKey: 'files-${pathSnapshot.requireData.join('/')}',
+                            itemCount: uploadingTasks.length + sorted.length,
+                            itemBuilder: (final context, final index) {
+                              if (index < uploadingTasks.length) {
+                                return FileListTile(
                                   bloc: widget.filesBloc,
                                   browserBloc: widget.bloc,
                                   details: FileDetails.fromUploadTask(
-                                  task: uploadTask,
+                                    task: uploadingTasks[index],
-                                ),
-                                mode: widget.mode,
                                   ),
-                            ],
+                                );
-                            for (final file in sorted) ...[
+                              }
+
+                              final file = sorted[index - uploadingTasks.length];
                               if ((widget.mode != FilesBrowserMode.selectDirectory || file.isDirectory) &&
-                                  (!file.isHidden || showHiddenFiles)) ...[
+                                  (!file.isHidden || showHiddenFiles)) {
-                                Builder(
-                                  builder: (final context) {
                                 final matchingTask = tasksSnapshot.requireData
                                     .firstWhereOrNull((final task) => _pathMatchesFile(task.path, file.name));
 
@@ -107,70 +111,23 @@ class _FilesBrowserViewState extends State<FilesBrowserView> {
                                   bloc: widget.filesBloc,
                                   browserBloc: widget.bloc,
                                   details: details,
-                                      mode: widget.mode,
                                 );
+                              }
+
+                              return null;
                             },
-                                ),
-                              ],
-                            ],
-                          ],
                             isLoading: files.isLoading,
                             error: files.error,
                             onRefresh: widget.bloc.refresh,
-                          builder: (final context, final widget) => widget,
                             topScrollingChildren: [
-                            Align(
+                              FilesBrowserNavigator(
-                              alignment: Alignment.topLeft,
+                                path: pathSnapshot.requireData,
-                              child: Container(
+                                bloc: widget.bloc,
-                                margin: const EdgeInsets.symmetric(
-                                  horizontal: 10,
-                                ),
-                                child: Wrap(
-                                  crossAxisAlignment: WrapCrossAlignment.center,
-                                  children: <Widget>[
-                                    IconButton(
-                                      padding: EdgeInsets.zero,
-                                      tooltip: AppLocalizations.of(context).goToPath(''),
-                                      icon: const Icon(
-                                        Icons.house,
-                                      ),
-                                      onPressed: () {
-                                        widget.bloc.setPath([]);
-                                      },
-                                    ),
-                                    for (var i = 0; i < pathSnapshot.requireData.length; i++) ...[
-                                      Builder(
-                                        builder: (final context) {
-                                          final path = pathSnapshot.requireData.sublist(0, i + 1);
-                                          return Tooltip(
-                                            message: AppLocalizations.of(context).goToPath(path.join('/')),
-                                            excludeFromSemantics: true,
-                                            child: TextButton(
-                                              onPressed: () {
-                                                widget.bloc.setPath(path);
-                                              },
-                                              child: Text(
-                                                pathSnapshot.requireData[i],
-                                                semanticsLabel: AppLocalizations.of(context).goToPath(path.join('/')),
-                                              ),
                               ),
+                            ],
                           );
                         },
                       ),
-                                    ],
-                                  ]
-                                      .intersperse(
-                                        const Icon(
-                                          Icons.keyboard_arrow_right,
-                                        ),
-                                      )
-                                      .toList(),
-                                ),
-                              ),
-                            ),
-                          ],
-                        ),
-                      ),
                     ),
                   ),
           ),

packages/neon/neon_files/lib/widgets/file_preview.dart

@@ -39,7 +39,7 @@ class FilePreview extends StatelessWidget {
 
           return ValueListenableBuilder<bool>(
             valueListenable: bloc.options.showPreviewsOption,
-            builder: (final context, final showPreviews, final child) {
+            builder: (final context, final showPreviews, final _) {
               if (showPreviews && (details.hasPreview ?? false)) {
                 final preview = FilePreviewImage(
                   file: details,
@@ -56,13 +56,12 @@ class FilePreview extends StatelessWidget {
                 return preview;
               }
 
-              return child!;
+              return FileIcon(
-            },
-            child: FileIcon(
                 details.name,
                 color: color,
                 size: size.shortestSide,
-            ),
+              );
+            },
           );
         },
       ),

packages/neon/neon_files/lib/widgets/navigator.dart

@@ -0,0 +1,66 @@
+part of '../neon_files.dart';
+
+class FilesBrowserNavigator extends StatelessWidget {
+  const FilesBrowserNavigator({
+    required this.path,
+    required this.bloc,
+    super.key,
+  });
+
+  final List<String> path;
+  final FilesBrowserBloc bloc;
+
+  static const double _height = 30;
+
+  @override
+  Widget build(final BuildContext context) => SizedBox(
+        height: _height,
+        child: ListView.separated(
+          padding: const EdgeInsets.symmetric(
+            horizontal: 10,
+          ),
+          scrollDirection: Axis.horizontal,
+          itemCount: path.length + 1,
+          itemBuilder: (final context, final index) {
+            if (index == 0) {
+              return IconButton(
+                padding: EdgeInsets.zero,
+                visualDensity: const VisualDensity(
+                  horizontal: VisualDensity.minimumDensity,
+                  vertical: VisualDensity.minimumDensity,
+                ),
+                tooltip: AppLocalizations.of(context).goToPath(''),
+                icon: const Icon(
+                  Icons.house,
+                  size: _height,
+                ),
+                onPressed: () {
+                  bloc.setPath([]);
+                },
+              );
+            }
+
+            final path = this.path.sublist(0, index);
+            final label = path.join('/');
+
+            return Tooltip(
+              message: AppLocalizations.of(context).goToPath(label),
+              excludeFromSemantics: true,
+              child: TextButton(
+                onPressed: () {
+                  bloc.setPath(path);
+                },
+                child: Text(
+                  path.last,
+                  semanticsLabel: AppLocalizations.of(context).goToPath(label),
+                ),
+              ),
+            );
+          },
+          separatorBuilder: (final context, final index) => const Icon(
+            Icons.keyboard_arrow_right,
+            size: _height,
+          ),
+        ),
+      );
+}

packages/neon/neon_files/pubspec.yaml

@@ -21,7 +21,6 @@ dependencies:
   flutter_material_design_icons: ^1.1.7296
   go_router: ^11.1.2
   image_picker: ^1.0.4
-  intersperse: ^2.0.0
   intl: ^0.18.1
   neon:
     git:

packages/neon/neon_news/lib/widgets/articles_view.dart

@@ -34,9 +34,8 @@ class _NewsArticlesViewState extends State<NewsArticlesView> {
             sortPropertyOption: widget.newsBloc.options.articlesSortPropertyOption,
             sortBoxOrderOption: widget.newsBloc.options.articlesSortBoxOrderOption,
             input: articles.data,
-            builder: (final context, final sorted) => NeonListView<NewsArticle>(
+            builder: (final context, final sorted) => NeonListView(
               scrollKey: 'news-articles',
-              items: feeds.hasData ? sorted : null,
               isLoading: articles.isLoading || feeds.isLoading,
               error: articles.error ?? feeds.error,
               onRefresh: () async {
@@ -45,11 +44,16 @@ class _NewsArticlesViewState extends State<NewsArticlesView> {
                   widget.newsBloc.refresh(),
                 ]);
               },
-              builder: (final context, final article) => _buildArticle(
+              itemCount: feeds.hasData ? sorted.length : null,
+              itemBuilder: (final context, final index) {
+                final article = sorted[index];
+
+                return _buildArticle(
                   context,
                   article,
                   feeds.requireData.singleWhere((final feed) => feed.id == article.feedId),
-              ),
+                );
+              },
               topFixedChildren: [
                 StreamBuilder<FilterType>(
                   stream: widget.bloc.filterType,

packages/neon/neon_news/lib/widgets/feeds_view.dart

@@ -22,16 +22,15 @@ class NewsFeedsView extends StatelessWidget {
             input: folders.hasData
                 ? feeds.data?.where((final f) => folderID == null || f.folderId == folderID).toList()
                 : null,
-            builder: (final context, final sorted) => NeonListView<NewsFeed>(
+            builder: (final context, final sorted) => NeonListView(
               scrollKey: 'news-feeds',
-              withFloatingActionButton: true,
-              items: sorted,
               isLoading: feeds.isLoading || folders.isLoading,
               error: feeds.error ?? folders.error,
               onRefresh: bloc.refresh,
-              builder: (final context, final feed) => _buildFeed(
+              itemCount: sorted.length,
+              itemBuilder: (final context, final index) => _buildFeed(
                 context,
-                feed,
+                sorted[index],
                 folders.requireData,
               ),
             ),

packages/neon/neon_news/lib/widgets/folders_view.dart

@@ -26,14 +26,16 @@ class NewsFoldersView extends StatelessWidget {
                     return (folder, feedCount, unreadCount);
                   }).toList()
                 : null,
-            builder: (final context, final sorted) => NeonListView<FolderFeedsWrapper>(
+            builder: (final context, final sorted) => NeonListView(
               scrollKey: 'news-folders',
-              withFloatingActionButton: true,
-              items: sorted,
               isLoading: feeds.isLoading || folders.isLoading,
               error: feeds.error ?? folders.error,
               onRefresh: bloc.refresh,
-              builder: _buildFolder,
+              itemCount: sorted.length,
+              itemBuilder: (final context, final index) => _buildFolder(
+                context,
+                sorted[index],
+              ),
             ),
           ),
         ),

packages/neon/neon_notes/lib/widgets/categories_view.dart

@@ -25,13 +25,16 @@ class NotesCategoriesView extends StatelessWidget {
                 ),
               )
               .toList(),
-          builder: (final context, final sorted) => NeonListView<NoteCategory>(
+          builder: (final context, final sorted) => NeonListView(
             scrollKey: 'notes-categories',
-            items: sorted,
             isLoading: notes.isLoading,
             error: notes.error,
             onRefresh: bloc.refresh,
-            builder: _buildCategory,
+            itemCount: sorted.length,
+            itemBuilder: (final context, final index) => _buildCategory(
+              context,
+              sorted[index],
+            ),
           ),
         ),
       );

packages/neon/neon_notes/lib/widgets/notes_view.dart

@@ -21,14 +21,13 @@ class NotesView extends StatelessWidget {
           sortPropertyOption: bloc.options.notesSortPropertyOption,
           sortBoxOrderOption: bloc.options.notesSortBoxOrderOption,
           input: category != null ? notes.data?.where((final note) => note.category == category).toList() : notes.data,
-          builder: (final context, final sorted) => NeonListView<NotesNote>(
+          builder: (final context, final sorted) => NeonListView(
             scrollKey: 'notes-notes',
-            withFloatingActionButton: true,
-            items: sorted,
             isLoading: notes.isLoading,
             error: notes.error,
             onRefresh: bloc.refresh,
-            builder: _buildNote,
+            itemCount: sorted.length,
+            itemBuilder: (final context, final index) => _buildNote(context, sorted[index]),
           ),
         ),
       );

packages/neon/neon_notifications/lib/pages/main.dart

@@ -35,14 +35,13 @@ class _NotificationsMainPageState extends State<NotificationsMainPage> {
             tooltip: AppLocalizations.of(context).notificationsDismissAll,
             child: const Icon(MdiIcons.checkAll),
           ),
-          body: NeonListView<NotificationsNotification>(
+          body: NeonListView(
             scrollKey: 'notifications-notifications',
-            withFloatingActionButton: true,
-            items: notifications.data,
             isLoading: notifications.isLoading,
             error: notifications.error,
             onRefresh: bloc.refresh,
-            builder: _buildNotification,
+            itemCount: notifications.data?.length,
+            itemBuilder: (final context, final index) => _buildNotification(context, notifications.data![index]),
           ),
         ),
       );