Internet speed test with Flutter
Hello welcome to my YouTube channel and this tutorial on building an internet speed test application using flutter my name is Ali and in this video I'll guide you a step-by-step through the process of creating a slick and functional internet test application from scratch I hope you enjoy the video let's get started First I create a project called speed test and specify the basic settings of the project such as project location description and [Music] organization and after creating the project I run it and then I create two folders for screens and widgets and remove the extra codes[Music] Now I install the required depend es and run the pub get command [Music] then I create the main page of the [Music] project and inside the speed test screen file I create a stateful which that Returns the scaffold and I create an app bar with speed test [Music] [Music] text and now I set the settings related to material app and pass the speed test screen to home parameter in material app and change the brightness to dark [Music] all right let's start and write the codes for internet speed test first I create an instance of speed test package and Define the required variables that I will use them later [Music] two double variables for download and upload rate [Music] and two double variables for final download and upload rate [Music] and some bool variables for test states [Music] and a string variable for the IP address and the string variable for the unit [Music] and then I implement the start method [Music] for this method I use the start testing method in speed test package and implement the related callback methods and explain them at the same time [Music] the uncomplete function is called when the speed test completed successfully [Music] the on progress function is called during the testing process and providing real-time updates on the progress of the test [Music] the on default server selection in progress function is triggered when the package is selecting a default server for testing and on default server selection done is triggered when server selection is [Music] done and the onError function is invoked if there is an error during the testing process and the onCancel is triggered when a request to cancel the ongoing test is made [Music] for when the test is completed set a state run test is complete equals [Music] true final download rate [Music] equals download. transfer rate and final upload rate equals upload. transfer [Music] rate and for when the test is on progress set a state [Music] if data. test type equals equals Test type. [Music] download or else for test type. upload download rate equals data. transfer rate [Music] and in else upload rate equals
data. transfer [Music] rate and for when on default server selection is in progress [Music] set a state is server selection and progress equals [Music] true and on default server selection done set a state is server selection in progress equals false [Music] IP address equals client do [Music] IP and then on error reset all data and and cancel reset all data to after finishing I implement the method to reset all the values void reset set a [Music] state download rate equal 0 and final download rate equal 0 upload rate equals z and also final upload rate equals zero IP address equals none and one test status equals false very well [Music] now let's implement the user interface of the project the first widget I create is a round button to start the internet speed [Music] test so I go to widgets folder and implement it [Music] for [Music] [Music] [Music] [Music] after implementing the appearance of the button I also create it section [Music] now I import the widget and call the start test method in it section [Music] after creating the start button I go to the widgets folder again and implement the loading widget [Music] this widget is used to wait for Server selection time and usually this speed test package used fast.com by Netflix as a default server for testing [Music] now I'm going to implement the main body of the project that displays the internet speed which consists of a page view that contains download and upload speed gauge and I use page controller to switch between upload and download gauge [Music] now I created title for download gauge and also create a general widget for spacing between other widgets [Music] [Music] as I said I use the gauge to display the download and upload speed so let's implement the speed display [Music] gauge for this I create a new widget and write its required parameters [Music] and now I implement the widget [Music] itself I make a box and I use the SF flutter gauge package to display this speed [Music] the SF flutter gauge package include the data virtualization wigets Linear gauge and Radial gauge to create modern interactive and animated gauges [Music] [Music] [Music] [Music] [Music] after creating the gauge widget I call it and pass the required values to it [Music] [Music] [Music] and then I use the wigets I made to show the upload speed and I choose the purple color for the [Music] upload very well now I run the project that you can see the progress of the project [Music] [Music] well now I create a widget to display the result of the internet speed test and it will show the final upload and download this speed [Music] [Music] this widget consists of a text for the title of the download and upload and as well as the appropriate icon and another text to display the finalist pit [Music] for [Music] [Music] [Music] [Music] [Music] [Music] after the implementation of the result widget is finished I import the widget and pass the reir parameters to it [Music] [Music] [Music] and I call the run test widget again so that after finishing the test and viewing the result the user can perform the speed test again if needed [Music] very well! during the speed test the download gauge should be displayed when the download speed test is performed and then the upload gauge should be shown during the upload speed test so I use page controller to move between pages [Music] and finally I'm going to implement the show IP address widget and display the users Network IP [Music] [Music] [Music] [Music] and finally I run the project so that you can see the result thank you for watching and if this video was useful for you please subscribe to my channel and like the video I will see you in the next video [Music]
2024-12-24 07:56
