How to get wifi details of the user's device in Flutter

Flutter Aug 3, 2023

In this post, we will explore how to retrieve the WiFi details of a user's device in Flutter using the network_info_plus package. We will start by installing the package, covering Android permissions and iOS considerations. Then, we will go through an implementation to access WiFi information and display it in a user-friendly format. By the end, you will have the knowledge to create network-aware Flutter applications.

Installing

To get started, we need to install the network_info_plus package into our project. The installation process is simple. Just execute the following command: flutter pub add network_info_plus.

Once the command is executed, make sure to check your pubspec.yaml file for the added dependencies. You should see the network_info_plus package included in the dependencies section, like this:

dependencies:
  flutter:
    sdk: flutter
  network_info_plus: ^4.0.2

Android

For Android users, it is essential to add two permissions to the AndroidManifest.xml file: ACCESS_FINE_LOCATION and ACCESS_NETWORK_STATE. These permissions are required to retrieve the WiFi Name and BSSID. Here is how you can include them:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

To access the WiFi Name, users need to grant location permissions. This allows the application to retrieve the necessary information. If you want to simplify the permission process check out my related post:

How to handle permissions in Flutter
Managing permissions is an important part of developing mobile applications. It ensures that applications can use necessary device features while also respecting user privacy. In this post, we will explore how to effectively manage permissions in Flutter using the permission_handler package.

iOS

For iOS users, obtaining the WiFi Name and BSSID requires users to accept location permissions. Unfortunately, I do not have an iOS device for testing, so I recommend checking the package's documentation for retrieving these details on iOS devices.

Retrieving the WiFi details

Now that we have installed the necessary package and handled the required permissions, let us move on to the implementation. In the following code snippet, we create a simple Flutter application that allows users to view their WiFi details with just a button click.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WiFi details'),
      ),
      body: Center(
        child: ElevatedButton(
          style: ElevatedButton.styleFrom(minimumSize: Size(160, 40)),
          child: Text('Show WiFi details', style: TextStyle(fontSize: 18)),
          onPressed: () => getWifiDetails(context),
        ),
      ),
    );
  }
}

Future<void> getWifiDetails(BuildContext context) async {
  final NetworkInfo networkInfo = NetworkInfo();
  List<String> labels = [
    'Name:',
    'BSSID:',
    'IP address:',
    'IPv6:',
    'Submask:',
    'Broadcast:',
    'Gateway:',
  ];

  List<String?> details = await Future.wait([
    networkInfo.getWifiName(),
    networkInfo.getWifiBSSID(),
    networkInfo.getWifiIP(),
    networkInfo.getWifiIPv6(),
    networkInfo.getWifiSubmask(),
    networkInfo.getWifiBroadcast(),
    networkInfo.getWifiGatewayIP(),
  ]);

  for (int index = 0; index < labels.length; index++) {
    labels[index] = '${labels[index]} ${details[index] ?? ''}';
  }

  showDialog(
    context: context,
    builder: (context) => AlertDialog(
      title: Text('WiFi Details'),
      content: Text(labels.join('\n'), style: TextStyle(fontSize: 18)),
      actions: [
        ElevatedButton(
          onPressed: () => Navigator.of(context).pop(),
          child: Text('OK', style: TextStyle(fontSize: 20)),
        ),
      ],
    ),
  );
}

In this code snippet, we start with the MyApp widget which returns a MaterialApp widget with our custom HomePage widget set as the home property.

The HomePage widget shows an AppBar widget with the title "WiFi details" and a centered ElevatedButton. When the user taps the button, it triggers the getWifiDetails function with the BuildContext as an argument.

The getWifiDetails function is an asynchronous function that retrieves and displays WiFi information. It uses the NetworkInfo class from the network_info_plus package. Within the function, we create a labels List for the available WiFi properties and create a details variable to store the actual WiFi details retrieved from the device.

To get the WiFi details, we use the Future.wait function, which helps us retrieve all the information together. It is better to use the Future.wait function instead of retrieving each detail individually with await networkInfo.getWifiName. After getting the WiFi details, we go through the labels and add the corresponding information for each detail. If any detail is missing, we leave it empty. This way, we can show all the WiFi information in a user-friendly way in our Flutter application.

Finally, we present a user-friendly AlertDialog using the showDialog method, displaying the WiFi details when the button is clicked.

flutter_showing_wifi_details_when_button_is_clicked

Conclusion

Accessing the WiFi details of a user's device in a Flutter application is made simple with the network_info_plus package. By following the steps outlined in this post, you can efficiently retrieve WiFi information. The package provides a platform-independent approach, making it easier to create network-aware applications. Whether you are building a WiFi manager app or simply adding network awareness to your project, the network_info_plus package simplifies the process.

Tags