Flutter图片与图标 #

一、Image Widget #

1.1 加载方式 #

方式 说明
Image.asset 加载项目资源图片
Image.network 加载网络图片
Image.file 加载本地文件图片
Image.memory 加载内存图片

1.2 Image.asset #

dart 
Image.asset(
  'assets/images/logo.png',
  width: 100,
  height: 100,
  fit: BoxFit.cover,
)

配置pubspec.yaml：

yaml 
flutter:
  assets:
    - assets/images/

1.3 Image.network #

dart 
Image.network(
  'https://example.com/image.jpg',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
  loadingBuilder: (context, child, loadingProgress) {
    if (loadingProgress == null) return child;
    return Center(
      child: CircularProgressIndicator(
        value: loadingProgress.expectedTotalBytes != null
            ? loadingProgress.cumulativeBytesLoaded /
                loadingProgress.expectedTotalBytes!
            : null,
      ),
    );
  },
  errorBuilder: (context, error, stackTrace) {
    return Icon(Icons.error);
  },
)

1.4 Image.file #

dart 
import 'dart:io';

Image.file(
  File('/path/to/image.jpg'),
  width: 200,
  height: 200,
  fit: BoxFit.cover,
)

1.5 Image.memory #

dart 
import 'dart:typed_data';

Image.memory(
  imageBytes,
  width: 200,
  height: 200,
  fit: BoxFit.cover,
)

1.6 BoxFit属性 #

dart 
BoxFit.fill
BoxFit.contain
BoxFit.cover
BoxFit.fitWidth
BoxFit.fitHeight
BoxFit.none
BoxFit.scaleDown
dart 
Column(
  children: [
    Text('fill'),
    Image.asset('image.jpg', width: 100, height: 100, fit: BoxFit.fill),
    Text('contain'),
    Image.asset('image.jpg', width: 100, height: 100, fit: BoxFit.contain),
    Text('cover'),
    Image.asset('image.jpg', width: 100, height: 100, fit: BoxFit.cover),
  ],
)

1.7 图片缓存 #

dart 
Image.network(
  'https://example.com/image.jpg',
  cacheWidth: 200,
  cacheHeight: 200,
)

PaintingBinding.instance.imageCache.maximumSize = 100;
PaintingBinding.instance.imageCache.maximumSizeBytes = 50 * 1024 * 1024;

二、cached_network_image #

2.1 安装 #

yaml 
dependencies:
  cached_network_image: ^3.3.0

2.2 使用 #

dart 
CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
  fadeInDuration: Duration(milliseconds: 300),
  fadeOutDuration: Duration(milliseconds: 300),
  memCacheWidth: 200,
  memCacheHeight: 200,
  maxWidthDiskCache: 500,
  maxHeightDiskCache: 500,
)

2.3 高级用法 #

dart 
CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  imageBuilder: (context, imageProvider) {
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: imageProvider,
          fit: BoxFit.cover,
        ),
        borderRadius: BorderRadius.circular(16),
      ),
    );
  },
  placeholder: (context, url) => Shimmer.fromColors(
    baseColor: Colors.grey.shade300,
    highlightColor: Colors.grey.shade100,
    child: Container(color: Colors.white),
  ),
  errorWidget: (context, url, error) => Container(
    color: Colors.grey.shade200,
    child: Icon(Icons.broken_image, color: Colors.grey),
  ),
)

三、Icon Widget #

3.1 基本用法 #

dart 
Icon(
  Icons.home,
  size: 32,
  color: Colors.blue,
)

3.2 Material Icons #

dart 
Icon(Icons.home)
Icon(Icons.favorite)
Icon(Icons.settings)
Icon(Icons.person)
Icon(Icons.search)
Icon(Icons.add)
Icon(Icons.edit)
Icon(Icons.delete)
Icon(Icons.share)
Icon(Icons.more_vert)

3.3 Cupertino Icons #

dart 
Icon(CupertinoIcons.home)
Icon(CupertinoIcons.heart)
Icon(CupertinoIcons.settings)
Icon(CupertinoIcons.person)
Icon(CupertinoIcons.search)
Icon(CupertinoIcons.add)
Icon(CupertinoIcons.pencil)
Icon(CupertinoIcons.trash)
Icon(CupertinoIcons.share)
Icon(CupertinoIcons.ellipsis_vertical)

3.4 IconButton #

dart 
IconButton(
  icon: Icon(Icons.favorite),
  onPressed: () {
    print('Favorite pressed');
  },
  iconSize: 32,
  color: Colors.red,
  splashRadius: 24,
  tooltip: 'Add to favorites',
)

3.5 IconTheme #

dart 
IconTheme(
  data: IconThemeData(
    color: Colors.blue,
    size: 24,
    opacity: 0.8,
  ),
  child: Row(
    children: [
      Icon(Icons.home),
      Icon(Icons.favorite),
      Icon(Icons.settings),
    ],
  ),
)

