An advanced image provider provides caching and retrying for flutter app. Now with zoomable widget and transition to image widget.
Add this to your pubspec.yaml (or create it):
dependencies:
flutter_advanced_networkimage: anyThen run the flutter tooling:
flutter packages get// using image provider
Image(
image: AdvancedNetworkImage(
url,
header: header,
useDiskCache: true,
cacheRule: CacheRule(maxAge: const Duration(days: 7)),
),
fit: BoxFit.cover,
)
// work with precacheImage
precacheImage(
AdvancedNetworkImage(
url,
header: header,
useDiskCache: true,
cacheRule: CacheRule(maxAge: const Duration(days: 7)),
),
context,
);
// or svg provider (flutter_svg)
SvgPicture(
AdvancedNetworkSvg(url, SvgPicture.svgByteDecoder, useDiskCache: true),
)// get the disk cache folder size
int cacheSize = await DiskCache().cacheSize();// clean the disk cache
bool isSucceed = await DiskCache().clear();// using zooming widget & transitiontoimage widget
ZoomableWidget(
minScale: 0.3,
maxScale: 2.0,
// default factor is 1.0, use 0.0 to disable boundary
panLimit: 0.8,
child: Container(
child: TransitionToImage(
image: AdvancedNetworkImage(url, timeoutDuration: Duration(minutes: 1)),
// This is the default placeholder widget at loading status,
// you can write your own widget with CustomPainter.
placeholder: CircularProgressIndicator(),
// This is default duration
duration: Duration(milliseconds: 300),
),
),
)// Reload feature included
TransitionToImage(
image: AdvancedNetworkImage(url,
loadedCallback: () {
print('It works!');
},
loadFailedCallback: () {
print('Oh, no!');
},
loadingProgress: (double progress) {
print('Now Loading: $progress');
},
),
loadingWidgetBuilder: (_, double progress, __) => Text(progress.toString()),
fit: BoxFit.contain,
placeholder: const Icon(Icons.refresh),
width: 400.0,
height: 300.0,
enableRefresh: true,
);// Scale the widget size. (Origin point was fixed to screen's center)
ZoomableWidget(
panLimit: 1.0,
maxScale: 2.0,
minScale: 0.5,
singleFingerPan: true,
multiFingersPan: false,
enableRotate: true,
child: Image(
image: AssetImage('graphics/background.png'),
),
zoomSteps: 3,
),Details in example/ folder.
If you have any problem or question, feel free to file issues.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
