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;
  },
);

⚙️ 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();
        }
      },
    );
  }

Load static pictures or do not control dynamic pictures

Widget image= FImage(
     imageProvider: NetworkImage(imageUrl),
     width: 150,
     height: 150,
     );           

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>

⚠️ 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>'

⚠️ 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.

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