separate web and mobile flutter

Question

I want to separate between web and mobile in my flutter project. I use below code but not work in web app (when I'm test in chrome with this mode)

onTap: () {    
Platform.isAndroid || Platform.isIOS
            ? Navigator.push(context,
                MaterialPageRoute(builder: (_) => ArticlePage(title, id)))
            : launch(URL);
}

in web app my button not work and in mobile is work. any idea or tip?!

Answer 1

You can:

1- use a package like universal_io.

2- if you don't want to use a package you need to create two files

The first one platform_io.dart

import 'dart:io';

class QPlatform {
  static const bool isWeb = false;

  static final bool isIOS = Platform.isIOS || Platform.isMacOS;
}

The second one platfrom_web.dart

class QPlatform {
  static const bool isWeb = true;

  static final bool isIOS = false;
}

and then import it like this where you want to use it

import 'platform/platform_web.dart'
    if (dart.library.io) 'platform/platform_io.dart';

// and use it
onTap: () {    
    QPlatform.isWeb
            ? launch(URL)
            : Navigator.push(context,
                MaterialPageRoute(builder: (_) => ArticlePage(title, id)));
}

This should do the trick for you