Hot-reloading Our Way to Success

Hello again everyone!

Progress on my Capstone project Ops Normal has been moving along at full-speed and my team and I have been making the most of each of our Sprints. But how have we been able to make such progress? What enables this success?

We’re going to dive in today and talk a bit about developing a Dart/Flutter application, specifically from a Mac OS computer.

Visual Studio Code running a Dart/Flutter app

First lets start with the IDE (Integrated Development Environment)! I have been using Visual Studio code for years now, its one of the best IDEs out there because of it’s flexibility to support most programming languages, as well as it’s simplicity. Anyone who has used Visual Studio Professional as we newbie can attest that simplicity is an important attribute when selecting an IDE!

VS Code integrates directly with the Dart/Flutter language, which allows you to install an extension from VS Code that enables syntax highlighting, quick-fix suggests and more detailed error messages. This is such a valuable tool for programmers new to the Dart/Flutter language because it will show you best practices for the language and how to correct your mistakes!

Outside of the IDE, you will also need a simulator in which to launch the application to. You can either use Xcode simulator for iPhone, or Android Simulator for any Android based device. I personally use the Xcode Developer tools to run the iPhone simulator, and once this is running, VS Code automatically identifies this as the deployment target so all you need to do is run your app and it is automatically launched to your simulated device!

VS Code and Xcode simulator

So, we now have our IDE and our simulated device, we’re officially ready to start working. The BEST thing about building a Dart/Flutter app, (and one of the reasons my team and I have been quickly getting features done), is the hot reload feature.

For anyone who has previously developed an app before, you understand how time consuming it can be to have to completely relaunch your program after every code modification to test functionality. That’s why this hot-reload feature is such a benefit to programmers! After each code change, as soon as the change is saved to the file, flutter will automatically reload your app on the simulator. This is game-changer for fast agile app development, because features can be tested instantly after saving them.

Flutter hot-reload output

While there are countless options to consider when it comes to which technology is a best fit for which projects, my experiences using the above technologies have absolutely saved me time and a few headaches.

Hopefully this overview helps familiarize everyone with these technologies, and maybe it’ll help you in a future project!