Flutter – Build a Internet Speed Test App

Flutter is a popular framework for building mobile applications. It allows developers to create intuitive and user-friendly apps. In this article, we’ll explore how to build Internet Speed Tracker App using Flutter. A sample video is given below to get an idea about what we are going to do in this article.

Prerequisite

Before we dive into the implementation, make sure Flutter is installed on the system or download it from the official Flutter website. Also, ensure that a code editor is installed, such as Visual Studio Code or Android Studio.

Step-by-Step Implementation

Step 1: Create Project

In Visual Studio Code terminal run below command to create Flutter project:

Dart

flutter create internet_speed_tracker

Step 2: Add libraries

Now we need to add the package into the pubspec.yaml file. From the command line:

Dart

flutter pub add speed_test_dart syncfusion_flutter_gauges

This will add both packages under dependencies section in pubspec.yaml file as shown below:

Step 3: Import libraries

Now, import these packages in main.dart file,

Dart

import 'package:speed_test_dart/classes/classes.dart';
import 'package:speed_test_dart/speed_test_dart.dart';
import 'package:syncfusion_flutter_gauges/gauges.dart';

Step 4: Create basic UI

Dart

import 'package:flutter/material.dart';
import 'package:speed_test_dart/classes/classes.dart';
import 'package:speed_test_dart/speed_test_dart.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  SpeedTestDart tester = SpeedTestDart();
  List<Server> bestServersList = [];

  double downloadRate = 0;
  double uploadRate = 0;
  double _speedValue = 0;

  bool readyToTest = false;
  bool loadingDownload = false;
  bool loadingUpload = false;

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.green),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Gfg Internet Speed Tester'),
        ),
        body: SingleChildScrollView(
          child: Center(
            child: Text("Basic UI")
          ),
        ),
      ),
    );
  }
}

Step 5: Fetch Best Servers

This function finds the best servers from the available server list for accurate speed testing.

Dart

Future<void> setBestServers() async {
    final settings = await tester.getSettings();
    final servers = settings.servers;


    final _bestServersList = await tester.getBestServers(
      servers: servers,
    );

    setState(() {
      bestServersList = _bestServersList;
      readyToTest = true;
    });
  }

Step 6: Test download speed

This function initiates the download speed test using best available server and then updates the UI to display the download speed result once the test is finished.

Dart

Future<void> _testDownloadSpeed() async {
    setState(() {
      loadingDownload = true;
    });
    final _downloadRate = await tester.testDownloadSpeed(servers: bestServersList);
    setState(() {
      downloadRate = _downloadRate;
      _speedValue = downloadRate;
      loadingDownload = false;
    });
  }

Step 7: Test Upload Speed

This function initiates the upload speed test and updates the UI to display the upload speed result once the test is finished.

Dart

Future<void> _testUploadSpeed() async {
    setState(() {
      loadingUpload = true;
    });

    final _uploadRate = await tester.testUploadSpeed(servers: bestServersList);

    setState(() {
      uploadRate = _uploadRate;
      _speedValue = uploadRate;
      loadingUpload = false;
    });
  }

Complete Code

Dart

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:speed_test_dart/classes/classes.dart';
import 'package:speed_test_dart/speed_test_dart.dart';
import 'package:syncfusion_flutter_gauges/gauges.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  SpeedTestDart tester = SpeedTestDart();
  List<Server> bestServersList = [];

  double downloadRate = 0;
  double uploadRate = 0;
  double _speedValue = 0;

  bool readyToTest = false;
  bool loadingDownload = false;
  bool loadingUpload = false;

  Future<void> setBestServers() async {
    final settings = await tester.getSettings();
    final servers = settings.servers;

    final _bestServersList = await tester.getBestServers(
      servers: servers,
    );

    setState(() {
      bestServersList = _bestServersList;
      readyToTest = true;
    });
  }

  Future<void> _testDownloadSpeed() async {
    setState(() {
      loadingDownload = true;
    });
    final _downloadRate =
        await tester.testDownloadSpeed(servers: bestServersList);
    setState(() {
      downloadRate = _downloadRate;
      _speedValue = downloadRate;
      loadingDownload = false;
    });
  }

  Future<void> _testUploadSpeed() async {
    setState(() {
      loadingUpload = true;
    });

    final _uploadRate = await tester.testUploadSpeed(servers: bestServersList);

    setState(() {
      uploadRate = _uploadRate;
      _speedValue = uploadRate;
      loadingUpload = false;
    });
  }

  @override
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      setBestServers();
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.green),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Gfg Internet Speed Tester'),
        ),
        body: SingleChildScrollView(
          child: Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                SfRadialGauge(
                    enableLoadingAnimation: true,
                    animationDuration: 4500,
                    axes: <RadialAxis>[
                      RadialAxis(minimum: 0, maximum: 60, ranges: <GaugeRange>[
                        GaugeRange(
                            startValue: 0, endValue: 20, color: Colors.green),
                        GaugeRange(
                            startValue: 20, endValue: 40, color: Colors.orange),
                        GaugeRange(
                            startValue: 40, endValue: 60, color: Colors.red)
                      ], pointers: <GaugePointer>[
                        NeedlePointer(value: _speedValue)
                      ], annotations: <GaugeAnnotation>[
                        GaugeAnnotation(
                            widget: Container(
                                child: Text(
                                    "${_speedValue.toStringAsFixed(2)} Mb/s",
                                    style: TextStyle(
                                        fontSize: 25,
                                        fontWeight: FontWeight.bold))),
                            angle: 90,
                            positionFactor: 0.6)
                      ])
                    ]),
                const Text(
                  'Test Upload speed:',
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const SizedBox(
                  height: 10,
                ),
                if (loadingUpload)
                  const Column(
                    children: [
                      CircularProgressIndicator(),
                      SizedBox(height: 10),
                      Text('Testing upload speed...'),
                    ],
                  )
                else
                  Text('Upload rate ${uploadRate.toStringAsFixed(2)} Mb/s'),
                const SizedBox(
                  height: 10,
                ),
                ElevatedButton(
                  onPressed: loadingUpload
                      ? null
                      : () async {
                          if (!readyToTest || bestServersList.isEmpty) return;
                          await _testUploadSpeed();
                        },
                  child: const Text('Start'),
                ),
                const SizedBox(
                  height: 50,
                ),
                const Text(
                  'Test Download Speed:',
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const SizedBox(height: 10),
                if (loadingDownload)
                  const Column(
                    children: [
                      CircularProgressIndicator(),
                      SizedBox(
                        height: 10,
                      ),
                      Text('Testing download speed...'),
                    ],
                  )
                else
                  Text(
                      'Download rate  ${downloadRate.toStringAsFixed(2)} Mb/s'),
                const SizedBox(height: 10),
                ElevatedButton(
                  onPressed: loadingDownload
                      ? null
                      : () async {
                          if (!readyToTest || bestServersList.isEmpty) return;
                          await _testDownloadSpeed();
                        },
                  child: const Text('Start'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Output: