Code snippet
`import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:instagram/presentation/widgets/global/others/play_this_video.dart';
// ignore: depend_on_referenced_packages
import 'package:octo_image/octo_image.dart';
class NetworkDisplay extends StatefulWidget {
final int cachingHeight, cachingWidth;
final String url, blurHash;
final double aspectRatio;
final bool isThatImage;
final double? height;
final double? width;
const NetworkDisplay({
Key? key,
required this.url,
this.isThatImage = true,
this.cachingHeight = 720,
this.cachingWidth = 720,
this.height,
this.width,
this.blurHash = "",
this.aspectRatio = 0.0,
}) : super(key: key);
@OverRide
State createState() => _NetworkDisplayState();
}
class _NetworkDisplayState extends State {
@OverRide
void initState() {
super.initState();
}
@OverRide
void didChangeDependencies() {
if (widget.isThatImage && widget.url.isNotEmpty) {
precacheImage(NetworkImage(widget.url), context);
}
super.didChangeDependencies();
}
@OverRide
Widget build(BuildContext context) {
return widget.aspectRatio == 0 ? whichBuild(height: null) : aspectRatio();
}
Widget aspectRatio() {
return AspectRatio(
aspectRatio: widget.aspectRatio,
child: whichBuild(),
);
}
Widget whichBuild({double? height = double.infinity}) {
return !widget.isThatImage
? PlayThisVideo(
play: true,
videoUrl: widget.url,
blurHash: widget.blurHash,
)
: buildOcto(height);
}
Widget buildOcto(height) {
int cachingHeight = widget.cachingHeight;
int cachingWidth = widget.cachingWidth;
if (widget.aspectRatio != 1 && cachingHeight == 720) cachingHeight = 960;
return OctoImage(
image: CachedNetworkImageProvider(widget.url,
maxWidth: cachingWidth, maxHeight: cachingHeight),
errorBuilder: (context, url, error) => buildError(),
fit: BoxFit.cover,
width: widget.width ?? double.infinity,
height: widget.height ?? height,
placeholderBuilder: widget.blurHash.isNotEmpty
? OctoImage.blurHash(widget.blurHash, fit: BoxFit.cover)
: (context) => Center(child: loadingWidget()),
);
}//Error is over here (Attached screenshot)
![Screenshot (129)](https://private-user-images.githubusercontent.com/71457381/302088998-cb8960b9-c1dc-48ce-8992-881b95997a40.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ2MjIzMTksIm5iZiI6MTcyNDYyMjAxOSwicGF0aCI6Ii83MTQ1NzM4MS8zMDIwODg5OTgtY2I4OTYwYjktYzFkYy00OGNlLTg5OTItODgxYjk1OTk3YTQwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDIxNDAxOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTBlOWFhZjM0YWY4Mzc4YTViOWZmZTYxMGQyOTFkNDM4OWNlMjllNzJlNWUxNjIzNDZjMDc2ZTU2ZTYxMmYyNjkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.wyAAh_EU1B-s1nSa4wYBiB0gOhulR5GlpJjBclx64lY)
SizedBox buildError() {
return SizedBox(
width: double.infinity,
height: widget.aspectRatio,
child: Icon(Icons.warning_amber_rounded,
size: 30, color: Theme.of(context).focusColor),
);
}
Widget loadingWidget() {
double aspectRatio = widget.aspectRatio;
return aspectRatio == 0
? buildSizedBox()
: AspectRatio(
aspectRatio: aspectRatio,
child: buildSizedBox(),
);
}
Widget buildSizedBox() {
return Container(
width: double.infinity,
color: Theme.of(context).textTheme.bodyMedium!.color,
child: Center(
child: CircleAvatar(
radius: 57,
backgroundColor: Theme.of(context).textTheme.bodySmall!.color,
child: Center(
child: CircleAvatar(
radius: 56,
backgroundColor: Theme.of(context).textTheme.bodyMedium!.color,
)),
)),
);
}
}
`