How to know in flutter web that user using PWA or desktop?

There are two ways you can tackle this issue.

1. ResponsiveBuilder
2. MediaQuery

Let me explain both ways.

Responsive Builder

I personally prefer Responsive builder method that is more easy to use and we don't have do any calculation the responsive builder handles it all

• get the responsive_builder package and add it to the pubspec.yaml file and follow the installation steps.

• Create a main screen which will help us select the two different UI according their size one for phone and one for desktop.

• Create the two UI's which we will use, one for phone and desktop.

below is a small example of how I use it.

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
    );
  }
}

Here I have created one main class called as studentsListView(), and I navigate to students list view. My ScreenTypeLayout decides which UI to show depending upon the screen size.

Method 2 MediaQuery

Media Query is one more way do differenciate between mobile and desktop. With media query we can get the height and width of of screen or device where our app is running.

When our screen load we will get the width of the screen by following method in to our Widget Build function.

@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()
}

some thing like this. These are the two ways you use to get different screen layouts.