pub.dev - my package not showing platforms correctly (web missing)

Question

I developed a flutter package multi_image_picker_view: https://pub.dev/packages/multi_image_picker_view

This package depends on file_picker and flutter_reorderable_grid_view, they both support the Web. But in my package, web option is not visible in pub.dev. Even this package works fine on the web.

👉Help me to figure out why WEB is not showing on pub.dev.

📜My pubspec.yaml

name: multi_image_picker_view
description: A complete widget that can easily pick multiple images from a device and display them in UI. Also picked image can be re-ordered and removed easily.
version: 0.0.6
homepage: https://github.com/shubham-gupta-16/multi_image_picker_view
repository: https://github.com/shubham-gupta-16/multi_image_picker_view
issue_tracker: https://github.com/shubham-gupta-16/multi_image_picker_view/issues

environment:
  sdk: ">=2.17.1 <3.0.0"
  flutter: ">=1.17.0"

dependencies:
  flutter:
    sdk: flutter

  flutter_reorderable_grid_view: ^3.1.3
  file_picker: ^5.0.1

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0

flutter:
  assets:
    - packages/multi_image_picker_view/assets/close-48.png

👨‍💻Commands I used to publish

flutter pub publish

🗃️My Matchine Info

• Flutter Version: 3.0.1
• Channel: Stable
• Dart Version: 2.17.1
• IDE: Android Studio Chipmunk | 2021.2.1 Patch 1

🚀You can find the complete code Github: https://github.com/shubham-gupta-16/multi_image_picker_view

Thank you in advance.

Answer 1

Conditional import required

The reason why this package is not showing Web on pub.dev is that it uses dart.io without conditional import.

To fix this, I separated the file where it is used. One for web and one for non-web platforms. Then import them by using conditions based on the running platform.

web_preview.dart

import 'package:flutter/material.dart';

import '../image_file.dart';

class ImagePreview extends StatelessWidget {
  final ImageFile file;

  const ImagePreview({Key? key, required this.file}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(4),
      child: Image.memory(
        file.bytes!,
        fit: BoxFit.cover,
        errorBuilder: (context, error, stackTrace) {
          return const Center(child: Text('No Preview'));
        },
      ),
    );
  }
}

non_web_preview.dart

import 'dart:io'; // here I imported dart:io
import 'package:flutter/material.dart';
import '../image_file.dart';

class ImagePreview extends StatelessWidget {
  final ImageFile file;

  const ImagePreview({Key? key, required this.file}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(4),
      child: Image.file(
        File(file.path!), // Now I can use File class
        fit: BoxFit.cover,
      ),
    );
  }
}

my_package_file.dart

...
import 'non_web_preview.dart' if (dart.library.html) 'web_preview.dart'; // conditional import

class MyPackageFile extends StatelessWidget {
  ...
  
  @override
  Widget build(BuildContext context) {
    return ImagePreview(file: imageFile); // Using ImagePreview class
  }
}