Flutter头像生成插件avatar_better的使用

Flutter头像生成插件avatar_better的使用

特性

特性：

  • ✔️ 初始文本：为头像或占位符显示初始文本。
  • ✔️ 随机颜色：为各种元素生成随机颜色。
  • ✔️ 随机线性渐变：生成随机线性渐变颜色。
  • ✔️ 头像配置：为用户配置头像或用户表示。
  • ✔️ 边框头像：在头像周围创建边框。
  • ✔️ 渐变宽度边框：为边框创建渐变颜色。
  • ✔️ 使用图像资源。
  • ✔️ 使用网络图像。
  • ✔️ 所有平台裁剪。

开始使用

dependencies:
  avatar_better: ^0.0.9+5

如何使用

import 'package:avatar_better/avatar_better.dart';

如何安装

Android
  • 要请求权限，请在 AndroidManifest.xml 中添加以下代码：
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools">

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<!-- For Android 10 and above, to access external storage -->
<uses-permission android:name="android.permission.ACCESS_MEDIA_LOCATION" />

<!-- For Android 12 and above -->
<uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE" tools:ignore="ScopedStorage"/>

<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO"/>
<uses-permission android:name="android.permission.READ_MEDIA_AUDIO"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE"/>

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />

<application
        android:label="avaterbetter"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher"
        android:requestLegacyExternalStorage="true">
  • 添加以下代码到 <application> 标签内：
<application
        android:label="avaterbetter"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher"
        android:requestLegacyExternalStorage="true">
  • 添加以下代码以支持裁剪功能：
<activity
    android:name="com.yalantis.ucrop.UCropActivity"
    android:screenOrientation="portrait"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>

<queries>
    <intent>
        <action android:name="android.intent.action.GET_CONTENT" />
    </intent>
</queries>
iOS
  • 在 Info.plist 文件中添加以下代码：
<key>NSPhotoLibraryUsageDescription</key>
<string>我们需要访问您的照片库来选择图片进行编辑。</string>
<key>NSCameraUsageDescription</key>
<string>我们需要访问您的相机来拍摄照片进行编辑。</string>

<key>NSPhotoLibraryUsageDescription</key>
<string>应用程序需要访问您的照片库来读取图片。</string>

<key>NSMicrophoneUsageDescription</key>
<string>应用程序需要访问麦克风来录制音频。</string>

<key>NSPhotoLibraryAddUsageDescription</key>
<string>应用程序需要访问您的照片库来保存图片和视频。</string>
macOS 安装
  • 由于 macOS 实现使用了 file_selector，因此需要添加一个文件系统访问权限：
<key>com.apple.security.files.user-selected.read-only</key>
<true/>
Web
  • 在 web/index.html 文件的 <head> 标签内添加以下代码：
<head>
    ....

    <!-- cropperjs -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.js"></script>

    ....
</head>

示例

Avatar(
    text: "Mic",
  radius: 50,
  showPageViewOnTap: true,
   itemsBuilderDropdownMenuItem: (index) {
     return [];
    },
     profileImageViewerOptions: ProfileImageViewerOptions(
      fitBackgroundImage: BoxFit.fitHeight,
      ),
     imageNetwork:
             "https://platinumlist.net/guide/wp-content/uploads/2023/03/IMG-worlds-of-adventure.webp",
   ),

Avatar.profile(
     text: "Mic",
      radius: 50,
    bottomSheetStyles: BottomSheetStyles(
  backgroundColor: Colors.red,
   elevation: 2,
  middleText: 'OR',
 middleTextStyle: const TextStyle(color: Colors.white)),
onPickerChange: () {},
 onPickerChangeWeb: (file) { },
 optionsCrop: OptionsCrop(),
  ),

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

1 回复

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


当然，下面是一个关于如何在Flutter项目中使用avatar_better插件来生成头像的示例代码。这个插件提供了多种自定义选项，允许你根据需要生成个性化的头像。

首先，确保你已经在pubspec.yaml文件中添加了avatar_better依赖：

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

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

接下来，你可以在你的Dart文件中使用AvatarBetter小部件来生成头像。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AvatarBetter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('AvatarBetter Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // 使用默认设置生成头像
              AvatarBetter(
                text: 'AB',
                size: 100,
              ),

              SizedBox(height: 20),

              // 自定义背景颜色和文本样式
              AvatarBetter(
                text: 'FL',
                backgroundColor: Colors.amber,
                foregroundColor: Colors.black,
                textSize: 30,
                size: 120,
                borderRadius: BorderRadius.circular(50),
                borderWidth: 2,
                borderColor: Colors.deepOrange,
              ),

              SizedBox(height: 20),

              // 使用图片生成头像
              AvatarBetter.image(
                image: NetworkImage('https://example.com/avatar.png'),
                size: 100,
                borderRadius: BorderRadius.circular(50),
                borderWidth: 4,
                borderColor: Colors.blueAccent,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们展示了三种不同的头像生成方式：

  1. 使用默认设置生成头像：AvatarBetter(text: 'AB', size: 100,)。
  2. 自定义背景颜色和文本样式生成头像：通过调整backgroundColor、foregroundColor、textSize、size、borderRadius、borderWidth和borderColor等参数来自定义头像的外观。
  3. 使用图片生成头像：AvatarBetter.image(image: NetworkImage('https://example.com/avatar.png'), ...)，这里使用了网络图片作为头像，你也可以使用本地图片或其他图片提供方式。

请确保将NetworkImage中的URL替换为有效的图片URL，或者使用AssetImage来加载本地图片。

这个示例应该能够帮助你快速上手avatar_better插件的使用。如果有更多自定义需求，可以查阅该插件的官方文档以获取更多详细信息和参数说明。

回到顶部