2

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.

pub.dev screenshot

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.

Shubham Gupta
  • 1,123
  • 11
  • 16
  • 1
    [`lib/src/multi_image_picker_view.dart`](https://github.com/shubham-gupta-16/multi_image_picker_view/blob/49bfb7202eb9cd025332b1cc242d7e01d38108e2/lib/src/multi_image_picker_view.dart) depends on `dart:io`. `dart:io` is not available for the web. Do you actually need it? Skimming over the file, I don't see any places where it's obviously used. – jamesdlin Aug 27 '22 at 15:20
  • `Line 235:` child: !file.hasPath ? Image.memory( file.bytes!, fit: BoxFit.cover, errorBuilder: (context, error, stackTrace) { return const Center(child: Text('No Preview')); }, ) : Image.file( File(file.path!), fit: BoxFit.cover, ), ), ``` @jamesdlin `File(file.path!)` is only called on mobile devices. It needs `dart.io`. How should I manage this. – Shubham Gupta Aug 28 '22 at 08:02
  • You'll need to use [conditional imports](https://dart.dev/guides/libraries/create-library-packages#conditionally-importing-and-exporting-library-files) and refactor your code so that the web implementation does not use `dart:io` at all. Or perhaps look into using [`package:cross_file`](https://pub.dev/packages/cross_file) and use `Image.memory` instead of `Image.file`. – jamesdlin Aug 28 '22 at 17:07
  • @jamesdlin I saw the source_code of `file_picker`. It also uses `dart:io`. Then how it is available for the web and mine is not? – Shubham Gupta Aug 29 '22 at 11:35

1 Answers1

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
  }
}
Shubham Gupta
  • 1,123
  • 11
  • 16