Flutter头像生成插件flutter_notion_avatar的使用

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

Flutter头像生成插件flutter_notion_avatar的使用

Notion Avatar Widget

flutter_notion_avatar 是一个用于生成和显示Notion风格头像的Flutter插件。该插件目前主要用于ToyProject项目，后续会继续完善。如果有任何建议或问题，欢迎在GitHub上提交issue。

使用示例

1. 基本用法

要使用 NotionAvatar 小部件，您可以将其包裹在一个 SizedBox 或其他小部件中以指定大小，并使用 useRandom 属性生成随机头像。以下是一个完整的示例代码：

import 'package:flutter/material.dart';
import 'package:flutter_notion_avatar/flutter_notion_avatar.dart';
import 'package:flutter_notion_avatar/flutter_notion_avatar_controller.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  NotionAvatarController? controller;

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin NotionAvatar app'),
        ),
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              // 使用 SizedBox 包裹 NotionAvatar 小部件，指定大小
              SizedBox(
                width: 300,
                height: 300,
                child: NotionAvatar(
                  useRandom: true, // 生成随机头像
                  onCreated: (NotionAvatarController controller) {
                    this.controller = controller;
                    // 可以在这里调用控制器的方法来定制头像
                    // this.controller?.random();
                    // this.controller?.setAccessories(5);
                    // this.controller?.setEyes(5);
                    // this.controller?.setEyebrows(5);
                    // this.controller?.setFace(5);
                    // this.controller?.setGlasses(5);
                    // this.controller?.setHair(5);
                    // this.controller?.setMouth(5);
                    // this.controller?.setNose(5);
                    // this.controller?.setDetails(5);
                  },
                ),
              ),
              // 添加一个按钮来生成随机头像
              TextButton(
                onPressed: () {
                  controller?.random();
                },
                child: const Text('Random'),
              )
            ],
          ),
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何使用 flutter_notion_avatar 插件在 Flutter 应用中生成头像的示例代码。这个插件允许你根据用户的初始或名字生成类似于 Notion 的风格化头像。

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

dependencies:
  flutter:
    sdk: flutter
  flutter_notion_avatar: ^最新版本号  # 请替换为最新版本号

然后运行 flutter pub get 来获取依赖。

接下来，在你的 Dart 文件中，你可以按照以下方式使用 flutter_notion_avatar：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Notion Avatar Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // 使用初始生成头像
              NotionAvatar(
                initial: 'A',
                size: 100,
              ),
              SizedBox(height: 20),
              // 使用名字生成头像
              NotionAvatar.fromName(
                name: 'John Doe',
                size: 100,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的 Flutter 应用，其中包含了两个头像生成器：

  1. NotionAvatar(initial: 'A', size: 100,)：根据提供的初始（在这个例子中是 ‘A’）生成一个头像，并设置头像的大小为 100。

  2. NotionAvatar.fromName(name: 'John Doe', size: 100,)：根据提供的名字（在这个例子中是 ‘John Doe’）生成一个头像，并设置头像的大小为 100。

这个插件会自动根据输入生成一个风格化的头像，类似于 Notion 中的头像风格。

确保在实际应用中根据需求调整头像的大小和输入参数。如果你希望进一步自定义头像的样式，可以查看 flutter_notion_avatar 的文档，了解更多关于可用参数和配置的信息。

回到顶部