Flutter微信头像获取插件wx

Flutter微信头像获取插件wx_avatar的使用

插件介绍

wx_avatar 是一个为Flutter开发者提供的直观且易用的API，允许你轻松地根据需求定制头像。

示例代码

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'WxAvatar Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        extensions: [
          WxAvatarThemeDefault(
            context,
            style: WxAvatarStyle(
              borderRadius: BorderRadius.circular(6),
            ),
          ),
        ],
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              SizedBox(height: 40),
              WxText.displayMedium(
                'WxAvatar',
                gradient: LinearGradient(
                  colors: [Colors.green, Colors.blue],
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                ),
                fontWeight: FontWeight.bold,
                letterSpacing: -22,
              ),
              SizedBox(height: 40),
              Wrapper(title: 'Rectangle Shape', child: Wrap(spacing: 20, children: [
                WxAvatar(
                  backgroundColor: Colors.red,
                  image: NetworkImage('https://i.pravatar.cc/50?u=6'),
                ),
                WxAvatar(
                  elevation: 3.0,
                  backgroundColor: Colors.red,
                  foregroundStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.amber),
                  child: Text('Wx'),
                ),
                WxAvatar(
                  borderStyle: BorderStyle.solid,
                  borderColor: Colors.black54,
                  borderWidth: 2,
                  foregroundColor: Colors.black87,
                  foregroundSize: 40,
                  child: Icon(Icons.person),
                ),
              ])),
              SizedBox(height: 20),
              Wrapper(title: 'Circle Shape', child: Wrap(spacing: 20, children: [
                WxAvatar.circle(image: NetworkImage('https://i.pravatar.cc/50?u=2')),
                WxAvatar.circle(elevation: 3.0, backgroundColor: Colors.red, child: Text('Wx')),
                WxAvatar.circle(borderStyle: BorderStyle.solid, borderColor: Colors.black54, borderWidth: 2, backgroundColor: Theme.of(context).colorScheme.surface, foregroundColor: Colors.black87, foregroundSize: 30, child: Icon(Icons.person)),
              ])),
              SizedBox(height: 20),
              Wrapper(title: 'Custom Shape', child: Wrap(spacing: 25, children: [
                WxAvatar(
                  border: StarBorder(points: 12, innerRadiusRatio: .9), borderStyle: BorderStyle.solid, borderOffset: 5, borderWidth: 2, borderColor: Colors.blue, backgroundColor: Colors.red, image: NetworkImage('https://i.pravatar.cc/50?u=7'),
                ),
                WxAvatar(
                  border: StarBorder(points: 8, innerRadiusRatio: .7, pointRounding: .9), shadows: [BoxShadow(color: Colors.green, spreadRadius: 3, blurRadius: 7, offset: Offset(0, 1)], backgroundColor: Colors.red, backgroundGradient: LinearGradient(begin: Alignment.topRight, end: Alignment.bottomLeft, colors: [Colors.blue, Colors.red]), child: Text('Wx'),
                ),
              ])),
              SizedBox(height: 20),
              Wrapper(title: 'Grouped Avatar', child: OverlapStack.builder(minSpacing: 0.5, maxSpacing: 0.8, leadIndex: 3, itemSize: const Size.square(30), itemCount: 25, itemBuilder: (context, i) { return WxAvatar.circle(radius: 15, borderWidth: 3, borderStyle: BorderStyle.solid, borderColor: Theme.of(context).colorScheme.surface, image: NetworkImage('https://i.pravatar.cc/50?u=$i'), ), infoBuilder: (context, remaining) { return WxAvatar.circle(radius: 15, elevation: 3.0, foregroundSize: 11, backgroundColor: Colors.red, child: Text('$remaining'), ); }, )),
              SizedBox(height: 40),
            ]),
          ),
        ),
      ),
    );
  }
}

class Wrapper extends StatelessWidget {
  final String title;
  final Widget child;

  const Wrapper({
    super.key,
    required this.title,
    required this.child,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: [
        Padding(
          padding: EdgeInsets.fromLTRB(10, 0, 0, 0),
          child: WxText.labelLarge(title),
        ),
        SizedBox(
          width: 300,
          height: 100,
          child: Card.outlined(child: Padding(padding: EdgeInsets.all(15.0), child: Center(child: child)),),
        ),
      ],
    );
  }
}

