Flutter - How use conditional compilation for platform (Android, iOS, Web)?

user_631843 0
Viewed 3564

I am creating a mobile app in Flutter. Now I have a problem, for one platform I will use a plugin for another, I need to write my platform code (the implementation of the plugin is not suitable).

I see several solutions:

  1. It would be optimal to create several projects and use conditional compilation and shared files in them. I used this technique in visual studio. but I am now using android studio. there is no project file, only folders.

    Also a problem with conditional compilation support. I found this article and conditional compilation is very limited.

  2. create your own plugin and use it fully. but it is more labor intensive.

    What do you advise maybe there is a third way?

flutter-dependencies dart flutter conditional-statements
3 Answers

When working with multiple environments (eg. IO and Web) it might be useful to add stub classes to resolve dependencies at compile time, this way, you can easily integrate multiple platform dependent libraries, without compromising compiling for each of it.

For example, one can have have a plugin structured in the following way:

- my_plugin_io.dart
- my_plugin_web.dart
- my_plugin_stub.dart
- my_plugin.dart

Let's break it down, with a simple example:

my_plugin.dart

This is where you can actually have your plugin's class to be used across multiple projects (ie. environments).

import 'my_plugin_stub.dart'
    if (dart.library.io) 'my_plugin_io.dart'
    if (dart.library.html) 'my_plugin_web.dart';

class MyPlugin {

  void foo() {
     var bar = myPluginMethod(); // it will either resolve for the web or io implementation at compile time
  }
}

my_plugin_stub.dart

This is what will actually resolve at compile time (stubbing) to the right myPluginMethod() method.

Object myPluginMethod() {
  throw UnimplementedError('Unsupported');
}

And then create the platform implementations

my_plugin_web.dart

import 'dart:html' as html;

Object myPluginMethod() {
  // Something that use dart:html data for example
}

my_plugin_io.dart

import 'dart:io';

Object myPluginMethod() {
  // Something that use dart:io data for example
}

Other official alternatives may pass from creating separated projects that share the same interface. This is just like Flutter team has been doing for their web + io plugins, resulting in a project that can be bundled with multiple projects:

- my_plugin_io
- my_plugin_web
- my_plugin_desktop
- my_plugin_interface

A good article explaining this may be found here.

Just typed it right here in SO, so I'm sorry if I had some typo, but you should easily find it on an editor.

user_69199630

You just need to import:

import 'dart:io';

And then use conditionals based on:

// Platform.isIOS       // Returns true on iOS devices
// Platform.isAndroid   // Returns true on Android devices


if (Platform.isIOS) {
  navigationBar = new BottomNavigationBar(...);
}
if (Platform.isAndroid) {
  drawer = new Drawer(...);
}
user_73362320

Add this library (no package needed)

import 'dart:io' show Platform;

Now you can create a function that checks which platform the user is using.

Widget getWidgetBasedOnPlatform() {
  if (Platform.isIOS) {
    return Container(); //the one for iOS
  }
  else if (Platform.isAndroid) {
    return Container(); //the one for Android 
  }
}
user_130627990
Related