Flutter头像生成插件avatars的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter头像生成插件avatars的使用

Pub Version

avatars 是一个功能强大的头像生成插件,支持多种图像源(如社交平台、自定义提供商等)和文本(姓名首字母或自定义值)。该插件具有优先级和回退系统,能够自动选择最佳的图像或文本源。

安装

在你的 pubspec.yaml 文件中添加以下依赖:

dependencies:
  avatars: ^3.0.0

使用

基本用法 - 文本

import 'package:avatars/avatars.dart';

//...

Avatar(name: 'Alberto Fecchi'),
Avatar(value: '89'),
//...
  • 使用 name 属性时,插件会显示提供的字符串中的前两个首字母。
  • 使用 value 属性时,插件会显示提供的字符串。

你可以自定义背景颜色:

Avatar(
  name: 'Alberto Fecchi',
  placeholderColors: [
    Color(0xFFFF0000),
    Color(0xFFFFFF00),
    //...
  ]
),
//...

基本用法 - 图像

Avatar 插件支持多种图像源。你可以在 sources 列表中指定多个图像源,插件会按顺序尝试每个源,直到找到有效的图像源。如果没有可用的图像源,插件将使用 namevalue 数据。

Avatar(
  sources: [
    GitHubSource('luckyseven'),
    //...
  ]
),
//...

社交平台

  • FacebookSource

    FacebookSource(String facebookId, String appToken, [int size = 300])
    

    自 2020 年 9 月起,从 Facebook 获取用户的个人资料图片需要使用 App Token 或 Access Token。详情请参阅 Facebook 开发者文档

  • GitHubSource

    GitHubSource(String username, [int size = 300])
    

    通过用户名获取 GitHub 个人资料图片。

  • GravatarSource

    GravatarSource(String identifier, [int size = 300])
    

    通过用户电子邮件地址或其哈希值获取 Gravatar 图片。

  • InstagramSource

    InstagramSource(String username, [int size = 300])
    

    通过用户名获取 Instagram 个人资料图片。

远程和本地源

  • NetworkSource

    NetworkSource(String url)
    

    从任何远程源获取图片。

  • GenericSource

    GenericSource(ImageProvider image)
    

    通用图像源,可以传递一个 ImageProvider 来显示图片。

形状、尺寸、边框和颜色

你可以通过 shape 属性传递一个 AvatarShape 对象来改变头像的形状。AvatarShape 类提供了两个辅助方法:circle(double radius)rectangle(double width, double height, [BorderRadius borderRadius = BorderRadius.zero])

Avatar(name: 'Alberto Fecchi', shape: AvatarShape.circle(50)),
Avatar(name: 'Alberto Fecchi', shape: AvatarShape.rectangle(100, 100, BorderRadius.all(new Radius.circular(20.0)))),
//...

其他参数允许你进一步自定义头像的外观:

参数 类型 默认值 描述
backgroundColor Color Colors.transparent 加载图像时或加载透明 PNG 时使用的背景颜色。
border Border null 可以传递一个 Border 对象,例如 Border.all(color: Colors.blue, width: 3)
elevation double 0 标准的 Material 抬升效果。
loader Widget Center(child: CircularProgressIndicator()) 可以传递任何自定义小部件来替换默认加载器。
margin EdgeInsetsGeometry null 可以传递一个 EdgeInsetsGeometry 来更改默认边距(继承自 Card)。
shadowColor Color 如果为 null,则使用环境 CardThemeshadowColor,如果该值也为 null,则使用主题的 ThemeData.shadowColor(默认黑色)。 绘制在头像下方的阴影颜色。
textStyle TextStyle TextStyle(color: Colors.white, fontSize: height / 2) 当小部件使用 namevalue 参数的文本值时使用的 TextStyle

手势

你可以使用 onTap 传递一个回调函数:

Avatar(
  onTap: () {
    print("Tap!");
  },
)
//...

缓存

此插件依赖于 flutter_cache_manager。将 useCache 设置为 true 可以为每个远程图像请求启用缓存,从而提高性能。默认缓存过期时间为 7 天。

Avatar(
  useCache: true
)
//...

建议、改进、问题和支持

  • 你是否在项目中使用了此插件? 通过 推特 说声你好吧!

  • 想要改进此插件? 源代码托管在 GitHub 上。fork 它并开始工作吧!;)

  • 需要支持? 请通过 电子邮件 联系我,或在 GitHub 上提交问题。

许可证

MIT License - Copyright © Alberto Fecchi

完整许可证请参阅 这里

示例代码

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Avatars Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Avatars Demo'),
    );
  }
}

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Avatar(
              sources: [
                GitHubSource('luckyseven'),
                InstagramSource('alberto.fecchi'), // 回退到 InstagramSource 如果 GitHubSource 不可用
              ],
              name: 'Alberto Fecchi', // 如果没有可用的图像源,则回退到名称
            ),
            Avatar(
              elevation: 3,
              shape: AvatarShape.rectangle(
                  100, 100, BorderRadius.all(new Radius.circular(20.0))),
              name: 'Alberto Fecchi', // 显示名称首字母(最多两个)
            ),
          ],
        ),
      ),
    );
  }
}

以上代码展示了如何使用 avatars 插件生成不同类型的头像,并配置了形状、尺寸、边框和其他属性。希望对你有所帮助!


更多关于Flutter头像生成插件avatars的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter头像生成插件avatars的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用avatars插件来生成头像的一个简单示例。avatars插件(假设你指的是一个流行的头像生成库,例如flutter_avatars)通常允许你通过一些简单的配置来生成具有不同样式和颜色的头像。

首先,确保你已经在pubspec.yaml文件中添加了flutter_avatars依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_avatars: ^x.y.z  # 请替换为最新版本号

然后,运行flutter pub get来安装依赖。

接下来,在你的Dart文件中,你可以按照以下方式使用flutter_avatars插件来生成头像:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Avatars Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Avatars Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // 使用默认配置生成头像
              AvatarGlow(
                glowColor: Colors.blueAccent,
                endRadius: 70.0,
                duration: 2000,
                repeat: true,
                child: Avatar(
                  text: 'AB',
                  size: 60,
                  backgroundColor: Colors.blue,
                ),
              ),
              SizedBox(height: 20),

              // 使用自定义配置生成圆形头像
              Avatar(
                text: 'CD',
                backgroundColor: Colors.red,
                borderColor: Colors.white,
                borderWidth: 2.0,
                radius: 30,
                size: 60,
              ),
              SizedBox(height: 20),

              // 使用自定义配置生成方形头像
              Avatar(
                text: 'EF',
                backgroundColor: Colors.green,
                shape: AvatarShape.square,
                size: 60,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中,我们使用了AvatarAvatarGlow两个组件:

  • Avatar组件用于生成基本的头像。你可以通过text属性设置显示的文本,通过backgroundColor设置背景颜色,通过shape设置头像形状(圆形或方形),以及其他一些属性来调整边框和大小。

  • AvatarGlow组件用于给头像添加发光效果。你可以通过glowColor设置发光颜色,通过endRadius设置发光半径,通过duration设置发光效果的持续时间,以及通过repeat设置是否重复发光效果。

这个示例展示了如何使用flutter_avatars插件来生成具有不同样式和效果的头像。你可以根据需要进一步自定义这些头像的样式。

回到顶部