Flutter 图片开发核心技能快速掌握教程

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  final imageSrc =
      'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/04ec6088c3c544a2b9459582e335483c~tplv-k3u1fbpfcp-watermark.image?';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          body: Center(child: Image.network(imageSrc)),
    ));
  }
}

Image.network(imageSrc,width: 100,height: 100,)

flutter pub add cached_network_image

 MaterialApp(
    home: Scaffold(
      body: Center(child: CachedNetworkImage(
        imageUrl: imageSrc,
    )),
 ));

CachedNetworkImage(
        imageUrl: imageSrc,
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),
 )

CachedNetworkImage(
  imageUrl: imageSrc,
  imageBuilder: (context, imageProvider) => Container(
    decoration: BoxDecoration(
      image: DecorationImage(
          image: imageProvider,
          fit: BoxFit.cover,
          colorFilter:
              ColorFilter.mode(Colors.red, BlendMode.colorBurn)),
    ),
  ),
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
),

flutter:
  assets:
    - images/owl.png

Image.asset(
    'images/owl.png',
    width: 200,
    height: 200,
);

flutter:
  assets:
    - images/

Image.asset(
    'images/owl.png',
    width: 200,
    height: 200,
);

Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Image(image: ExactAssetImage('images/owl.png', scale: 5)),
          Image(image: ExactAssetImage('images/owl.png', scale: 10)),
        ],
      )

flutter pub add image_picker

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});
  @override
  State<MyWidget> createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
  final _picker = ImagePicker();
  File? _file;
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(
            onPressed: () async {
              var xfile = await _picker.pickImage(
                  source: ImageSource.gallery,
                  maxWidth: 200,
                  maxHeight: 300,
                  requestFullMetadata: false);
              if (xfile != null) {
                setState(() {
                  _file = File(xfile.path);
                });
              }
            },
            child: const Text('从相册中选择图片')),
        if (_file != null) Image.file(_file!)
      ],
    );
  }
}

<key>NSPhotoLibraryUsageDescription</key>
<string>APP需要您的同意，才能使用相册，以便于上传，发布照片</string>

<key>NSCameraUsageDescription</key>
<string>APP需要您的同意，才能使用摄像头，以便于相机拍摄，上传、发布照片</string>

imageString = 'image/jpeg;base64,/9j/4AA...'

import 'dart:convert';
Image.memory(base64Decode(imageString));

DecoratedBox(
     decoration: BoxDecoration(
       image: DecorationImage(image: AssetImage('images/owl.png')),
     ),
     child: SizedBox(
       width: 100,
       height: 100,
     ),
   )

Container(
     width: 100,
     height: 100,
     decoration: BoxDecoration(
        image: DecorationImage(image: AssetImage('images/owl.png'))
     ),
   )

preload(BuildContext context) {
    var configuration = createLocalImageConfiguration(context);
    for (var src in ['图片地址1', '图片地址2', '图片地址13']) {
      NetworkImage(src).resolve(configuration);
    }
  }

  bool operator ==(Object other) {
    if (other.runtimeType != runtimeType) {
      return false;
    }
    return other is NetworkImage
        && other.url == url
        && other.scale == scale;
  }

Column(
   mainAxisSize: MainAxisSize.min,
   children: [
     Image.asset("images/btn.png",width: 300,height: 300,fit: BoxFit.fill,),
     Image.asset("images/btn.png",
     centerSlice: Rect.fromLTRB(100, 100, 200,200),width: 400,height:400,scale: 1,)
  ],
);

abstract class ImageProvider<T> {
  ImageStream resolve(ImageConfiguration configuration) {
    // 省略
  }
  Future<bool> evict({ ImageCache cache,
       ImageConfiguration configuration = ImageConfiguration.empty }) async {
    // 省略
  }
  Future<T> obtainKey(ImageConfiguration configuration); 
  @protected
  ImageStreamCompleter load(T key); // 需子类实现
}

ImageStream resolve(ImageConfiguration configuration) {
  ... //省略
  final ImageStream stream = ImageStream();
  T obtainedKey; //
  //定义错误处理函数
  Future<void> handleError(dynamic exception, StackTrace stack) async {
    ... //省略
    stream.setCompleter(imageCompleter);
    imageCompleter.setError(...);
  }
  // 创建一个新Zone，为了当发生错误时不会干扰 MainZone
  final Zone dangerZone = Zone.current.fork(...);
  dangerZone.runGuarded(() {
    Future<T> key;
    // 先验证是否已经有缓存
    try {
      // 生成缓存key，后面会根据此key来检测是否有缓存
      key = obtainKey(configuration);
    } catch (error, stackTrace) {
      handleError(error, stackTrace);
      return;
    }
    key.then<void>((T key) {
      obtainedKey = key;
      // 缓存的处理逻辑
      final ImageStreamCompleter completer = PaintingBinding.instance
          .imageCache.putIfAbsent(key, () => load(key), onError: handleError);
      if (completer != null) {
        stream.setCompleter(completer);
      }
    }).catchError(handleError);
  });
  return stream;
}

 Image(image: AssetImage("image/owl.png"),);
 Image.asset("image/owl.png");

Image.asset(
    String name, {
    省略...
  }) : image = ResizeImage.resizeIfNeeded(
         cacheWidth,
         cacheHeight,
         scale != null
           ? ExactAssetImage(name, bundle: bundle, scale: scale, package: package)
           : AssetImage(name, bundle: bundle, package: package),
       ),
       省略...
      ;

static ImageProvider<Object> resizeIfNeeded(int? cacheWidth, int? cacheHeight, ImageProvider<Object> provider) {
    if (cacheWidth != null || cacheHeight != null) {
      return ResizeImage(provider, width: cacheWidth, height: cacheHeight);
    }
    return provider;
}