Unable to build Flutter Web and Flutter Mobile apps seperately

Question

I am building a flutter project and am having an issue integrating the web and mobile code in a single project. I want to use Moor and Moor_FFI in my mobile code, but even though the entry point to my web (main.dart) and mobile code (main.dev.dart) are configured to be different to debug, it still tries to compile the mobile code for the web. This causes an issue, because FFI and other Dart plugins are not supported on Flutter Web as of now, resulting in a massive error message.

Error compiling dartdevc module:ffi|lib/ffi.ddc.js

packages/ffi/src/utf8.dart:6:8: Error: Not found: 'dart:ffi'
import 'dart:ffi';
       ^
packages/ffi/src/utf16.dart:6:8: Error: Not found: 'dart:ffi'
import 'dart:ffi';
       ^
packages/ffi/src/allocation.dart:5:8: Error: Not found: 'dart:ffi'
import 'dart:ffi';
       ^
packages/ffi/src/utf8.dart:23:20: Error: Type 'Struct' not found.
class Utf8 extends Struct {
                   ^^^^^^
packages/ffi/src/utf8.dart:26:21: Error: Type 'Pointer' not found.
  static int strlen(Pointer<Utf8> string) {
                    ^^^^^^^
packages/ffi/src/utf8.dart:26:21: Error: Expected 0 type arguments.
  static int strlen(Pointer<Utf8> string) {
                    ^
packages/ffi/src/utf8.dart:41:26: Error: Type 'Pointer' not found.
  static String fromUtf8(Pointer<Utf8> string) {
                         ^^^^^^^
packages/ffi/src/utf8.dart:41:26: Error: Expected 0 type arguments.
  static String fromUtf8(Pointer<Utf8> string) {
                         ^
packages/ffi/src/utf8.dart:54:10: Error: Type 'Pointer' not found.
  static Pointer<Utf8> toUtf8(String string) {
         ^^^^^^^
packages/ffi/src/utf8.dart:54:10: Error: Expected 0 type arguments.
  static Pointer<Utf8> toUtf8(String string) {
         ^
packages/ffi/src/utf16.dart:16:21: Error: Type 'Struct' not found.
class Utf16 extends Struct {
                    ^^^^^^
packages/ffi/src/utf16.dart:24:10: Error: Type 'Pointer' not found.
  static Pointer<Utf16> toUtf16(String s) {
         ^^^^^^^
packages/ffi/src/utf16.dart:24:10: Error: Expected 0 type arguments.
  static Pointer<Utf16> toUtf16(String s) {
         ^
packages/ffi/src/allocation.dart:9:7: Error: Type 'DynamicLibrary' not found.
final DynamicLibrary stdlib = Platform.isWindows
      ^^^^^^^^^^^^^^
packages/ffi/src/allocation.dart:13:29: Error: Type 'Pointer' not found.
typedef PosixMallocNative = Pointer Function(IntPtr);
                            ^^^^^^^
packages/ffi/src/allocation.dart:13:46: Error: Type 'IntPtr' not found.
typedef PosixMallocNative = Pointer Function(IntPtr);
                                             ^^^^^^
packages/ffi/src/allocation.dart:14:23: Error: Type 'Pointer' not found.
typedef PosixMalloc = Pointer Function(int);
                      ^^^^^^^
packages/ffi/src/allocation.dart:18:27: Error: Type 'Void' not found.
typedef PosixFreeNative = Void Function(Pointer);
                          ^^^^
packages/ffi/src/allocation.dart:18:41: Error: Type 'Pointer' not found.
typedef PosixFreeNative = Void Function(Pointer);
                                        ^^^^^^^
packages/ffi/src/allocation.dart:19:35: Error: Type 'Pointer' not found.
typedef PosixFree = void Function(Pointer);
                                  ^^^^^^^
packages/ffi/src/allocation.dart:23:31: Error: Type 'Pointer' not found.
typedef WinGetProcessHeapFn = Pointer Function();
                              ^^^^^^^
packages/ffi/src/allocation.dart:26:7: Error: Type 'Pointer' not found.
final Pointer processHeap = winGetProcessHeap();
      ^^^^^^^

And so on.....

Is there any way to configure the compiler to only build the files related to Web or Mobile for the respective runs?

For Reference: Github repo with the error recreated: https://github.com/JoshMarkF/MoorFFIIntegrationDemo

Answer 1

Edit
flutter build web and flutter run -d chrome all works fine.
because web ui code (webui.dart) and mobile ui code (mobileui.dart) are in different dart file,
so these two files can have different import

You can copy paste run 3 three files below, main.dart, webui.dart and mobileui.dart
You can use conditional import to separate different implement for web and mobile
so web and mobile can have totally different logic

code snippet call with prefix multiPlatform

import 'mobileui.dart' if (dart.library.html) 'webui.dart' as multiPlatform;
...
home:  multiPlatform.TestPlugin(),

working demo when use Android Studio run with Android Emulator and Chrome

main.dart

import 'package:flutter/material.dart';
import 'mobileui.dart' if (dart.library.html) 'webui.dart' as multiPlatform;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget { 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(        
        primarySwatch: Colors.blue,
      ),
      home:  multiPlatform.TestPlugin(),
    );
  }
}

mobileui.dart

import 'package:flutter/material.dart';

class TestPlugin extends StatefulWidget {
  @override
  _TestPluginState createState() => _TestPluginState();
}

class _TestPluginState extends State<TestPlugin> {
  @override
  Widget build(BuildContext context) {
    return Text("Mobile");
  }
}

webui.dart

import 'package:flutter/material.dart';
import 'dart:html' as html;
import 'dart:js' as js;
import 'dart:ui' as ui;


class TestPlugin extends StatefulWidget {
  TestPlugin();

  _TestPluginState createState() => _TestPluginState();
}

class _TestPluginState extends State<TestPlugin> {
  String createdViewId = 'map_element';

  @override
  void initState() {
    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
        createdViewId,
            (int viewId) => html.IFrameElement()
          ..width = MediaQuery.of(context).size.width.toString() //'800'
          ..height = MediaQuery.of(context).size.height.toString() //'400'
          ..srcdoc = """<!DOCTYPE html><html>
          <head><title>Page Title</title></head><body><h1>This is a Heading</h1><p>This is a paragraph.</p></body></html>"""
        /*..src = "http://f12apidev32.umc.com/Tableau/jsapi_practice.aspx"*/
          ..style.border = 'none');

    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.symmetric(horizontal: 10),
        decoration: BoxDecoration(
            color: Colors.white,
            border: Border.all(color: Colors.grey[300], width: 1),
            borderRadius: BorderRadius.all(Radius.circular(5))),
        width: 200,
        height: 200,
        child: Directionality(
            textDirection: TextDirection.ltr,
            child: HtmlElementView(
              viewType: createdViewId,
            )));
  }
}

Answer 2

web_ffi: ^0.7.2 in dependencies in pubspec.yaml and import this file. import 'package:web_ffi/web_ffi.dart';

it will separately open web and mobile device..