Flutter 如何獲取裝置的唯一碼

會煮咖啡的貓發表於2021-05-19

老鐵記得 轉發 ,貓哥會呈現更多 Flutter 好文~~~~

微信 flutter 研修群 ducafecat

原文

medium.com/flutterdevs…

貓哥說

獲取裝置 id 是每一個 APP 都應該去做的,比如你訪問唯一使用者統計就需要。

前言

程式碼

github.com/flutter-dev…

參考

正文

一般來說,製作一個移動應用程式是一個極其令人難以置信和測試的任務。有許多可用的框架,這些框架為建立移動應用程式提供了極好的亮點。為了建立移動應用,Android 提供了一個基於 Java 和 Kotlin 語言的本地結構框架,而 iOS 提供了一個依賴於 Objective-C/Swift 語言的系統。

隨後,我們需要兩種獨特的語言和結構來為這兩種作業系統建立應用程式。今天,為了打破這種錯綜複雜的結構,已經提出了幾個框架來幫助桌面應用程式同時使用這兩種作業系統。這類框架被稱為 cross-platform 跨平臺開發工具。

在這個部落格,我們將探索如何獲得獨特的裝置細節.我們將實現一個演示程式,並獲得獨特的裝置細節,為安卓和 IOS 使用裝置資訊包在您的 Flutter 應用程式。

簡介

Flutter 中得到當前裝置資料的應用。如何利用 device_info plugin 為 Android 和 IOS 提供獨特的裝置細節。在這一點上,當我們談論一個獨特的裝置細節在本地,我們有 Settings.Secure.ANDROID_ID 獲得一個獨一無二的裝置細節。

pub.dev/packages/de…

演示

這個演示視訊顯示瞭如何獲得一個獨特的裝置細節的 Flutter 。它顯示瞭如何裝置細節將工作使用裝置資訊包在您的 Flutter 應用程式。它會顯示使用者何時點選觸發按鈕,螢幕上顯示的唯一裝置 Andriod/Ios 資訊,如裝置名稱、版本、識別符號等。它會顯示在你的裝置上。

實施

  • 第一步: 新增依賴項

將依賴項新增到 pubspec ー yaml 檔案。

dependencies:
  flutter:
    sdk: flutter
  device_info: ^0.4.0+4
複製程式碼
  • 第二步: 匯入
import 'package:device_info/device_info.dart';
複製程式碼
  • 第三步: 在應用程式的根目錄中執行 flutter 軟體包。

程式碼實現

如何實現 dart 檔案中的程式碼:

在 lib 資料夾中建立一個新的 dart 檔案,名為 device_detail_demo.dart

首先,我們將建立一個使用者介面。在主體部分,我們將新增一箇中心小部件。在內部,我們將新增一個列小部件。在這個小部件中,我們將新增一個 mainAxisAlignmnet 為中心。它是 children's property ,新增 RaisedButton()。在這個按鈕中,我們將新增填充、顏色和 OnPressed 功能。它的子屬性,我們將文字“Device Details”。

Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      RaisedButton(
        padding: EdgeInsets.all(14),
        color: Colors.cyan[50],
        onPressed: (){},
        child: Text("Device Details",
          style: TextStyle(color: Colors.black),),
      ),
    ],
  ),
),
複製程式碼

當我們執行應用程式時,我們應該得到螢幕的輸出,就像下面的螢幕截圖一樣。

我們將建立三個字串 deviceName、 deviceVersion 和 identifier。

String deviceName ='';
String deviceVersion ='';
String identifier= '';
複製程式碼

現在,我們將新增程式的主函式。我們將新增 future _deviceDetails() 在內部,我們將新增一個最終的 deviceinfoplgin 等於新的 deviceinfoplgin()。我們將新增 try {} 方法,併為平臺匯入 dart:io。

import 'dart:io';
複製程式碼

如果平臺是 Andriod,那麼構建就等於 deviceInfoPlugin 對於 Andriod 資訊。新增 setState ()方法。在這個方法中,我們將所有的字串加起來等於構建。如果平臺是 Ios,那麼構建版本就等於 Ios 資訊的 deviceInfoPlugin。新增 setState ()方法。在這個方法中,我們將所有的字串加起來等於構建。

Future<void>_deviceDetails() async{
  final DeviceInfoPlugin deviceInfoPlugin = new DeviceInfoPlugin();
  try {
    if (Platform.isAndroid) {
      var build = await deviceInfoPlugin.androidInfo;
      setState(() {
        deviceName = build.model;
        deviceVersion = build.version.toString();
        identifier = build.androidId;
      });
      //UUID for Android
    } else if (Platform.isIOS) {
      var data = await deviceInfoPlugin.iosInfo;
      setState(() {
        deviceName = data.name;
        deviceVersion = data.systemVersion;
        identifier = data.identifierForVendor;
      });//UUID for iOS
    }
  } on PlatformException {
    print('Failed to get platform version');
  }

}
複製程式碼

