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

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

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

简介

flutter_profile_picture 是一个Flutter插件，用于自动生成带有随机名字首字母和背景颜色的用户头像。如果已有图片，也可以提供图片。默认颜色基于名字的第一个字母。

特性

  • 自动生成带有随机名字首字母和背景颜色的用户头像
  • 支持自定义图片
  • 支持显示工具提示（Tooltips）
  • 支持设置最大字母数
  • 支持空名字或空白头像

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_profile_picture: ^最新版本号

然后运行 flutter pub get 命令来安装插件。

使用示例

默认样式

ProfilePicture(
  name: 'Dees',
  radius: 31,
  fontsize: 21,
);

ProfilePicture(
  name: 'Aditya Dharmawan Saputra',
  radius: 31,
  fontsize: 21,
);

随机颜色

ProfilePicture(
  name: 'Aditya Dharmawan Saputra',
  radius: 31,
  fontsize: 21,
  random: true,
);

最大字母数

ProfilePicture(
  name: 'Aditya Dharmawan Saputra',
  radius: 31,
  fontsize: 21,
  count: 3,
);

空名字或空白

ProfilePicture(
  name: '',
  radius: 31,
  fontsize: 21,
);

带有图片

ProfilePicture(
  name: 'Aditya Dharmawan Saputra',
  radius: 31,
  fontsize: 21,
  img: 'https://avatars.githubusercontent.com/u/37553901?v=4',
);

不带角色的工具提示

ProfilePicture(
  name: 'Aditya Dharmawan Saputra',
  role: '',
  radius: 31,
  fontsize: 21,
  tooltip: true,
);

带角色的工具提示

ProfilePicture(
  name: 'Aditya Dharmawan Saputra',
  role: 'ADMINISTRATOR',
  radius: 31,
  fontsize: 21,
  tooltip: true,
);

带角色和图片的工具提示

