Flutter面部识别或处理插件flutter_face_pile的使用

介绍

Flutter Face Pile 是一个用于显示重叠头像图像的小组件，通常用于表示用户加入和离开某个组的情况。该组件最初由 @SuperDeclarative 提供，并遵循 BSD-3-Clause 许可证。

开始使用

添加依赖

首先，在你的 pubspec.yaml 文件中添加 flutter_face_pile 依赖：

dependencies:
  flutter_face_pile: ^0.0.3

然后在 Dart 代码中导入该包：

import 'package:flutter_face_pile/flutter_face_pile.dart';

使用示例

以下是一个简单的示例，展示了如何使用 FacePile 组件来显示一组用户头像：

import 'package:flutter/material.dart';
import 'package:flutter_face_pile/flutter_face_pile.dart';
import 'package:flutter/services.dart' show NetworkImage;

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Face Pile Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FacePileScreen(),
    );
  }
}

class FacePileScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Face Pile'),
      ),
      body: Center(
        child: FacePile(
          faces: [
            FaceHolder(
              id: '1',
              name: 'user 1',
              avatar: NetworkImage('https://i.pravatar.cc/300?img=1'),
            ),
            FaceHolder(
              id: '2',
              name: 'user 2',
              avatar: NetworkImage('https://i.pravatar.cc/300?img=2'),
            ),
            FaceHolder(
              id: '3',
              name: 'user 3',
              avatar: NetworkImage('https://i.pravatar.cc/300?img=3'),
            ),
          ],
          faceSize: 50,
          facePercentOverlap: .4,
          borderColor: Colors.white,
        ),
      ),
    );
  }
}

完整示例 Demo

以下是一个更完整的示例，包含动态添加和移除用户的按钮：

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_random_user/flutter_random_user.dart'; // 需要添加此包以生成随机用户数据
import 'package:flutter_face_pile/flutter_face_pile.dart';

void main() {
  runApp(
    MaterialApp(
      title: 'Flutter Face Pile',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: const FacePileDemoScreen(),
    ),
  );
}

class FacePileDemoScreen extends StatefulWidget {
  const FacePileDemoScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  State<FacePileDemoScreen> createState() => _FacePileDemoScreenState();
}

class _FacePileDemoScreenState extends State<FacePileDemoScreen> {
  late List<FaceHolder> _availableUsers;
  final _facePileUsers = <FaceHolder>[];

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

  Future<void> _populateFakeUsers() async {
    final randomUsers = userGenerator(
      max: 20,
      loremIpsumParagraphs: 1,
      loremIpsumWords: 100,
    );

    _availableUsers = randomUsers
        .map(
          (randomUser) => FaceHolder(
            id: randomUser.userName,
            name: randomUser.firstName,
            avatar: NetworkImage(randomUser.thumbNail),
          ),
        )
        .toList();
  }

  void _addUserToPile() {
    if (_availableUsers.isNotEmpty) {
      final user = _availableUsers.removeLast();
      setState(() {
        _facePileUsers.add(user);
      });
    }
  }

  void _removeUserFromPile() {
    if (_facePileUsers.isNotEmpty) {
      final randomIndex = Random().nextInt(_facePileUsers.length);
      setState(() {
        final user = _facePileUsers.removeAt(randomIndex);
        _availableUsers.insert(0, user);
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Face Pile')),
      body: Center(
        child: ConstrainedBox(
          constraints: const BoxConstraints(maxWidth: 200),
          child: FacePile(
            faces: _facePileUsers,
            faceSize: 50,
            facePercentOverlap: .4, // 40% face overlap.
            borderColor: Colors.white,
          ),
        ),
      ),
      floatingActionButton: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          FloatingActionButton(
            onPressed: _removeUserFromPile,
            mini: true,
            child: const Icon(Icons.remove),
          ),
          const SizedBox(width: 24),
          FloatingActionButton(
            onPressed: _addUserToPile,
            mini: true,
            child: const Icon(Icons.add),
          ),
        ],
      ),
    );
  }
}