Flutter用户头像管理插件super_profile_picture的使用

插件简介

super_profile_picture 是一个可高度自定义的Flutter小部件，用于显示用户头像。它支持图片和文本两种模式。当没有提供图像或图像加载失败时，会显示标签文本。您可以使用任何图像提供者（如 NetworkImage、AssetImage 等）来显示图像。

Live Demo | GitHub

安装步骤

1. 添加依赖

在您的 pubspec.yaml 文件中添加最新版本的包，并运行 'dart pub get'：

dependencies:
  super_profile_picture: ^1.0.0

2. 导入包

在您的Flutter应用程序中导入该包并使用它：

import 'package:super_profile_picture/super_profile_picture.dart';

注意事项

背景颜色将根据标签的第一个字母设置。目前不支持自定义背景颜色，但此功能可能会在未来添加。

示例代码

以下是完整的示例代码，展示了如何使用 super_profile_picture 插件创建一个包含不同配置的用户头像展示页面。

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Super Profile Picture Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Super Profile Picture Showcase'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Wrap(
          children: [
            getCard(text: "Default"),
            getCard(
              text: "Profile with image",
              url: "https://picsum.photos/200/300.jpg",
            ),
            getCard(
              text: "Image with Border",
              url: "https://picsum.photos/200/300.jpg",
              border: Border.all(width: 4, color: Colors.blue),
            ),
            getCard(
              text: "Text with Border",
              border: Border.all(width: 4, color: Colors.blue),
            ),
            getCard(
              text: "Border Radius 15",
              url: "https://picsum.photos/200/300.jpg",
              borderRadius: 15,
            ),
            getCard(
              text: "Image failed (label shown)",
              url: "error_url_or_url_failed_to_load",
            ),
            getCard(
              text: "Text With padding 10",
              padding: const EdgeInsets.all(10),
            ),
            getCard(
              text: "useFittedBox = true",
              useFittedBox: true,
            ),
            getCard(
              text: "custom fontsize",
              padding: const EdgeInsets.all(10),
              useFittedBox: false,
            ),
          ],
        ),
      ),
    );
  }

  Widget getCard({
    required String text,
    String? url,
    EdgeInsetsGeometry? padding,
    double? borderRadius,
    bool? useFittedBox,
    BoxBorder? border,
  }) {
    return SizedBox(
      height: 150,
      width: 120,
      child: Card(
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(18.0),
              child: SuperProfilePicture(
                label: "Michel Jackson",
                radius: 30,
                borderRadius: borderRadius,
                image: url == null
                    ? null
                    : NetworkImage(url),
                imageDecorationProperties: ImageDecorationProperties(fit: BoxFit.cover),
                textDecorationProperties: TextDecorationProperties(
                  padding: padding,
                  useFittedBox: useFittedBox ?? true,
                  fontSize: 10,
                  maxLabelLength: 2,
                  fontWeight: FontWeight.normal,
                ),
                border: border,
              ),
            ),
            Center(
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 3.0),
                child: Text(
                  text,
                  textAlign: TextAlign.center,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

属性说明

• label: 标签文本。
• radius: 圆形头像的半径。
• textDecorationProperties:
  • fontSize: 文本字体大小。
  • maxLabelLength: 最大标签长度。
  • useFittedBox: 是否使用 FittedBox。
  • fontColor: 字体颜色。
  • fontWeight: 字体粗细。
  • letterSpacing: 字符间距。
  • padding: 内边距。
  • fontStyle: 字体样式。
• imageDecorationProperties:
  • frameBuilder: 图片框架构建器。
  • loadingBuilder: 加载中的构建器。
  • errorBuilder: 错误时的构建器。
  • semanticLabel: 语义化标签。
  • excludeFromSemantics: 是否排除语义化。
  • width: 宽度。
  • height: 高度。
  • color: 颜色。
  • opacity: 不透明度。
  • colorBlendMode: 颜色混合模式。
  • fit: 图片适应方式。
  • alignment: 对齐方式。
  • repeat: 重复方式。
  • centerSlice: 中心切片。
  • matchTextDirection: 是否匹配文本方向。
  • gaplessPlayback: 是否无缝播放。
  • isAntiAlias: 是否抗锯齿。
  • filterQuality: 滤镜质量。
• border: 边框样式。
• borderRadius: 圆角半径。
• image: 图片资源。
• clipBehavior: 剪裁行为。

未来任务

• 添加可自定义背景颜色的功能。

通过以上内容，您应该能够顺利地在Flutter项目中集成和使用 super_profile_picture 插件来管理和展示用户头像。如果有任何问题或需要进一步的帮助，请随时查阅官方文档或联系开发者社区。