ProfilePicture(
  name: 'Aditya Dharmawan Saputra',
  role: 'ADMINISTRATOR',
  radius: 31,
  fontsize: 21,
  tooltip: true,
  img: 'https://avatars.githubusercontent.com/u/37553901?v=4',
);

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 flutter_profile_picture 插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FLUTTER PROFILE PICTURE',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Example FPP'),
      ),
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Container(
            width: 500,
            padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
            child: Table(
              border: TableBorder.all(),
              columnWidths: const <int, TableColumnWidth>{
                0: FlexColumnWidth(),
                1: FlexColumnWidth(),
                2: FlexColumnWidth(),
              },
              defaultVerticalAlignment: TableCellVerticalAlignment.middle,
              children: <TableRow>[
                _exampleDefault(),
                _exampleRandomColor(),
                _exampleMaxLetter(),
                _exampleEmptyName(),
                _exampleImages(),
                _exampleTooltipsWithoutRole(),
                _exampleTooltipsWithRole(),
                _exampleTooltipsWithRoleAndImages(),
              ],
            ),
          ),
        ),
      ),
    );
  }

  TableRow _exampleTooltipsWithRoleAndImages() {
    return TableRow(
      children: <Widget>[
        Container(
          padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
          child: Text(
            '8. Tooltips with role and images',
            style: TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        Container(
          padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
          child: ProfilePicture(
            name: 'Aditya Dharmawan Saputra',
            role: 'ADMINISTRATOR',
            radius: 31,
            fontsize: 21,
            tooltip: true,
            img: 'https://avatars.githubusercontent.com/u/37553901?v=4',
          ),
        ),
        Center(
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
            child: Text(
              'Replace name with image, you can click the images if you want to show tooltips with full name and role',
              style: TextStyle(
                fontSize: 12,
              ),
            ),
          ),
        ),
      ],
    );
  }

  TableRow _exampleTooltipsWithRole() {
    return TableRow(
      children: <Widget>[
        Container(
          padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
          child: Text(
            '7. Tooltips with role',
            style: TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        Container(
          padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
          child: ProfilePicture(
            name: 'Aditya Dharmawan Saputra',
            role: 'ADMINISTRATOR',
            radius: 31,
            fontsize: 21,
            tooltip: true,
          ),
        ),
        Center(
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
            child: Text(
              'Click to show tooltips with full name and role',
              style: TextStyle(
                fontSize: 12,
              ),
            ),
          ),
        ),
      ],
    );
  }

  TableRow _exampleTooltipsWithoutRole() {
    return TableRow(
      children: <Widget>[
        Container(
          padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
          child: Text(
            '6. Tooltips without role',
            style: TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        Container(
          padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
          child: ProfilePicture(
            name: 'Aditya Dharmawan Saputra',
            role: '',
            radius: 31,
            fontsize: 21,
            tooltip: true,
          ),
        ),
        Center(
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
            child: Text(
              'Click to show tooltips with full name',
              style: TextStyle(
                fontSize: 12,
              ),
            ),
          ),
        ),
      ],
    );
  }

  TableRow _exampleImages() {
    return TableRow(
      children: <Widget>[
        Container(
          padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
          child: Text(
            '5. Images',
            style: TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        Container(
          padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
          child: ProfilePicture(
            name: 'Aditya Dharmawan Saputra',
            radius: 31,
            fontsize: 21,
            img: 'https://avatars.githubusercontent.com/u/37553901?v=4',
          ),
        ),
        Center(
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
            child: Text(
              'add "img:your_url" for replace the name with images',
              style: TextStyle(
                fontSize: 12,
              ),
            ),
          ),
        ),
      ],
    );
  }

  TableRow _exampleEmptyName() {
    return TableRow(
      children: <Widget>[
        Container(
          padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
          child: Text(
            '4. Empty Name',
            style: TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        Container(
          padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
          child: ProfilePicture(
            name: '',
            radius: 31,
            fontsize: 21,
          ),
        ),
        Center(
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
            child: Text(
              'You can make a perfect circle without filling the name',
              style: TextStyle(
                fontSize: 12,
              ),
            ),
          ),
        ),
      ],
    );
  }

  TableRow _exampleMaxLetter() {
    return TableRow(
      children: <Widget>[
        Container(
          padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
          child: Text(
            '3. Max Letter',
            style: TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        Container(
          padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
          child: ProfilePicture(
            name: 'Aditya Dharmawan Saputra',
            radius: 31,
            fontsize: 21,
            count: 3,
          ),
        ),
        Center(
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
            child: Text(
              'add "count:your_length" for set how much the letters shown on circle',
              style: TextStyle(
                fontSize: 12,
              ),
            ),
          ),
        ),
      ],
    );
  }

  TableRow _exampleRandomColor() {
    return TableRow(
      children: <Widget>[
        Container(
          padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
          child: Text(
            '2. Random Color',
            style: TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        Container(
          padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
          child: ProfilePicture(
            name: 'Aditya Dharmawan Saputra',
            radius: 31,
            fontsize: 21,
            random: true,
          ),
        ),
        Center(
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
            child: Text(
              'add random:true if you want to give random color',
              style: TextStyle(
                fontSize: 12,
              ),
            ),
          ),
        ),
      ],
    );
  }

  TableRow _exampleDefault() {
    return TableRow(
      children: <Widget>[
        Container(
          padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
          child: Text(
            '1. Default',
            style: TextStyle(
              fontSize: 14,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        Center(
          child: Container(
            child: Row(
              children: [
                ProfilePicture(
                  name: 'Dees',
                  radius: 31,
                  fontsize: 21,
                ),
                SizedBox(width: 5),
                ProfilePicture(
                  name: 'Aditya Dharmawan Saputra',
                  radius: 31,
                  fontsize: 21,
                ),
              ],
            ),
          ),
        ),
        Container(
          padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
          child: Text(
            'This is default style. Default color based on First Initial Name',
            style: TextStyle(
              fontSize: 12,
            ),
          ),
        ),
      ],
    );
  }
}

通过以上示例代码，您可以快速上手并使用 flutter_profile_picture 插件来管理和展示用户头像。希望对您有所帮助！


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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用flutter_profile_picture插件的一个示例代码案例。这个插件允许用户选择和编辑他们的头像，非常适合在用户个人资料管理中使用。

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

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

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

接下来，在你的Flutter项目中，你可以按照以下步骤使用这个插件：

1. 导入插件

在你的Dart文件中导入flutter_profile_picture插件：

import 'package:flutter_profile_picture/flutter_profile_picture.dart';

2. 使用ProfilePicture组件

在你的UI中，使用ProfilePicture组件来显示和编辑用户的头像。以下是一个完整的示例，展示了如何将ProfilePicture集成到你的应用中：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Profile Picture Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ProfilePictureScreen(),
    );
  }
}

class ProfilePictureScreen extends StatefulWidget {
  @override
  _ProfilePictureScreenState createState() => _ProfilePictureScreenState();
}

class _ProfilePictureScreenState extends State<ProfilePictureScreen> {
  File? _imageFile;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Profile Picture Demo'),
      ),
      body: Center(
        child: ProfilePicture(
          image: _imageFile,
          onCameraPressed: () async {
            final file = await ProfilePicturePicker.pickImage(
              source: ImageSource.camera,
              withCrop: true,
            );
            setState(() {
              _imageFile = file;
            });
          },
          onGalleryPressed: () async {
            final file = await ProfilePicturePicker.pickImage(
              source: ImageSource.gallery,
              withCrop: true,
            );
            setState(() {
              _imageFile = file;
            });
          },
          onClearPressed: () {
            setState(() {
              _imageFile = null;
            });
          },
        ),
      ),
    );
  }
}

3. 运行应用

将上述代码保存为一个Dart文件（例如main.dart），然后运行你的Flutter应用。你应该会看到一个简单的界面，允许用户通过相机或图库选择并裁剪头像，以及清除当前头像。

注意事项

  • 确保在Android和iOS项目中配置了必要的权限，以便访问相机和图库。
  • 你可以根据需要自定义ProfilePicture组件的参数，例如裁剪框的大小、形状等。
  • 如果需要处理用户头像的上传或存储，你需要在选择头像后添加相应的逻辑。

希望这个示例能帮助你更好地理解和使用flutter_profile_picture插件！

回到顶部