使用Flutter实现一个用户头像组件，size为宽高值，头像是src地址，圆角是6px，注意src地址是网络地址

在 Flutter 中实现一个自定义头像组件，可以接收 size、src（网络地址）和圆角大小作为参数，你可以创建一个新的 StatefulWidget 或 StatelessWidget。下面是一个 StatelessWidget 的示例：

import 'package:flutter/material.dart';

class Avatar extends StatelessWidget {
  final double size;
  final String src;
  final double borderRadius;

  const Avatar({
    Key? key,
    required this.size,
    required this.src,
    this.borderRadius = 6.0,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(borderRadius),
      child: Image.network(
        src,
        width: size,
        height: size,
        fit: BoxFit.cover,
        errorBuilder:
            (BuildContext context, Object exception, StackTrace? stackTrace) {
          // If the image fails to load, you can display a placeholder or an error widget
          return Container(
            color: Colors.grey[300],
            width: size,
            height: size,
            child: Icon(Icons.person, size: size / 2),
          );
        },
      ),
    );
  }
}

使用该组件的示例：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Avatar Component',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom Avatar Component'),
        ),
        body: Center(
          child: Avatar(
            size: 100.0,
            src: 'https://example.com/user_avatar.png', // 替换为你的图片网络地址
            borderRadius: 6.0,
          ),
        ),
      ),
    );
  }
}

这个 Avatar 组件接收三个参数：size 确定头像的宽度和高度，src 是头像图片的网络地址，borderRadius 确定头像的圆角大小。如果图片加载失败，使用了 errorBuilder 函数来提供一个备用的 placeholder 方案。

确保替换 'https://example.com/user_avatar.png' 为你实际的网络图片地址。如果网络地址无效或者因为任何原因导致图片加载失败，errorBuilder会提供一个灰色背景的容器，其中包含一个人形图标，表示用户头像。

在实际的Flutter应用中，你可能还需要考虑图片的缓存策略以及加载时的占位符显示。为了改进上面的示例，我们可以使用CachedNetworkImage包代替Image.network来进行图片的缓存，并在图片加载的过程中显示一个圆形的进度指示器。下面是改进后的代码示例：

首先，你需要在pubspec.yaml文件中添加cached_network_image包的依赖：

dependencies:
  flutter:
    sdk: flutter
  cached_network_image: ^3.0.0 # 请检查并使用最新版本

安装依赖后，在 Dart 代码中使用这个包：

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';

class Avatar extends StatelessWidget {
  final double size;
  final String src;
  final double borderRadius;

  const Avatar({
    Key? key,
    required this.size,
    required this.src,
    this.borderRadius = 6.0,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(borderRadius),
      child: CachedNetworkImage(
        imageUrl: src,
        width: size,
        height: size,
        fit: BoxFit.cover,
        placeholder: (context, url) => CircularProgressIndicator(), // 加载时显示进度圈
        errorWidget: (context, url, error) => Container(
          color: Colors.grey[300],
          width: size,
          height: size,
          child: Icon(Icons.person, size: size / 2),
        ),
      ),
    );
  }
}

在这个改进的版本中，CachedNetworkImage组件会处理图片的加载及缓存，并提供了图片加载过程中的placeholder和加载失败时的errorWidget。CircularProgressIndicator会在图片加载过程中展示一个圆形的加载动画，而当加载失败时，将同样显示一个带有用户图标的容器作为错误提示。这里的 CircularProgressIndicator 是内置的进度指示器，其大小和颜色可以根据需要进行调整。

完整代码示例可以像这样使用：

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Avatar Component',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom Avatar Component'),
        ),
        body: Center(
          child: Avatar(
            size: 100.0,
            src: 'https://example.com/user_avatar.png', // 替换为你的图片网络地址
            borderRadius: 6.0,
          ),
        ),
      ),
    );
  }
}

class Avatar extends StatelessWidget {
  final double size;
  final String src;
  final double borderRadius;

  const Avatar({
    Key? key,
    required this.size,
    required this.src,
    this.borderRadius = 6.0,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(borderRadius),
      child: CachedNetworkImage(
        imageUrl: src,
        width: size,
        height: size,
        fit: BoxFit.cover,
        placeholder: (context, url) => SizedBox(
          width: size,
          height: size,
          child: Center(child: CircularProgressIndicator()),
        ),
        errorWidget: (context, url, error) => Container(
          color: Colors.grey[300],
          width: size,
          height: size,
          child: Icon(Icons.person, size: size / 2),
        ),
      ),
    );
  }
}

请确保替换 'https://example.com/user_avatar.png' 为一个有效的图片URL以正确显示网络图像。

此外，你还可以进一步定制进度指示器，为它添加颜色或动画。对于CircularProgressIndicator，你可以设置valueColor属性来改变颜色。例如：

CircularProgressIndicator(
  valueColor: AlwaysStoppedAnimation<Color>(Theme.of(context).primaryColor),
),

这里是如何为 CircularProgressIndicator 设置颜色的示例：

// ...
placeholder: (context, url) => SizedBox(
  width: size,
  height: size,
  child: Center(
    child: CircularProgressIndicator(
      valueColor: AlwaysStoppedAnimation<Color>(Theme.of(context).primaryColor),
    ),
  ),
),
// ...

在上述代码中，我们使用 Theme.of(context).primaryColor 来获取当前主题的主色调，并将其应用到 CircularProgressIndicator，使得加载动画与应用的主题色保持一致。此外，AlwaysStoppedAnimation 包裹颜色值，使得该动画值在动画期间保持不变。

如需进一步定制，还可以调整加载指示器的大小、宽度等属性。例如，要设置不同的进度指示器大小，你可以使用 Container 或 SizedBox 来限制其大小：

placeholder: (context, url) => SizedBox(
  width: size,
  height: size,
  child: Center(
    child: CircularProgressIndicator(
      strokeWidth: 2.0, // 设置进度指示器的线条宽度
      valueColor: AlwaysStoppedAnimation<Color>(Theme.of(context).primaryColor),
    ),
  ),
),

在这里，strokeWidth 属性决定了 CircularProgressIndicator 的线条宽度。你可以根据自己的设计需求来调整这个值。

通过以上的讲解和代码示例，你现在应该能够在 Flutter 应用中创建一个带有网络图片、圆角、大小定制，并且在加载过程中有进度指示器的头像组件了。记得始终在使用第三方资源时审查其许可协议，确保你的应用遵循了所有必要的法律指导原则。

问题

该组件好像用作背景图的缓存时，有问题：
stackoverflow.com/questions/7…

github.com/Baseflow/fl…

原文链接：https://juejin.cn/post/7344002850320121896 作者：Struggle_zhu