fimage 0.0.1 copy "fimage: ^0.0.1" to clipboard
fimage: ^0.0.1 copied to clipboard

outdated

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 #

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: '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
3
likes
0
pub points
11%
popularity

Publisher

unverified uploader

FImage realize loading a variety of image resources.

Repository (GitHub)
View/report issues

License

unknown (LICENSE)

Dependencies

flutter

More

Packages that depend on fimage