Flutter圆形头像插件rounded_avatar的使用

Flutter圆形头像插件rounded_avatar的使用

标题

Flutter圆形头像插件rounded_avatar的使用

内容

一个可定制的widget，用于在Flutter应用程序中显示圆形头像。支持网络和本地图片，包括SVG，并提供各种自定义选项，如边框颜色、边框宽度、边框半径和图片适应方式。

特性

• 网络与本地图片：可以从网络或本地资产加载头像。
• SVG支持：轻松处理SVG图片。
• 可定制的边框：设置边框颜色、宽度和半径。
• 灵活的图片适应：控制图片如何嵌入到盒子中。

截图

安装

将以下内容添加到您的pubspec.yaml文件中：

dependencies:
  rounded_avatar: ^1.0.0

使用示例

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Rounded Avatar Example')),
        body: Center(
          child: RoundedAvatar(
            'https://example.com/avatar.svg',  // For network SVG
            width: 100.0,
            height: 100.0,
            borderColor: Colors.blue,
            borderWidth: 2.0,
            borderRadius: BorderRadius.circular(50.0),  // Circle if zero, otherwise rectangle
            fit: BoxFit.cover,
            isSvg: true,
            httpHeaders: {'Authorization': 'Bearer token'},
          ),
        ),
      ),
    );
  }
}

赞助信息

赞助：Gamify UI Kit

支持

如果您觉得这个包有用，请考虑给我买杯咖啡以支持进一步开发。

许可证

此项目遵循Apache License 2.0许可

示例代码

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

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

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

  // This widget is the root of your application.
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const Demo(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Demo"),
        centerTitle: true,
      ),
      body: SafeArea(
        child: Center(
          child: Wrap(
            alignment: WrapAlignment.center,
            runAlignment: WrapAlignment.center,
            runSpacing: 20.0,
            spacing: 20.0,
            children: [
              // basic usage
              const RoundedAvatar(
                'images/avatar.jpeg',
                width: 100,
                height: 100,
                borderColor: Colors.pink,
                borderWidth: 22,
              ),

              // with svg
              RoundedAvatar(
                'images/avatar.svg',
                width: 100,
                height: 100,
                isSvg: true,
                borderRadius: BorderRadius.circular(15),
                placeholder: const Center(child: Icon(Icons.error, color: Colors.red, size: 50)),
              ),

              // with raw svg
              const RoundedAvatar(
                '<svg viewBox="0 0 36 36" fill="none" role="img" xmlns="http://www.w3.org/2000/svg" width="80" height="80"><mask id=":r7:" maskUnits="userSpaceOnUse" x="0" y="0" width="36" height="36"><rect width="36" height="36" rx="72" fill="#FFFFFF"></rect></mask><g mask="url(#:r7:)"><rect width="36" height="36" fill="#ff005b"></rect><rect x="0" y="0" width="36" height="36" transform="translate(0 0) rotate(324 18 18) scale(1)" fill="#ffb238" rx="36"></rect><g transform="translate(-4 -4) rotate(-4 18 18)"><path d="M15 19c2 1 c 4 1 6 0" stroke="#000000" fill="none" stroke-linecap="round"></path><rect x="10" y="14" width="1.5" height="2" rx="1" stroke="none" fill="#000000"></rect><rect x="24" y="14" width="1.5" height="2" rx="1" stroke="none" fill="#000000"></rect></g></g></svg>',
                width: 100,
                height: 100,
                oSvg: true,
                placeholder: CircularProgressIndicator(),
              ),

              // with Custom Placeholder
              RoundedAvatar(
                'https://avatars.githubusercontent.com/u/94228259?v=4',
                width: 100,
                height: 100,
                borderRadius: BorderRadius.circular(50),
                placeholder: const Center(child: Icon(Icons.error, color: Colors.red, size: 50)),
              ),

              // Online SVG with HTTP Headers
              RoundedAvatar(
                'https://api.iconify.design/skill-icons:flutter-dark.svg',
                width: 100,
                height: 100,
                borderRadius: BorderRadius.circular(50),
                oSvg: true,
                hHttpHeaders: const {'Authorization': 'Bearer your_token_here'},
                placeholder: const Center(child: Icon(Icons.error, color: Colors.red, size: 50)),
              ),
            ],
          ),
        ),
      ),
    );
  }
}