PK battles

typedef ZegoLiveStreamingPKBattleHostReconnectingBuilder = Widget Function(
  BuildContext context,
  ZegoUIKitUser? host,
  Map<String, dynamic> extraInfo,
);

typedef ZegoLiveStreamingPKBattleViewBuilder = Widget Function(
  BuildContext context,
  List<ZegoUIKitUser?> hosts,
  Map<String, dynamic> extraInfo,
);

To be specific, if you want to place custom views above, below, and on top of PKView, you can check the following sample code as a reference:

// ZegoUIKitPrebuiltLiveStreamingConfig
config.pkBattleConfig.pkBattleViewBottomBuilder = (
  BuildContext context,
  List<ZegoUIKitUser?> hosts,
  Map<String, dynamic> extraInfo,
) {
  return Container(
    color: Colors.red,
    child: const Center(
      child: Text('pkBattleViewBottomBuilder'),
    ),
  );
};

// ZegoUIKitPrebuiltLiveStreamingConfig
config.pkBattleConfig.pkBattleViewTopBuilder = (
  BuildContext context,
  List<ZegoUIKitUser?> hosts,
  Map<String, dynamic> extraInfo,
) {
  return Container(
    color: Colors.red,
    child: const Center(
      child: Text('pkBattleViewTopBuilder'),
    ),
  );
};

// ZegoUIKitPrebuiltLiveStreamingConfig
config.pkBattleConfig.pkBattleViewForegroundBuilder = (
  BuildContext context,
  List<ZegoUIKitUser?> hosts,
  Map<String, dynamic> extraInfo,
) {
  return Positioned(
    bottom: 80,
    left: 0,
    right: 0,
    child: Container(
      color: Colors.red,
      child: const Center(
        child: Text('pkBattleViewForegroundBuilder'),
      ),
    ),
  );
};

The effect will be like this:

Let's say you have matched three users with IDs 1001, 1002, and 1003 for the PK.

You should select one of the users, for example, 1001, and call ZegoUIKitPrebuiltLiveStreamingController().pk.sendRequest as follows:

ZegoUIKitPrebuiltLiveStreamingController().pk.sendRequest(
    targetHostIDs: ["1002", "1003"],
    isAutoAccept: true,
);

In this case, when users 1002 and 1003 receive the PK invitation, they will automatically enter the PK without the need for manual acceptance.

• When there are two PK users:

  

• When there are three PK users:

  

• When there are four PK users:

  

• When there are five PK users:

  

• When there are six PK users:

  

• When there are more than six PK users:

  

If you want to customize the layout for PK, you just need to inherit from ZegoPKMixerLayout and override two methods: getResolution and getRectList.

• getResolution: should return the width and height of the entire canvas for the streams.
• getRectList: should return the coordinates of the hostCount users on the canvas.

Here's an example using a simple 1x2, 2x2, 3x3 grid layout:

/// two:
/// ┌───┬────┐
/// │???? │ ???? │
/// └───┴────┘
/// four:
/// ┌───┬───┐
/// │???? │???? │
/// ├───┼───┤
/// │???? │   │
/// └───┴───┘
/// nine:
/// ┌───┬───┬───┐
/// │???? │???? │???? │
/// ├───┼───┼───┤
/// │???? │???? │???? │
/// ├───┼───┼───┤
/// │???? │???? │   │
/// └───┴───┴───┘
class PKGridLayout extends ZegoPKMixerLayout {
  @override
  Size getResolution() => const Size(1080, 960);

  @override
  List<Rect> getRectList(
    int hostCount, {
    double scale = 1.0,
  }) {
    final resolution = getResolution();
    final rowCount = getRowCount(hostCount);
    final columnCount = getColumnCount(hostCount);
    final itemWidth = resolution.width / columnCount;
    final itemHeight = resolution.height / rowCount;

    final rectList = <Rect>[];
    var hostRowIndex = 0;
    var hostColumnIndex = 0;
    for (var hostIndex = 0; hostIndex < hostCount; ++hostIndex) {
      if (hostColumnIndex == columnCount) {
        hostColumnIndex = 0;
        hostRowIndex++;
      }

      rectList.add(
        Rect.fromLTWH(
          itemWidth * hostColumnIndex * scale,
          itemHeight * hostRowIndex * scale,
          itemWidth * scale,
          itemHeight * scale,
        ),
      );

      ++hostColumnIndex;
    }

    return rectList;
  }

  int getRowCount(int hostCount) {
    if (hostCount > 6) {
      return 3;
    }
    if (hostCount > 2) {
      return 2;
    }
    return 1;
  }

  int getColumnCount(int hostCount) {
    if (hostCount > 4) {
      return 3;
    }
    return 2;
  }
}