Flutter Advanced Network Image Provider
An advanced image provider provides caching and retrying for flutter app. Now with zoomable widget and transition to image widget.
Getting Started
Installation
Add this to your pubspec.yaml (or create it):
dependencies:
flutter_advanced_networkimage: any
Then run the flutter tooling:
flutter packages get
Example
// 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.
21 Nov 18, 2022
3 Jul 7, 2022
3 Feb 21, 2022
0 Jan 1, 2022
59 Dec 24, 2022
1 May 9, 2022
76 Dec 20, 2022
125 Dec 9, 2022
10 Dec 19, 2022
42 Nov 7, 2022
97 Dec 14, 2021
6 Oct 20, 2022
526 Jan 4, 2023
907 Dec 27, 2022
2 Oct 13, 2022
0 Jan 28, 2022
5 Jun 23, 2020
85 Nov 23, 2022
2 Aug 11, 2022