Loading pictures

Loading network images

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(color: Colors.orange),
            child: Image(
              image: NetworkImage('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.qunarzz.com%2Ftravel%2Fd6%2F1802%2F92%2F953a189ea54336b5.jpg _r_720x480x95_2611ec29. Jpg&refer=http%3A%2F%2Fimg1.qunarzz.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 162 0267881&t=c3c553db59153b5b22a6e6559f740332'(), ((), ((), ((), ((), (() }}Copy the code

or

. child: Image.network('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.qunarzz.com%2Ftravel%2Fd6%2F1802%2F92%2F953a189ea54336b5.jpg _r_720x480x95_2611ec29. Jpg&refer=http%3A%2F%2Fimg1.qunarzz.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 162 0267881&t=c3c553db59153b5b22a6e6559f740332'),...Copy the code

Loading local images

1. Manually create a picture directoryassets/imagesDrag the image to the folder

2. pubspec.yamlSet the image path in the configuration file (note that the space before assets may cause compilation errors)

3. Load the local image

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(color: Colors.orange),
            child: Image.asset('assets/images/img.jpg')))); }}Copy the code

Common image attributes

 Image.asset(
    String name, {
    Key? key,
    AssetBundle? bundle,
    this.frameBuilder,
    this.errorBuilder,
    this.semanticLabel,
    this.excludeFromSemantics = false.double? scale,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false.this.gaplessPlayback = false.this.isAntiAlias = false.String? package,
    this.filterQuality = FilterQuality.low,
    int? cacheWidth,
    int? cacheHeight,
  }) 
Copy the code

frameBuilder

The frameBuilder can be used to handle transitions between displaying placeholder images and loading images, such as fading in and out

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(color: Colors.orange),
            child: Image.network(
                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2Ftg%2F035%2F063%2F726%2F3ea4031f045 945 e1843ae5156749d64c.jpg&refer=http%3a%2f%2fyouimg1.c-ctrip.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1 620271164&t=c27a699d576423aedeb27e955fb3eaf9',
              frameBuilder: (BuildContext context, Widget child, int frame,
                  bool wasSynchronouslyLoaded) {
                if (wasSynchronouslyLoaded) {
                  return child;
                }
                return AnimatedOpacity(
                  child: child,
                  opacity: frame == null ? 0 : 1,
                  duration: const Duration(seconds: 2), curve: Curves.easeOut, ); },),),),); }}Copy the code

errorBuilder

The view that is displayed when the picture fails to load

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(color: Colors.orange),
            child: Image.network(
                'https://xxx.png',
              errorBuilder: (ctx, exception, stackTrace) {
                return Container(
                  height: 100,
                  width: 100,
                  color: Colors.red,
                  child: Center(child: Text('Missing Image'))); },),),),); }}Copy the code

SemanticLabel and excludeFromSemantics

SemanticLabel said description image semantics Reading screen can provide semantic description excludeFromSemantics indicates whether or not the removal of image semantics

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(color: Colors.orange),
            child: Image.network(
                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2Ftg%2F035%2F063%2F726%2F3ea4031f045 945 e1843ae5156749d64c.jpg&refer=http%3a%2f%2fyouimg1.c-ctrip.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1 620271164&t=c27a699d576423aedeb27e955fb3eaf9',
                semanticLabel: "The river and the trees on either side.",
                excludeFromSemantics: false),),),); }}Copy the code

Color and colorBlendMode are commonly used for filter effects

The following effect can be understood

  • clear: Clear source image and target image.
  • color: Gets the hue and saturation of the source image and the luminosity of the target image.
  • colorBurn: Divide the reciprocal of the destination by the source, and then invert the result.
  • colorDodge: Divides the destination by the reciprocal of the source.
  • darken: Compositing source and target images by selecting the minimum value from each color channel.
  • difference: Subtracts the smaller value from the larger value for each channel. Black has no effect. Combining white causes the color of another image to be reversed.
  • dst: Draws only the target image.
  • dstATop: Merges the target image onto the source image, but only at overlapping locations.
  • dstIn: Displays the target image, but only where the two images overlap. Do not render the source image, just treat it as a mask. The source’s color channel is ignored; only opacity matters.
  • dstOut: Displays the target image, but only where the two images do not overlap. Do not render the source image, just treat it as a mask. The source’s color channel is ignored; only opacity matters.
  • dstOver: Composes the source image to the target image.
  • exclusion: Subtract twice the product of two images from the sum of the two images.
  • hardLight: After adjusting the components of the source and destination images to fit the source image, multiply them.
  • hue: Gets the hue of the source image, and the saturation and luminosity of the target image.
  • lighten: Compositing source and target images by selecting the maximum value from each color channel.
  • luminosity: Gets the brightness of the source image, and the hue and saturation of the target image.
  • modulate: Multiplies the color components of the source and destination images.
  • multiply: Multiplies the components of the source image and target image, including the alpha channel.
  • overlay: After adjusting the components of the source and target images to fit the target, multiply them.
  • plus: sums the components of the source and destination images.
  • saturation: Gets the saturation of the source image and the hue and brightness of the target image.
  • screen: Multiply the inverse values of the components of the source image and the target image, and then invert the result.
  • softLight: colorDodge for sources lower than 0.5 and colorBurn for sources higher than 0.5.
  • src: Places the target image and draws only the source image.
  • srcATop: Synthesizes the source image onto the target image, but only at overlapping positions with the target image.
  • srcIn: Displays the source image, but only where the two images overlap. The target image is not rendered and is only considered a mask. The target’s color channel is ignored, and only opacity matters.
  • srcOut: Displays the source image, but only where the two images do not overlap.
  • srcOver: Composes the source image to the destination image.
  • xor: Applies the bitwise XOR operator to the source and destination images.

Fill the wayfit

  • fill: Fully filled, aspect ratio may change.
  • contain: Stretch evenly until one side is filled.
  • cover: Equal ratio stretch until both sides are filled, at which point one side may be out of range.
  • fitWidth: Equal ratio stretch, wide fill.
  • fitHeight: Equal proportion stretch, high fill.
  • none: When the component is smaller than the picture, do not stretch, out of range interception.
  • scaleDownContain: When the component is smaller than the image, the image etc. is smaller, the effect is the same as the contain.

Example Set an alignment

topLeft topCenter topRight centerLeft center centerRight bottomLeft bottomCenter bottomRight

repeat

Whether to repeat the image when there is free space

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Container(
            width: 300,
            height: 500,
            decoration: BoxDecoration(color: Colors.orange),
            child: Image.asset(
              'assets/images/img.jpg', repeat: ImageRepeat.repeat, ) ), ), ); }}Copy the code