我应该如何在我的应用程序的 Flutter 移动版和网页版之间做出一些区别？

Posted 2023-02-23

【中文标题】我应该如何在我的应用程序的 Flutter 移动版和网页版之间做出一些区别？

【英文标题】：How should I make some differences between Flutter mobile and web version of my app?

【发布时间】：2022-01-23 08:18:51

【问题描述】：

如果我想为我的应用程序使用一个代码库，但为移动应用程序添加一些特定的小部件/功能，并为我的应用程序的 Web 版本添加一些特定的小部件/功能，我应该怎么做？我是否应该编写所有代码并在这些特定小部件之前添加 if 语句以查看用户在哪个平台上运行应用程序并显示/隐藏该小部件/功能，或者我必须将移动和 Web 小部件分隔在不同的文件中?

例如，我想在移动版上展示相机功能，在网页版上展示另一个功能。我该怎么做？

【参考方案1】：

您可以查看设备的平台，然后显示或不显示您的内容。

你可以通过几种方式做到这一点，最简单的一种是：

import 'dart:io' show Platform;

    if (Platform.isandroid) 
      // Android-specific code
     else if (Platform.isios) 
      // iOS-specific code
    

选项有：

Platform.isAndroid
Platform.isFuchsia
Platform.isIOS
Platform.isLinux
Platform.isMacOS
Platform.isWindows

网页专用：

import 'package:flutter/foundation.dart' show kIsWeb;

if (kIsWeb) 
  // web
 else 
  // not web

或者您也可以使用MediaQuery 计算屏幕尺寸。

要显示或不显示您可以使用小部件可见性的功能

https://api.flutter.dev/flutter/widgets/Visibility-class.html

【参考方案2】：

您可以像这样检查您的应用是否在网络上运行

import 'package:flutter/foundation.dart' show kIsWeb;

if (kIsWeb) 
  // It's running on the web!
 else 
  // NOT running on the web!
  // You can also check for additional platforms here.
  // Or you only develop for web and mobile this is mobile

阅读此链接的文档以获得更多理解：https://api.flutter.dev/flutter/foundation/kIsWeb-constant.html