use previewgrid also on shufflescreen

android/build.gradle

@@ -1,5 +1,5 @@
 buildscript {
-    ext.kotlin_version = '1.4.32'
+    ext.kotlin_version = '1.6.0'
     repositories {
         google()
         mavenCentral()

lib/preview_grid.dart

@@ -6,9 +6,11 @@ import 'package:openmediacentermobile/platform.dart';
 import 'package:openmediacentermobile/preview_tile.dart';
 
 class PreviewGrid extends StatefulWidget {
-  const PreviewGrid({Key? key, required this.videoLoader}) : super(key: key);
+  const PreviewGrid({Key? key, required this.videoLoader, this.headerBuilder, this.footerBuilder}) : super(key: key);
 
   final Future<List<VideoT>> Function() videoLoader;
+  final Widget Function(_PreviewGridState state)? footerBuilder;
+  final Widget Function(_PreviewGridState state)? headerBuilder;
 
   @override
   State<PreviewGrid> createState() => _PreviewGridState();
@@ -21,7 +23,13 @@ class _PreviewGridState extends State<PreviewGrid> {
   @override
   void initState() {
     super.initState();
+    loadData();
+  }
+
+  void loadData() {
+    setState(() {
       _data = widget.videoLoader();
+    });
   }
 
   @override
@@ -36,11 +44,15 @@ class _PreviewGridState extends State<PreviewGrid> {
         } else if (snapshot.hasData) {
           return Stack(
             children: [
-              MasonryGridView.count(
+              Column(
+                children: [
+                  if (widget.headerBuilder != null) widget.headerBuilder!(this),
+                  Expanded(
+                    child: MasonryGridView.count(
                       // every tile should be at max 330 pixels long...
                       crossAxisCount: isTV() ? width ~/ 200 : width ~/ 275,
                       // crossAxisCount: isTV() ? width ~/ 200 : width ~/ 330,
-
+                      itemCount: snapshot.data!.length,
                       mainAxisSpacing: 4,
                       crossAxisSpacing: 4,
                       padding: EdgeInsets.all(5),
@@ -60,6 +72,10 @@ class _PreviewGridState extends State<PreviewGrid> {
                         );
                       },
                     ),
+                  ),
+                  if (widget.footerBuilder != null) widget.footerBuilder!(this),
+                ],
+              ),
               if (_previewImage != null) ...[
                 BackdropFilter(
                   filter: ImageFilter.blur(
@@ -72,7 +88,9 @@ class _PreviewGridState extends State<PreviewGrid> {
                 ),
                 Container(
                   child: Center(
-                    child: Padding(padding: EdgeInsets.symmetric(horizontal: 50),child: ClipRRect(borderRadius: BorderRadius.circular(10.0), child: _previewImage!)),
+                    child: Padding(
+                        padding: EdgeInsets.symmetric(horizontal: 50),
+                        child: ClipRRect(borderRadius: BorderRadius.circular(10.0), child: _previewImage!)),
                   ),
                 ),
               ],

lib/preview_tile.dart

@@ -91,7 +91,7 @@ class _PreviewTileState extends State<PreviewTile> {
                       snapshot.data!
                     ],
                   ),
-                  color: Color(0xFF6CE56F),
+                  color: Color(0x6a94a6ff),
                 ),
                 Positioned.fill(
                   child: Material(

lib/shufflescreen.dart

@@ -2,7 +2,7 @@ import 'dart:convert';
 import 'dart:math';
 
 import 'package:flutter/material.dart';
-import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
+import 'package:openmediacentermobile/preview_grid.dart';
 import 'preview_tile.dart';
 
 import 'api/api.dart';
@@ -16,8 +16,6 @@ class ShuffleScreen extends StatefulWidget {
 }
 
 class _ShuffleScreenState extends State<ShuffleScreen> {
-  late Future<List<VideoT>> _data;
-
   Future<List<VideoT>> loadData(int nr) async {
     final data = await API.query("video", "getRandomMovies", {'Number': nr, 'Seed': Random().nextInt(0x7fffffff)});
 
@@ -28,65 +26,30 @@ class _ShuffleScreenState extends State<ShuffleScreen> {
     return dta;
   }
 
-  @override
-  void initState() {
-    super.initState();
-
-    _data = Future.delayed(Duration.zero).then((_) {
-      double width = MediaQuery.of(context).size.width;
-      return loadData((isTV() ? width ~/ 200 : width ~/ 330) * 2);
-    });
-
-  }
-
   @override
   Widget build(BuildContext context) {
     double width = MediaQuery.of(context).size.width;
-    return FutureBuilder<List<VideoT>>(
+    return PreviewGrid(
-      future: _data, // a previously-obtained Future<String> or null
+      videoLoader: () {
-      builder: (BuildContext context, AsyncSnapshot<List<VideoT>> snapshot) {
+        return loadData((isTV() ? width ~/ 200 : width ~/ 330) * 2);
-        if (snapshot.hasError) {
-          return Text("Error");
-        } else if (snapshot.hasData) {
-          return Column(children: [
-            MasonryGridView.count(
-              shrinkWrap: true,
-              // every tile should be at max 330 pixels long...
-              crossAxisCount: isTV() ? width ~/ 200 : width ~/ 330,
-              mainAxisSpacing: 4,
-              crossAxisSpacing: 4,
-              padding: EdgeInsets.all(5),
-              itemCount: snapshot.data!.length,
-              itemBuilder: (context, index) {
-                return PreviewTile(dta: snapshot.data![index]);
       },
-            ),
+      footerBuilder: (state) => Column(
+        children: [
           const SizedBox(
             height: 25,
           ),
           TextButton.icon(
             onPressed: () {
-                  setState(() {
+              state.loadData();
-                    _data = loadData((isTV() ? width ~/ 200 : width ~/ 330) * 2);
-                  });
             },
             icon: const Icon(Icons.update),
-                label: const Text("Shuffle"))
+            label: const Text("Shuffle"),
-          ]);
+          ),
-        } else {
+          const SizedBox(
-          return Column(children: const <Widget>[
+            height: 25,
-            SizedBox(
+          ),
-              width: 60,
+        ],
-              height: 60,
-              child: CircularProgressIndicator(),
       ),
-            Padding(
-              padding: EdgeInsets.only(top: 16),
-              child: Text('Awaiting result...'),
-            )
-          ]);
-        }
-      },
     );
   }
 }