android - Flutter : How to check device name in web

I want to get device name in web for phone like "Iphone 11 / Samsung s11 ultra" for computer like "asus /hp". Does "device_info_plus" work in web ? Greetings

Share Improve this question asked Feb 7 at 9:35 Rami Dhouib 351 silver badge6 bronze badges New contributor Rami Dhouib is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

Add a comment |

1 Answer 1

Sorted by: Reset to default 0

By using this Reference: https://medium.com/creative-technology-concepts-code/detect-device-browser-and-version-using-javascript-8b511906745

package used: universal html

import 'package:flutter/material.dart';
import 'package:universal_html/js.dart' as js;

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  String data = "Tap on button below.";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(data),
            ElevatedButton(
                onPressed: () async {
                  final result =
                      await js.context.callMethod('showDeviceData', [""]);

                  setState(() {
                    data = result;
                  });
                },
                child: const Text("get os")),
          ],
        ),
      ),
    );
  }
}

Update your index.html inside -> web/index.html

<!DOCTYPE html>
<html>
<head>
  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

    This is a placeholder for base href that will be replaced by the value of
    the `--base-href` argument provided to `flutter build`.
  -->
  <base href="$FLUTTER_BASE_HREF">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="cric_live">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>cric_live</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <script src="flutter_bootstrap.js" async></script>
  <script>
   
    var os = [
    { name: 'Windows Phone', value: 'Windows Phone', version: 'OS' },
    { name: 'Windows', value: 'Win', version: 'NT' },
    { name: 'iPhone', value: 'iPhone', version: 'OS' },
    { name: 'iPad', value: 'iPad', version: 'OS' },
    { name: 'Kindle', value: 'Silk', version: 'Silk' },
    { name: 'Android', value: 'Android', version: 'Android' },
    { name: 'PlayBook', value: 'PlayBook', version: 'OS' },
    { name: 'BlackBerry', value: 'BlackBerry', version: '/' },
    { name: 'Macintosh', value: 'Mac', version: 'OS X' },
    { name: 'Linux', value: 'Linux', version: 'rv' },
    { name: 'Palm', value: 'Palm', version: 'PalmOS' }
]
var browser = [
    { name: 'Chrome', value: 'Chrome', version: 'Chrome' },
    { name: 'Firefox', value: 'Firefox', version: 'Firefox' },
    { name: 'Safari', value: 'Safari', version: 'Version' },
    { name: 'Internet Explorer', value: 'MSIE', version: 'MSIE' },
    { name: 'Opera', value: 'Opera', version: 'Opera' },
    { name: 'BlackBerry', value: 'CLDC', version: 'CLDC' },
    { name: 'Mozilla', value: 'Mozilla', version: 'Mozilla' }
]
var header = [
    navigator.platform,
    navigator.userAgent,
    navigator.appVersion,
    navigator.vendor,
    window.opera
];

 // Match helper function
 function matchItem(string, data) {
      var i = 0,
          j = 0,
          regex,
          regexv,
          match,
          matches,
          version;

      for (i = 0; i < data.length; i += 1) {
        regex = new RegExp(data[i].value, 'i');
        match = regex.test(string);
        if (match) {
          regexv = new RegExp(data[i].version + '[- /:;]([\\d._]+)', 'i');
          matches = string.match(regexv);
          version = '';
          if (matches) { if (matches[1]) { matches = matches[1]; } }
          if (matches) {
            matches = matches.split(/[._]+/);
            for (j = 0; j < matches.length; j += 1) {
              if (j === 0) {
                version += matches[j] + '.';
              } else {
                version += matches[j];
              }
            }
          } else {
            version = '0';
          }
          return {
            name: data[i].name,
            version: parseFloat(version)
          };
        }
      }
      return { name: 'unknown', version: 0 };
    }
    //should be same as method name defined in dart file
    function showDeviceData() {
      var agent = header.join(' ');
      var detectedOS = matchItem(agent, os);
      var detectedBrowser = matchItem(agent, browser);
      return `Browser: ${detectedBrowser.name} ${detectedBrowser.version}, OS: ${detectedOS.name} ${detectedOS.version}`;
    }
  </script>
</body>
</html>

You can deploy and test it or

Test (locally):

Connect your device with same wifi network as your system
Run: flutter run -d web-server --web-port 8080 --web-hostname 0.0.0.0
In your device's browser: your-system-ip-address:8080

Here's the result: Result

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

android - Flutter : How to check device name in web - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)