OpenMediacenterMobileFlutter/lib/preview_tile.dart

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:openmediacentermobile/videoscreen.dart';

import 'api/api.dart';
import 'platform.dart';

class VideoT {
  int id;
  String title;
  double Ratio;

  VideoT(this.title, this.id, this.Ratio);

  factory VideoT.fromJson(dynamic json) {
    return VideoT(json['MovieName'] as String, json['MovieId'] as int, (json['Ratio'] as num).toDouble());
  }
}

class PreviewTile extends StatefulWidget {
  const PreviewTile({Key? key, required this.dta}) : super(key: key);
  final VideoT dta;

  @override
  _PreviewTileState createState() => _PreviewTileState();
}

class _PreviewTileState extends State<PreviewTile> {
  late Future<Image> _preview;

  @override
  void initState() {
    super.initState();

    _preview = loadData();
  }

  Future<Image> loadData() async {
    final data = await API.query("video", "readThumbnail", {'Movieid': widget.dta.id});

    final img = Image.memory(
      base64Decode(data.substring(23)),
      width: double.infinity,
      fit: BoxFit.fitWidth,
    );

    // precache image to avoid loading time to render image
    await precacheImage(img.image, context);

    return img;
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<Image>(
      future: _preview, // a previously-obtained Future<String> or null
      builder: (BuildContext context, AsyncSnapshot<Image> snapshot) {
        if (snapshot.hasError) {
          return Text("Error");
        } else if (snapshot.hasData) {
          return ClipRRect(
            borderRadius: BorderRadius.circular(20.0),
            child: Stack(
              children: [
                Container(
                  child: Column(
                    children: [Text(widget.dta.title, style: TextStyle(fontSize: isTV() ? 8 : 12)), snapshot.data!],
                  ),
                  color: Colors.green,
                ),
                Positioned.fill(
                  child: Material(
                    color: Colors.transparent,
                    child: InkWell(
                      onTap: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => VideoScreen(videoID: widget.dta.id),
                          ),
                        );
                      },
                    ),
                  ),
                ),
              ],
            ),
          );
        } else {
          return Column(children: const <Widget>[
            SizedBox(height: 100),
            SizedBox(
              width: 60,
              height: 60,
              child: CircularProgressIndicator(),
            ),
            Padding(
              padding: EdgeInsets.only(top: 16),
              child: Text('Awaiting result...'),
            ),
            SizedBox(height: 100),
          ]);
        }
      },
    );
  }
}