Flutter用户信息展示插件profile_view_2_lego的使用

简介

profile_view_2_lego 是一个用于在 Flutter 应用中展示用户信息的插件。它可以帮助开发者快速创建美观且功能丰富的用户信息页面。

安装

以下是安装步骤：

1. 安装 CLI 工具

首先，需要在终端中运行以下命令来安装 lego_cli CLI 工具：

flutter pub global activate lego_cli

注意：如果你是第一次使用 pub global，可以参考 官方文档 获取更多信息。

2. 将插件添加到项目中

进入项目的根目录，并运行以下命令以将 profile_view_2_lego 添加到你的项目中：

lego add profile_view_2_lego

3. 生成并运行 Widget

运行以下命令以生成并启动展示用户信息的 Widget：

flutter run -d chrome lib/widget_book/profile_view_2_lego/_/_.dart

使用示例

以下是一个完整的示例代码，展示如何使用 profile_view_2_lego 插件来创建用户信息页面。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ProfileView2LegoExample(),
    );
  }
}

class ProfileView2LegoExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 创建用户信息数据
    final user = ProfileData(
      name: "张三",
      avatarUrl:
          "https://via.placeholder.com/150", // 替换为实际头像 URL
      jobTitle: "软件工程师",
      company: "ABC科技有限公司",
      email: "zhangsan@example.com",
      phone: "123-456-7890",
      location: "北京市",
      socialMedia: [
        SocialMediaProfile(
          platform: SocialMediaPlatform.github,
          url: "https://github.com/zhangsan",
        ),
        SocialMediaProfile(
          platform: SocialMediaPlatform.linkedin,
          url: "https://www.linkedin.com/in/zhangsan",
        ),
      ],
    );

    return Scaffold(
      appBar: AppBar(
        title: Text("用户信息展示"),
      ),
      body: ProfileView2Lego(
        data: user,
        onEditProfile: () {
          print("编辑用户信息");
        },
      ),
    );
  }
}

// 用户信息数据模型
class ProfileData {
  final String name;
  final String avatarUrl;
  final String jobTitle;
  final String company;
  final String email;
  final String phone;
  final String location;
  final List<SocialMediaProfile> socialMedia;

  ProfileData({
    required this.name,
    required this.avatarUrl,
    required this.jobTitle,
    required this.company,
    required this.email,
    required this.phone,
    required this.location,
    required this.socialMedia,
  });
}

// 社交媒体信息模型
class SocialMediaProfile {
  final SocialMediaPlatform platform;
  final String url;

  SocialMediaProfile({required this.platform, required this.url});
}

// 社交媒体平台枚举
enum SocialMediaPlatform { github, linkedin, twitter, facebook }