How to Build a Flutter App to Display Device Details?

Here we are going to build an android application using flutter that displays device information on which it is running. To display information about the device we are going to use a package called device_info_plus.

Create Flutter Project:

Now remove all the existing code and remove the test folder

Create a basic app screen:

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(DeviceInfo());
}

class DeviceInfo extends StatefulWidget {
  const DeviceInfo({Key? key}) : super(key: key);

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

class _DeviceInfoState extends State<DeviceInfo> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
            title: Text('GeeksforGeeks'),
            backgroundColor: Colors.green,
        ),
        body: Container(),
      ),
    );
  }
}

Add device_info_plus package to pubspec.yaml file.

XML

name: deviceinfo
description: A Flutter app that displays device information

# The following line prevents the package from being accidentally published to
# pub.dev using `pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  device_info_plus: ^2.1.0


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter

# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

Instantiate DeviceInfoPlugin and create a Future of AndroidDeviceInfo in the DeviceInfoState class. 

Dart

class _DeviceInfoState extends State<DeviceInfo> {
  DeviceInfoPlugin _deviceInfoPlugin = DeviceInfoPlugin();
  late Future<AndroidDeviceInfo> _androidDeviceInfo;

}

To retrieve android device info we need to get the future and that we’ll do in the initState method. This is a overridden method you can get the template by pressing ctrl + O in android studio.

Dart

@override
 void initState() {
   _androidDeviceInfo = _deviceInfoPlugin.androidInfo;
   super.initState();
 }

To build widget after future resolve we’ll use the FutureBuilder widget inside the build method

Dart

@override
Widget build(BuildContext context) {
  return MaterialApp(
      home: Scaffold(
    appBar: AppBar(
      title: Text('GeeksforGeeks'),
      backgroundColor: Colors.green,
    ),
    body: FutureBuilder(
      future: _androidDeviceInfo,
      builder: (context, snapshot) {

        // When future solves build text widget until then show indefinite progress
        if (snapshot.connectionState == ConnectionState.done) {

          // Retrieve AndroidDeviceInfo from future
          AndroidDeviceInfo _info = snapshot.data as AndroidDeviceInfo;
          return Center(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(_info.manufacturer.toString()),
                Text(_info.model.toString()),
                Text("Android API Version ${_info.version.sdkInt}"),
              ],
            ),
          );
        } else {
          return Center(child: CircularProgressIndicator());
        }
      },
    ),
  ));
}

In the end, your main.dart will look like this:

Dart

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

void main() {
  runApp(DeviceInfo());
}

class DeviceInfo extends StatefulWidget {
  const DeviceInfo({Key? key}) : super(key: key);

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

class _DeviceInfoState extends State<DeviceInfo> {
  DeviceInfoPlugin _deviceInfoPlugin = DeviceInfoPlugin();
  late Future<AndroidDeviceInfo> _androidDeviceInfo;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text('GeeksforGeeks'),
        backgroundColor: Colors.green,
      ),
      body: FutureBuilder(
        future: _androidDeviceInfo,
        builder: (context, snapshot) {

          // When future solves build text widget until
          // then show indefinite progress
          if (snapshot.connectionState == ConnectionState.done) {

            // Retrieve AndroidDeviceInfo from future
            AndroidDeviceInfo _info = snapshot.data as AndroidDeviceInfo;
            return Center(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(_info.manufacturer.toString()),
                  Text(_info.model.toString()),
                  Text("Android API Version ${_info.version.sdkInt}"),
                ],
              ),
            );
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
    ));
  }

  @override
  void initState() {
    _androidDeviceInfo = _deviceInfoPlugin.androidInfo;
    super.initState();
  }
}

Now press on the run button of android studio to install the app