如何在flutter web中知道用户使用PWA或桌面

Question

我想在flutter web中将我的PWA UI与桌面UI分离。我如何知道用户来自移动浏览器还是桌面浏览器？

Answer 1

有两种方法可以解决这个问题。

1. ResponsiveBuilder
2. MediaQuery

让我解释两种方式。

响应式生成器

我个人更喜欢响应生成器方法，它更容易使用，我们不需要做任何计算，响应生成器处理所有

• 获取responsive_builder包并将其添加到pubspec.yaml文件中，然后按照安装步骤进行操作。

• 创建一个主屏幕，帮助我们根据大小选择两个不同的UI——一个用于手机，一个用于桌面。

• 创建我们将要使用的两个UI，一个用于手机和桌面。

下面是我如何使用它的一个小例子。

import '/Views/StudentsListView/students_list_view_desktop.dart';
import '/Views/StudentsListView/students_list_view_mobile.dart';
import 'package:flutter/material.dart';
import 'package:responsive_builder/responsive_builder.dart';

class StudentsListView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ScreenTypeLayout(
mobile: StudentsListViewMobile(),// Mobile layout 
table: StudentsListViewTablet(),// Tablet Layout
desktop: StudentsListViewDesktop(),//Desktop Layout
);
}
}

在这里，我创建了一个名为studentsListView((的主类，并导航到students列表视图。我的ScreenTypeLayout根据屏幕大小决定显示哪个UI。

方法2媒体查询

媒体查询是区分手机和台式机的另一种方式。通过媒体查询，我们可以获得运行应用程序的屏幕或设备的高度和宽度。

当我们加载屏幕时，我们将通过Widget Build函数中的以下方法获得屏幕的宽度。

@override
Widget build(BuildContext context){
var width = MediaQuery.of(context).size.width;```
// now use widgets as per size 
// width > 1200 Desktop
// width < 800 Mobile or small screen
// width > 800 && < 1200 Medium screen
width > 1200 ? return Desktop() : width > 800 && < 1200 ? return MediumScreen() : return Mobile()
}

像这样的事情。这是获得不同屏幕布局的两种方法。