使用说明

矩形形状：

WxAvatar(
  backgroundColor: Colors.red,
  image: NetworkImage('https://i.pravatar.cc/50?u=6'),
),

圆形形状：

WxAvatar.circle(image: NetworkImage('https://i.pravatar.cc/50?u=2')),

自定义形状：

WxAvatar(
  border: StarBorder(points: 12, innerRadiusRatio: .9), borderStyle: BorderStyle.solid, borderOffset: 5, borderWidth: 2, borderColor: Colors.blue, backgroundColor: Colors.red, image: NetworkImage('https://i.pravatar.cc/50?u=7'),
),

分组头像：
```
OverlapStack.builder(...)
```

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

yibo5220 1楼

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

当然，以下是如何在Flutter项目中使用wx_avatar插件来获取微信头像的示例代码。wx_avatar插件通常用于根据微信用户的OpenID获取其头像URL。请注意，由于微信API的使用涉及到权限和认证，实际使用中你需要确保你已经获得了相应的微信开放平台权限和API密钥。

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

dependencies:
  flutter:
    sdk: flutter
  wx_avatar: ^最新版本号  # 请替换为实际的最新版本号

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

接下来，在你的Flutter项目中，你可以使用以下代码来获取微信用户的头像：

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String avatarUrl = '';

  @override
  void initState() {
    super.initState();
    _getWeChatAvatar();
  }

  Future<void> _getWeChatAvatar() async {
    // 替换为你的微信AppID和AppSecret
    String appId = '你的微信AppID';
    String appSecret = '你的微信AppSecret';

    // 通常你需要一个后端服务来获取access_token，这里为了简化直接调用wx_avatar插件的静态方法（不推荐在生产环境中这样做）
    // 正常情况下，你应该先通过你的后端服务器向微信服务器请求access_token，然后使用access_token来获取用户的头像URL
    // 由于直接获取access_token涉及到敏感信息，这里我们使用插件提供的模拟方法（如果有的话）或者你应该自己处理这部分逻辑
    try {
      // 假设插件提供了某种静态方法来获取头像URL（注意：实际插件API可能不同，请参考插件文档）
      // 这里是一个假设的调用方式，实际使用时请参考插件的官方文档
      // avatarUrl = await WxAvatar.getAvatarUrl('用户的OpenID');
      
      // 由于直接调用可能涉及敏感信息，这里我们假设你已经有了access_token，并直接使用它（不推荐）
      // 注意：下面的代码是假设性的，实际插件可能没有提供这样的静态方法
      // 请务必通过你的后端服务器安全地获取和处理access_token
      String accessToken = '通过你的后端获取的access_token'; // 这是一个占位符，你需要从微信获取实际的access_token
      avatarUrl = await WxAvatar.getAvatarFromAccessToken(accessToken, '用户的OpenID');
      
      // 如果插件没有提供静态方法，你应该通过HTTP请求使用access_token和OpenID来获取头像URL
      // 例如：
      // final response = await http.get(
      //   Uri.parse('https://api.weixin.qq.com/sns/userinfo?access_token=$accessToken&openid=用户的OpenID&lang=zh_CN'),
      // );
      // final data = jsonDecode(response.body);
      // avatarUrl = data['headimgurl'];
      
      setState(() {});
    } catch (e) {
      print('获取微信头像失败: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('微信头像获取示例'),
        ),
        body: Center(
          child: avatarUrl.isEmpty
              ? CircularProgressIndicator()
              : Image.network(avatarUrl),
        ),
      ),
    );
  }
}

注意：

上面的代码包含了一些假设性的调用，因为wx_avatar插件的具体API可能与此不同。在实际使用中，请务必参考插件的官方文档。
由于直接处理微信API密钥和访问令牌（access_token）涉及安全问题，通常建议通过后端服务器来处理这些逻辑，而不是在客户端应用中直接处理。
你需要替换代码中的你的微信AppID、你的微信AppSecret和用户的OpenID为实际的值。
由于直接调用微信API可能涉及到CORS（跨源资源共享）问题，通常建议通过你的后端服务器来代理这些请求。

希望这能帮助你在Flutter项目中集成微信头像获取功能！