Flutter名称头像生成插件name_avatar的使用

NameAvatar Widget

NameAvatar 小部件是一个可定制的 Flutter 小部件，它显示一个带有表示名字的文本的圆形头像。此小部件在各种应用程序中用于显示用户头像。

如何使用

import 'package:name_avatar/name_avatar.dart';

NameAvatar(
    name: 'John Doe',
    radius: 50,
    backgroundColor: Colors.blue,
    textColor: Colors.white,
    textStyle: TextStyle(fontWeight: FontWeight.bold),
)

特性

• 显示一个可自定义半径的圆形头像。
• 可以自定义背景颜色、文本颜色和文本样式。
• 可选择显示名字的第一个字符或前两个字符。
• 如果未提供背景颜色，则随机生成背景颜色。

完整示例

以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 NameAvatar 小部件。

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

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

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

  // 这个小部件是您的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '名称头像示例',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('名称头像'),
      ),
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 显示名字 "Dipta Das Suvo" 的头像，显示前两个字符，并设置背景颜色为蓝色
            NameAvatar(
              name: 'Dipta Das Suvo',
              radius: 50,
              isTwoChar: true,
              backgroundColor: Colors.blue,
              textColor: Colors.white,
            ),
            const SizedBox(
              height: 12,
            ),
            // 显示名字 "Emily Patel" 的头像，显示前两个字符
            NameAvatar(
              name: 'Emily Patel',
              isTwoChar: true,
            ),
            const SizedBox(
              height: 12,
            ),
            // 显示名字 "Isabella Nguyen" 的头像，仅显示第一个字符
            NameAvatar(
              name: 'Isabella Nguyen',
              isTwoChar: false,
            ),
            const SizedBox(
              height: 12,
            ),
            // 显示名字 "Xavier" 的头像，显示前两个字符
            NameAvatar(
              name: 'Xavier',
              isTwoChar: true,
            ),
          ],
        ),
      ),
    );
  }
}