広告

Flutterラボの

プレミアム会員になる

【Flutter WEB】ブラウザ名を取得する

2021.11.15

device_info_plusパッケージで、実行しているブラウザ名が取得できるので、その方法を紹介します。

device_info_plus | Flutter Package Flutter plugin providing detailed information about the devic pub.dev
Flutterラボ|動画で学ぶFlutter学習サイト Flutter・Dart・Firebaseに関するアプリ制作の技術を学ぶことができます。プログラミング初心者から経験者まで flutterlabo.tech

まずはDeviceInfoPluginをインスタンス化します。

DeviceInfoPlugin deviceInfo = DeviceInfoPlugin();

FutureBuilderでWebBrowserInfoを取得して、表示します。

FutureBuilder<WebBrowserInfo>(
  future: Future<WebBrowserInfo>(() async {
    // データ取得
    return (await deviceInfo.webBrowserInfo);
  }),
  builder: (context, snapShot) {
    if (snapShot.connectionState == ConnectionState.done) {
      return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('ブラウザ名: ${snapShot.data!.browserName}'.replaceAll('BrowserName.', '')),
        ],
      );
    } else {
      return const CircularProgressIndicator();
    }
  },
),

main.dartの全コードも以下に載せておくので参考にしてください。

import 'dart:io';

import 'package:device_info_plus/device_info_plus.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'device_info_plus'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  // DeviceInfoPluginをインスタンス化
  DeviceInfoPlugin deviceInfo = DeviceInfoPlugin();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: FutureBuilder<WebBrowserInfo>(
          future: Future<WebBrowserInfo>(() async {
            // データ取得
            return (await deviceInfo.webBrowserInfo);
          }),
          builder: (context, snapShot) {
            if (snapShot.connectionState == ConnectionState.done) {
              return Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text('ブラウザ名: ${snapShot.data!.browserName}'.replaceAll('BrowserName.', '')),
                ],
              );
            } else {
              return const CircularProgressIndicator();
            }
          },
        ),
      ),
    );
  }
}


Flutterラボ
hatchoutschool
FlutterとNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/ 広告のECサイトを開発(https://ec-ad.tech/)