四、自定义图标 #

4.1 使用字体图标 #

yaml 
flutter:
  fonts:
    - family: MyIcons
      fonts:
        - asset: assets/fonts/MyIcons.ttf
dart 
Icon(
  IconData(0xe900, fontFamily: 'MyIcons'),
  size: 32,
  color: Colors.blue,
)

4.2 创建图标类 #

dart 
class MyIcons {
  static const IconData home = IconData(0xe900, fontFamily: 'MyIcons');
  static const IconData search = IconData(0xe901, fontFamily: 'MyIcons');
  static const IconData settings = IconData(0xe902, fontFamily: 'MyIcons');
}

Icon(MyIcons.home)
Icon(MyIcons.search)
Icon(MyIcons.settings)

五、SVG图片 #

5.1 安装 #

yaml 
dependencies:
  flutter_svg: ^2.0.9

5.2 基本用法 #

dart 
SvgPicture.asset(
  'assets/icons/logo.svg',
  width: 100,
  height: 100,
  colorFilter: ColorFilter.mode(Colors.blue, BlendMode.srcIn),
)
dart 
SvgPicture.network(
  'https://example.com/image.svg',
  width: 100,
  height: 100,
  placeholderBuilder: (context) => CircularProgressIndicator(),
)

5.3 SVG属性 #

dart 
SvgPicture.asset(
  'assets/icons/logo.svg',
  width: 100,
  height: 100,
  fit: BoxFit.contain,
  alignment: Alignment.center,
  allowDrawingOutsideViewBox: false,
  semanticsLabel: 'Logo',
  excludeFromSemantics: false,
  clipBehavior: Clip.hardEdge,
  colorFilter: ColorFilter.mode(Colors.red, BlendMode.srcIn),
  cacheColorFilter: true,
)

六、圆形图片 #

6.1 CircleAvatar #

dart 
CircleAvatar(
  radius: 50,
  backgroundImage: NetworkImage('https://example.com/avatar.jpg'),
  backgroundColor: Colors.grey.shade200,
  child: Text('A'),
)

CircleAvatar(
  radius: 50,
  child: Icon(Icons.person, size: 50),
)

6.2 ClipOval #

dart 
ClipOval(
  child: Image.network(
    'https://example.com/avatar.jpg',
    width: 100,
    height: 100,
    fit: BoxFit.cover,
  ),
)

6.3 Container装饰 #

dart 
Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    image: DecorationImage(
      image: NetworkImage('https://example.com/avatar.jpg'),
      fit: BoxFit.cover,
    ),
    border: Border.all(
      color: Colors.blue,
      width: 3,
    ),
  ),
)

七、图片选择器 #

7.1 安装 #

yaml 
dependencies:
  image_picker: ^1.0.4

7.2 使用 #

dart 
import 'package:image_picker/image_picker.dart';

final ImagePicker _picker = ImagePicker();

Future<void> pickImage() async {
  final XFile? image = await _picker.pickImage(
    source: ImageSource.gallery,
    maxWidth: 1024,
    maxHeight: 1024,
    imageQuality: 85,
  );
  
  if (image != null) {
    File imageFile = File(image.path);
  }
}

Future<void> takePhoto() async {
  final XFile? photo = await _picker.pickImage(
    source: ImageSource.camera,
    maxWidth: 1024,
    maxHeight: 1024,
    imageQuality: 85,
  );
}

Future<void> pickMultipleImages() async {
  final List<XFile> images = await _picker.pickMultiImage(
    maxWidth: 1024,
    maxHeight: 1024,
    imageQuality: 85,
  );
}

7.3 完整示例 #

dart 
class ImagePickerDemo extends StatefulWidget {
  @override
  State<ImagePickerDemo> createState() => _ImagePickerDemoState();
}

class _ImagePickerDemoState extends State<ImagePickerDemo> {
  final ImagePicker _picker = ImagePicker();
  XFile? _image;
  
  Future<void> _pickImage() async {
    final XFile? image = await _picker.pickImage(
      source: ImageSource.gallery,
    );
    setState(() {
      _image = image;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        if (_image != null)
          Image.file(
            File(_image!.path),
            width: 200,
            height: 200,
            fit: BoxFit.cover,
          )
        else
          Container(
            width: 200,
            height: 200,
            color: Colors.grey.shade200,
            child: Icon(Icons.image, size: 50, color: Colors.grey),
          ),
        SizedBox(height: 16),
        ElevatedButton(
          onPressed: _pickImage,
          child: Text('选择图片'),
        ),
      ],
    );
  }
}

八、总结 #

8.1 核心Widget #

Widget 说明
Image.asset 加载资源图片
Image.network 加载网络图片
CachedNetworkImage 缓存网络图片
Icon 图标
IconButton 图标按钮
SvgPicture SVG图片

8.2 下一步 #

掌握了图片与图标后，让我们学习 按钮与交互！

最后更新：2026-03-28