CODEWITHSUNDEEP
flutterflutter-web
Dinesh Nagarajan
Dinesh Nagarajan

Reputation: 1243

Is there a way to detect flutter web is used in mobile browser?

I'm aware of Platform constants available to identify for which the flutter build is compiled to run.

But is there any way to identify the user is using the flutter web site in mobile?

Any help is appreciated, Thanks in advance.

Upvotes: 3

Views: 6285

Answers (5)

MU'men Ahmed
MU'men Ahmed

Reputation: 159

I went through the same issue, and I guess I figured out what's the problem. For me, I had this snipper in my ScreenUtils initializer

if (kIsWeb) {
      return ScreenUtilInit(
        designSize: const Size(1440, 900), // Set a base size for web app
        minTextAdapt: true,
        splitScreenMode: true,
        builder: builder,
      );
    }
    return ScreenUtilInit(
      useInheritedMediaQuery: true,
      designSize: const Size(414, 736),
      builder: builder,
    );
  }

and I was assigning w width 218.w to some random widget and it's working totally fine with the mobile sizes and web sizes until I trick my own code when I open web page but in mobile size. So, if my mobile screen width was for example 411 pixels and the plugin wants to find the right proportion width of 218 for it, it would be approximately 216. but when you want to do the same thing with a size of Size(1440, 900) you would fine a huge difference in the result because applying the same equation would give you a width of 56 pixels which completely ruins the screen. So, a quick work around is to add additional condition to the determining the screen size. The condition to determine if you are using web but on mobile size would be

bool isWebOnMobileSize(BuildContext context) {
    if (!kIsWeb) return false; // Not on web
    final screenWidth = MediaQuery.of(context).size.width;
    const mobileBreakpoint = 725; // Example: typical max width for mobile devices
    return screenWidth < mobileBreakpoint;
  }

and the final build function would contain this part

if (kIsWeb && !isWebOnMobileSize(context)) {
      return ScreenUtilInit(
        designSize: const Size(1440, 900), // Set a base size for web app
        minTextAdapt: true,
        splitScreenMode: true,
        builder: builder,
      );
    }
    return ScreenUtilInit(
      useInheritedMediaQuery: true,
      designSize: const Size(414, 736),
      builder: builder,
    );

I know it's not the best practice, but I wanted to do the minimal work to overcome the issue. Hope it helps.

Upvotes: 0

BHARATH T
BHARATH T

Reputation: 682

If you want to check this without third party package, use

import 'package:flutter/foundation.dart';

final isWebMobile = kIsWeb && (defaultTargetPlatform == TargetPlatform.iOS || defaultTargetPlatform == TargetPlatform.android);

Reference: https://github.com/flutter/flutter/issues/80505

Upvotes: 1

SinaMN75
SinaMN75

Reputation: 7631

I believe you can do it by checking both platform and screen size. if platform is web and screen size is small, it's definitely mobile browser.

GetX package also has a method named isPhone, you can use that too.

bool isTablet = context.isTablet;
bool isPhone = context.isPhone;
bool isAndroid = GetPlatform.isAndroid;
bool isIos = GetPlatform.isIOS;
bool isMacOs = GetPlatform.isMacOS;
bool isWindows = GetPlatform.isWindows;
bool isLinux = GetPlatform.isLinux;
bool isFuchsia = GetPlatform.isFuchsia;
bool isMobile = GetPlatform.isMobile;
bool isWeb = GetPlatform.isWeb;
bool isDesktop = GetPlatform.isDesktop;
bool isLandScape = context.isLandscape;
bool isPortrait = context.isPortrait;
double screenHeight = Get.height;
double screenWidth = Get.width;

Upvotes: 2

Andrej
Andrej

Reputation: 3225

You can use the TargetPlatform class from package:flutter/foundation.dart, for example:

defaultTargetPlatform == TargetPlatform.iOS
or
defaultTargetPlatform == TargetPlatform.android

Upvotes: 3

Kirill Bubochkin
Kirill Bubochkin

Reputation: 6343

You can check device_info_plus package, specifically WebBrowserInfo class for some related information.

Upvotes: 2

Related Questions