⚡️ Use viewAsset in the preview button

[AlexV525]

Resolves #507 (reply in thread).

[AlexV525]

@rbarzel Could you verify if this works as intended?

[rbarzel]

@AlexV525 This change does invoke viewAsset when preview is clicked. But the actual display looks strange with the edge-to-edge semi transparent background. (See screenshot)

Also, even if this is now working as intended, I still don't understand how I can use viewAsset to customize the preview screen. Perhaps what's needed is a new method like viewAssetWithDelegate that allows me to pass in my own AssetPickerViewerBuilderDelegate.

Thanks for your help!

[AlexV525]

Override viewAsset and use push to viewer with delegate within.

[rbarzel]

That's what I was doing, but most of my overridden DefaultAssetPickerViewerBuilderDelegate methods do not get called. The only overriden method getting called is assetPageBuilder. Here's my code.

  @override
  Future<void> viewAsset(
    BuildContext context,
    int index,
    AssetEntity currentAsset,
  ) async {
    // - When we reached the maximum select count and the asset is not selected,
    //   do nothing.
    // - When the special type is WeChat Moment, pictures and videos cannot
    //   be selected at the same time. Video select should be banned if any
    //   pictures are selected.

    logger.w('_MyAssetPickerBuilderDelegate: viewAsset');

    if ((!provider.selectedAssets.contains(currentAsset) &&
            provider.selectedMaximumAssets) ||
        (isWeChatMoment &&
            currentAsset.type == AssetType.video &&
            provider.selectedAssets.isNotEmpty)) {
      return;
    }
    final List<AssetEntity> current;
    final List<AssetEntity>? selected;
    final int effectiveIndex;
    if (isWeChatMoment) {
      if (currentAsset.type == AssetType.video) {
        current = <AssetEntity>[currentAsset];
        selected = null;
        effectiveIndex = 0;
      } else {
        current = provider.currentAssets
            .where((AssetEntity e) => e.type == AssetType.image)
            .toList();
        selected = provider.selectedAssets;
        effectiveIndex = current.indexOf(currentAsset);
      }
    } else {
      current = provider.currentAssets;
      selected = provider.selectedAssets;
      effectiveIndex = index;
    }
    final List<AssetEntity>? result =
        await AssetPickerViewer.pushToViewerWithDelegate(
      context,
      delegate: _MyAssetPickerViewerBuilderDelegate(
        currentIndex: effectiveIndex,
        previewAssets: current,
        themeData: theme,
      ),
    );

    if (result != null && context.mounted) {
      Navigator.of(context).maybePop(result);
    }
  }

class _MyAssetPickerViewerBuilderDelegate
    extends DefaultAssetPickerViewerBuilderDelegate {
  _MyAssetPickerViewerBuilderDelegate({
    required super.currentIndex,
    required super.previewAssets,
    required super.themeData,
  });

  @override
  int get selectedCount {
    logger.w('_MyAssetPickerViewerBuilderDelegate: selectedCount');
    return super.selectedCount;
  }

  @override
  double get bottomBarHeight {
    logger.w('_MyAssetPickerViewerBuilderDelegate: bottomBarHeight');
    return super.bottomBarHeight;
  }

  @override
  AssetEntity get currentAsset {
    logger.w('_MyAssetPickerViewerBuilderDelegate: currentAsset');
    return super.currentAsset;
  }

  @override
  Widget bottomDetailBuilder(BuildContext context) {
    logger.w('_MyAssetPickerViewerBuilderDelegate: bottomDetailBuilder');
    return super.bottomDetailBuilder(context);
  }

  @override
  Widget build(BuildContext context) {
    logger.w('_MyAssetPickerViewerBuilderDelegate: build');
    return super.build(context);
  }

  @override
  Widget assetPageBuilder(BuildContext context, int index) {
    logger.w('_MyAssetPickerViewerBuilderDelegate: assetPageBuilder');
    return super.assetPageBuilder(context, index);
  }

  @override
  Widget confirmButton(BuildContext context) {
    logger.w('_MyAssetPickerViewerBuilderDelegate: confirmButton');
    return super.confirmButton(context);
  }

  @override
  AssetPickerTextDelegate get textDelegate {
    logger.w('_MyAssetPickerViewerBuilderDelegate: textDelegate');
    return const EnglishAssetPickerTextDelegate();
  }

  @override
  Widget selectButton(BuildContext context) {
    logger.w('_MyAssetPickerViewerBuilderDelegate: selectButton');
    return super.selectButton(context);
  }

  @override
  Widget appBar(BuildContext context) {
    logger.w('_MyAssetPickerViewerBuilderDelegate: appBar');
    return super.appBar(context);
  }
}

[AlexV525]