import 'dart:ui'; import 'package:flutter/material.dart'; import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart'; 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); final Future> Function() videoLoader; @override State createState() => _PreviewGridState(); } class _PreviewGridState extends State { late Future> _data; Image? _previewImage; @override void initState() { super.initState(); _data = widget.videoLoader(); } @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; return FutureBuilder>( future: _data, // a previously-obtained Future or null builder: (BuildContext context, AsyncSnapshot> snapshot) { if (snapshot.hasError) { return Text("Error"); } else if (snapshot.hasData) { return Stack( children: [ MasonryGridView.count( // every tile should be at max 330 pixels long... crossAxisCount: isTV() ? width ~/ 200 : width ~/ 275, // crossAxisCount: isTV() ? width ~/ 200 : width ~/ 330, mainAxisSpacing: 4, crossAxisSpacing: 4, padding: EdgeInsets.all(5), itemBuilder: (context, index) { return PreviewTile( dta: snapshot.data![index], onLongPress: (img) { setState(() { _previewImage = img; }); }, onLongPressEnd: () { setState(() { _previewImage = null; }); }, ); }, ), if (_previewImage != null) ...[ BackdropFilter( filter: ImageFilter.blur( sigmaX: 5.0, sigmaY: 5.0, ), child: Container( color: Colors.white.withOpacity(0.6), ), ), Container( child: Center( child: Padding(padding: EdgeInsets.symmetric(horizontal: 50),child: ClipRRect(borderRadius: BorderRadius.circular(10.0), child: _previewImage!)), ), ), ], ], ); } else { return Column(children: const [ SizedBox( width: 60, height: 60, child: CircularProgressIndicator(), ), Padding( padding: EdgeInsets.only(top: 16), child: Text('Awaiting result...'), ) ]); } }, ); } }