fimage

Description:

fimage

FImage

FImage realize loading a variety of image resources
Support dart:ui can decode static pictures &dynamic picture playback control, picture first frame callback decoding callback, all frame decoding completion callback, cache management, preload to cache, support network and local picture loading
Author：ZhongYi([email protected])























English | 简体中文

Like it? Please cast your Star 🥰 ！

✨ Features #


Support the control of dart:ui decodable picture playback


Support custom extension decoding


Support static & dynamic pictures


Support pictures to be preloaded into the cache


Support network & local & memory image loading


Provide cache, support custom size


Provide rich callbacks (the picture is loaded and the callback is displayed for each frame)


Less code & small package, convenient for modification


🛠 Guide #
In FImage, developers can easily use it.
///Create a controller to control the image
var controller = FImageController(vsync: this);

///Create FImage in build
Widget image = FImage(
image: NetworkImage(imageUrl),
width: 150,
height: 150,
controller: controller,
onFetchCompleted: (allImageInfo) {
if(allImageInfo.frameCount == 0) {
///load iamge error
} else if (!controller1.isCompleted) {
controller1.forward();
}
},
frameBuilder: (BuildContext context, Widget child,
int currentFrame, int totalFrame) {
return child;
},
);
copied to clipboard
⚙️ Parameters #
FImageController #



Param
Type
Necessary
Default
desc




vsync
TickerProvider
true
null
Provide frame timing callback


value
double
false
0.0
Animation initial value


duration
Duration
false
null
Reverse animation time


duration
Duration
false
null
Animation time (animation time parsed by image will be used)


animationBehavior
AnimationBehavior
false
AnimationBehavior.normal
Animation behavior


repetitionCount
int
false
-2
Animation loop times（default is -2 when can not resolved）



FImage #



Param
Type
Necessary
Default
desc




imageProvider
ImageProvider
true
null
image loader


controller
FImageController
true
null
Animation controller


semanticLabel
String
false
null
picture description


excludeFromSemantics
bool
false
false
Whether to exclude the image semantically


width
double
false
null
picture width


height
double
false
null
picture height


onFetchCompleted
VoidCallback
false
null
image loading complete callback


color
Color
false
null
Foreground of the picture


colorBlendMode
BlendMode
false
null
color blending mode


fit
BoxFit
false
null
Picture display mode


alignment
AlignmentGeometry
false
Alignment.center
Alignment of the picture


repeat
ImageRepeat
false
ImageRepeat.noRepeat
How the picture is repeated


centerSlice
Rect
false
null
Slice stretch


matchTextDirection
bool
false
false
Is it consistent with the text direction


frameBuilder
FImageFrameBuilder
false
null
Callback for each frame of image


needRepaintBoundary
bool
false
true
Whether the image uses a separate layer


decoder
Decoder
false
GifDecoder
Picture decoder



📺 Example #

Widget _buildGifItem(int index) {
if (controllers[index] == null) {
print('new FImageController $index');
controllers[index] = FImageController(vsync: this, repetitionCount: 0);
}
controllers[index].stop();
return VisibilityDetector(
key: Key('gifVisibilityDetector-${controllers[index]}-$index'),
child: FImage(
imageProvider: NetworkImage(gifList[index % gifList.length]),
width: 150,
height: 150,
controller: controllers[index],
onFetchCompleted: (_) {
controllers[index].set("onFetchCompleted", true);
if (showed[index]) {
controllers[index].forward(from: 1);
return;
}
if (controllers[index].getBool("onVisible")) {
controllers[index].forward(from: 0);
showed[index] = true;
}
},
frameBuilder: (BuildContext context, Widget child, int currentFrame,
int totalFrame) {
return child;
},
),
onVisibilityChanged: (info) {
if (info.visibleFraction > 0.9) {
controllers[index].set("onVisible", true);
if (controllers[index].getBool("onFetchCompleted") &&
!controllers[index].isAnimating &&
!controllers[index].isCompleted) {
controllers[index].forward();
showed[index] = true;
}
} else {
controllers[index].stop();
}
},
);
}
copied to clipboard
Load static pictures or do not control dynamic pictures
Widget image= FImage(
imageProvider: NetworkImage(imageUrl),
width: 150,
height: 150,
);
copied to clipboard
The complete code can be found in the example/lib/example.dart file。
😃 How to use？ #
Add dependencies in the project pubspec.yaml file:
🌐 pub dependency #
dependencies:
fimage: ^<version number>
copied to clipboard

⚠️ Attention，please go to pub to get the latest version number of FImage

🖥 git dependency #
dependencies:
fimage:
git:
url: '[email protected]:Fliggy-Mobile/fimage.git'
ref: '<Branch number or tag number>'
copied to clipboard

⚠️ Attention，please refer to FImage official project for branch number or tag.。

💡 License #
Copyright 2020-present Fliggy Android Team <[email protected]>.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at following link.

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

copied to clipboard
Like it? Please cast your Star 🥰 ！ #
How to run Demo project? #
1.clone project to local

2.Enter the project example directory and run the following command

flutter create .

3.Run the demo in example
copied to clipboard