How Flutter obtains the unique code of the device

Old iron remember to forward, Brother Mao will present more Flutter good articles~~~~

WeChat flutter training group ducafecat

original

https://medium.com/flutterdevs/how-to-get-unique-device-details-in-flutter-ced2dbe5f8e5

Brother Cat said

Get device id is what every APP should do, for example, you need to access unique user statistics.

Preface

Code

https://github.com/flutter-devs/flutter_device_details_demo

reference

https://pub.dev/packages/device_info

text

Generally speaking, making a mobile application is an extremely incredible and testing task. There are many frameworks available that provide excellent highlights for creating mobile applications. In order to create mobile applications, Android provides a native framework based on Java and Kotlin languages, while iOS provides a system that relies on Objective-C/Swift language.

Later, we needed two unique languages and structures to create applications for these two operating systems. Today, in order to break this intricate structure, several frameworks have been proposed to help desktop applications use these two operating systems at the same time. Such frameworks are called cross-platform cross-platform development tools.

In this blog, we will explore how to get unique device details. We will implement a demo program and get unique device details for Android and IOS using the device information package in your Flutter application.

Introduction

The application in Flutter to get the current device data. How to use device_info plugin to provide unique device details for Android and IOS. At this point, when we talk about a unique device detail locally, we have Settings.Secure.ANDROID_ID get a unique device detail.

https://pub.dev/packages/device_info

Demo

This demo video shows how to get a unique device detail of Flutter. It shows how the device details will work using the device information package in your Flutter app. It will show when the user clicks the trigger button, the unique device Andriod/Ios information displayed on the screen, such as the device name, version, identifier, etc. It will be displayed on your device.

Implement

Step 1: add dependencies

Add dependencies to the pubspec ーyaml file.

dependencies:
  flutter:
    sdk: flutter
  device_info: ^0.4.0+4

Step 2: Import

import 'package:device_info/device_info.dart';

Step 3: Run the flutter package in the root directory of the application.

Code

How to implement the code in the dart file:

Create a new dart file in the lib folder named device_detail_demo.dart .

First, we will create a user interface. In the main part, we will add a central widget. Internally, we will add a column widget. In this widget, we will add a mainAxisAlignmnet as the center. It is children's property, add RaisedButton(). In this button, we will add fill, color, and OnPressed functions. For its sub-attribute, we will text "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),),
      ),
    ],
  ),
),

When we run the application, we should get the output of the screen, just like the screenshot below.

We will create three strings deviceName, deviceVersion and identifier.

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

Now, we will add the main function of the program. We will add future _deviceDetails() internally, and we will add a final deviceinfoplgin equal to the new deviceinfoplgin(). We will add the try {} method and import dart:io for the platform.

import 'dart:io';

If the platform is Andriod, then the build is equivalent to deviceInfoPlugin for Andriod information. Add the setState () method. In this method, we add up all the strings to equal construction. If the platform is Ios, then the build version is equal to the deviceInfoPlugin of the Ios information. Add the setState () method. In this method, we add up all the strings to equal construction.

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

}

We will import the service for PlatformException

import 'package:flutter/services.dart';

_deviceDetails() on the pressed functor to the triggered button

onPressed: (){
  _deviceDetails();
},

We will add that the device version, name, and identifier are not empty, and then display the Column widget. In this widget, we will add all three texts, such as the device name, device version, and device identifier that will be displayed on your device. Otherwise, an empty container is displayed.

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(),

When the user clicks the button, then all three data will be displayed on your device. When we run the application, we should get the output of the screen, just like the screenshot below.

Code file

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(),
          ],
        ),
      ),
    );
  }
}

to sum up

In this article, I explained how to get the basic structure of Flutter with unique device details. You can modify this code according to your choice. This is a small introduction to get user interaction with unique device details from my side, it works using Flutter.

https://ducafecat.tech/

https://github.com/ducafecat