我們將為 PlatformException 匯入服務

import 'package:flutter/services.dart';
複製程式碼

現在,我們將在引發的按鈕上新增按下的函子上的 _deviceDetails()

onPressed: (){
  _deviceDetails();
},
複製程式碼

我們將新增裝置版本、名稱和識別符號不是空的,然後顯示 Column 小部件。在這個小部件中,我們將新增所有三個文字,如裝置名稱、裝置版本和裝置識別符號將顯示在您的裝置上。否則,顯示一個空容器。

deviceVersion.isNotEmpty && deviceName.isNotEmpty
    && identifier.isNotEmpty?
Column(
  children: [
    SizedBox(height: 30,),
    Text("Device Name:- "+deviceName,style: TextStyle
      (color: Colors.red,
        fontWeight: FontWeight.bold)),
    SizedBox(height: 30,),
    Text("Device Version:- "+deviceVersion,style: TextStyle
      (color: Colors.red,
        fontWeight: FontWeight.bold)),
    SizedBox(height: 30,),
    Text("Device Identifier:- "+identifier,style: TextStyle
      (color: Colors.red,
        fontWeight: FontWeight.bold)),
    SizedBox(height: 30,),
  ],
): Container(),
複製程式碼

當使用者點選按鈕,然後,所有三個資料將顯示在您的裝置上。當我們執行應用程式時,我們應該得到螢幕的輸出,就像下面的螢幕截圖一樣。

程式碼檔案

import 'dart:io';
import 'package:device_info/device_info.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class DeviceDetailDemo extends StatefulWidget {


  @override
  _DeviceDetailDemoState createState() => _DeviceDetailDemoState();
}

class _DeviceDetailDemoState extends State<DeviceDetailDemo> {

  String deviceName ='';
  String deviceVersion ='';
  String identifier= '';

  Future<void>_deviceDetails() async{
    final DeviceInfoPlugin deviceInfoPlugin = new DeviceInfoPlugin();
    try {
      if (Platform.isAndroid) {
        var build = await deviceInfoPlugin.androidInfo;
        setState(() {
          deviceName = build.model;
          deviceVersion = build.version.toString();
          identifier = build.androidId;
        });
        //UUID for Android
      } else if (Platform.isIOS) {
        var data = await deviceInfoPlugin.iosInfo;
        setState(() {
          deviceName = data.name;
          deviceVersion = data.systemVersion;
          identifier = data.identifierForVendor;
        });//UUID for iOS
      }
    } on PlatformException {
      print('Failed to get platform version');
    }

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.redAccent[100],
        title: Text("Flutter Device Details Demo"),
        automaticallyImplyLeading: false,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            RaisedButton(
              padding: EdgeInsets.all(14),
              color: Colors.cyan[50],
              onPressed: (){
                _deviceDetails();
              },
              child: Text("Device Details",
                style: TextStyle(color: Colors.black),),
            ),
            deviceVersion.isNotEmpty && deviceName.isNotEmpty
                && identifier.isNotEmpty?
            Column(
              children: [
                SizedBox(height: 30,),
                Text("Device Name:- "+deviceName,style: TextStyle
                  (color: Colors.red,
                    fontWeight: FontWeight.bold)),
                SizedBox(height: 30,),
                Text("Device Version:- "+deviceVersion,style:    TextStyle
                  (color: Colors.red,
                    fontWeight: FontWeight.bold)),
                SizedBox(height: 30,),
                Text("Device Identifier:- "+identifier,style: TextStyle
                  (color: Colors.red,
                    fontWeight: FontWeight.bold)),
                SizedBox(height: 30,),
              ],
            ): Container(),
          ],
        ),
      ),
    );
  }
}
複製程式碼

總結

在本文中,我解釋瞭如何獲得獨特的裝置細節 Flutter 的基本結構,您可以根據自己的選擇修改這個程式碼。這是一個小的介紹,以獲得獨特的裝置細節的使用者互動從我這邊,它的工作使用 Flutter。


© 貓哥

ducafecat.tech/

github.com/ducafecat

往期

開源

GetX Quick Start

github.com/ducafecat/g…

新聞客戶端

github.com/ducafecat/f…

strapi 手冊譯文

getstrapi.cn

微信討論群 ducafecat

系列集合

譯文

ducafecat.tech/categories/…

Dart 程式語言基礎

space.bilibili.com/404904528/c…

Flutter 零基礎入門

space.bilibili.com/404904528/c…

Flutter 實戰從零開始 新聞客戶端

space.bilibili.com/404904528/c…

Flutter 元件開發

space.bilibili.com/404904528/c…

Flutter Bloc

space.bilibili.com/404904528/c…

Flutter Getx4

space.bilibili.com/404904528/c…

Docker Yapi

space.bilibili.com/404904528/c…

相關文章