As technology advances, the push for mobile development has advanced alongside it, with annual mobile app downloads projected to hit 258 billion in 2022, a 45% increase from 178 billion downloads in 2017.
To properly facilitate this continual growth, it’s critical for technology decision-makers to be aware of and versed in the solutions available to them. While popular frameworks such as React Native have seen a sharp increase in usage, I had the pleasure of diving into Flutter, an open-source UI toolkit created by Google and written in Dart. Flutter was released in 2017. As of May 2020, Flutter has 91.k stars on Github, so it’s definitely one to watch.
As a developer, I’m a subscriber to the VSCode Church of IDEs, so I’ll detail a quick rundown of how to get Flutter up and running on your machine. I personally am using OSX, so I’ll use XCode to simulate my native app device. I’ll assume you have VSCode and Git installed already, so let’s get right into it.
First, you will need to install the Flutter SDK. You can either download the zipped file from the official Flutter docs or pull the code using git directly from your command line.
To run it from your CLI, find your desired file location, then run
git clone https://github.com/flutter/flutter.git -b stable
Next, in the same terminal window, you’ll want to add the flutter tool to your path. Run:
export PATH=”$PATH:$(pwd)/flutter/bin”
This will set your PATH variable for the currently opened terminal window only. Adding a permanent path to your CLI has machine-specific steps. You don’t need to do this for the sake of this article, but it is recommended for continued Flutter development.
Once flutter is on your PATH, you will need to run flutter doctor in the same terminal window, and wait for everything to finish. Flutter doctor checks to see which tools are available to the command line. If there are any dependencies missing, flutter doctor will perform the installation. If this is your first time working with Flutter, flutter doctor will look something like this:
We’ll now head over to VSCode. Search for ’Flutter’ in your extensions and install the ’Flutter‘ extension. It will download both the ’Flutter‘ and ’Dart‘ extension, which are both needed to run Flutter apps.
Once the extension is installed, we can create a new Flutter project. Open the command palette (Ctrl + Shift + P) and search ’Flutter‘ to see some commands have been added, Such as Flutter: Run Flutter Doctor and Flutter: New Project. Let’s try running Flutter: New Project. Provide a project name and select a location for the repo to be created.
Note: At this point, you will more than likely receive an error in your editor view that might look like this:
Choose Locate SDK and navigate to the folder in which you installed the Flutter SDK (step 1.a). Select that file location and then restart your VSCode.
After you’ve run “Flutter: New Project,” it might take a moment before all the folders are created. When everything is completed, you’ll have created the basic Flutter template.
One last little step before you’re ready to launch this in a simulator: We need to create the launch.json file. The launch.json file is used to configure the debugger in VSCode and the Flutter app is by default run in Debug mode. This allows features like hot reload and hot restart. Click on the Debug icon on the far left toolbar and you’ll see a message as follows.
Select create a launch.json file and open the output terminal to watch the status.
Next, we need to instruct VSCode how to launch the application. On the bottom toolbar, click on “No Device” to select a device to launch into. I personally am using an iOS simulator from macOS’ XCode.
Now that we’ve connected our simulator device to our VSCode, let’s run Flutter: Run Flutter Doctor to make sure we have no errors within our Flutter setup. Checking the terminal output tab, you should see some positive checks, with the last saying “Connected Device” and then stating what device you are using as a simulator.
With confirmation that everything is connected, lets finally run the Flutter app. Return to the Debug tab, and click the green Start Debugging button to deploy this app to the simulator.
After a moment of building, your simulator should open with the template Flutter application.
And with that, you are now ready to run Flutter in VSCode and develop your first app. Any time you need to create a new project, you can run “Flutter: New Project” straight from VSCode and, when you’d like to run a project, click on the Debug tab and press the Start Debugging button.
I hope this article serves you well as you continue your venture into the native application frontier.
If you or your organization would like to discuss mobile development further, we at projekt202 are available to help. Our team of developers, designers, and researchers are ready to help make your project a success.
