fimage 0.0.2
fimage: ^0.0.2 copied to clipboard

FImage realize loading a variety of image resources.

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(zhongyi.zjx@alibaba-inc.com)

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 #

ParamTypeNecessaryDefaultdesc
vsyncTickerProvidertruenullProvide frame timing callback
valuedoublefalse0.0Animation initial value
durationDurationfalsenullReverse animation time
durationDurationfalsenullAnimation time (animation time parsed by image will be used)
animationBehaviorAnimationBehaviorfalseAnimationBehavior.normalAnimation behavior
repetitionCountintfalse-2Animation loop times(default is -2 when can not resolved)

FImage #

ParamTypeNecessaryDefaultdesc
imageProviderImageProvidertruenullimage loader
controllerFImageControllertruenullAnimation controller
semanticLabelStringfalsenullpicture description
excludeFromSemanticsboolfalsefalseWhether to exclude the image semantically
widthdoublefalsenullpicture width
heightdoublefalsenullpicture height
onFetchCompletedVoidCallbackfalsenullimage loading complete callback
colorColorfalsenullForeground of the picture
colorBlendModeBlendModefalsenullcolor blending mode
fitBoxFitfalsenullPicture display mode
alignmentAlignmentGeometryfalseAlignment.centerAlignment of the picture
repeatImageRepeatfalseImageRepeat.noRepeatHow the picture is repeated
centerSliceRectfalsenullSlice stretch
matchTextDirectionboolfalsefalseIs it consistent with the text direction
frameBuilderFImageFrameBuilderfalsenullCallback for each frame of image
needRepaintBoundaryboolfalsetrueWhether the image uses a separate layer
decoderDecoderfalseGifDecoderPicture 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: 'git@github.com: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 <alitrip_android@list.alibaba-inc.com>.

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
1
likes
75
pub points
0%
popularity

FImage realize loading a variety of image resources.

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

zhongyi0007@gmail.com

License

Apache 2.0 (LICENSE)

Dependencies

flutter

More

Packages that depend on fimage