Using IDE’s Effectively, Some Tips and Tricks for Flutter/Dart Development

The world keeps advancing in terms of technology and new tools have come in place to help ease the transition. One of the advancements has been the introduction of Flutter which uses the programming language Dart. Flutter can be used to develop Apps for both IOS and Android at the same time from one codebase. Flutter is also not limited to just mobile applications, but a developer can create web applications as well! In this article we will look at some of the shortcuts and extensions that can be found in VS Code which makes development a lot easier and efficient. Here I interview Tyler and Xavier to get some of the tips and tricks on how to efficiently use the language.

Xavier Chanthavong is studying at Ontario Tech University for a Bachelor of Science in Computer Science. He is an avid learner and seeks to share his findings with the world. When he isn’t writing code or coming up with new ideas, you can find him playing guitar, or video games with his friends. We caught up with him to hear more on his experience using Dart/Flutter IDEs. Be sure to check out his LinkedIn and Github!

Tyler Trott, who is also studying at Ontario Tech University is enrolled in the Bachelor of Science in Computer Science with a specialization in Data Science. Tyler was actually part of the first group of interns ever at Atsign and has found himself as a Developer Advocate paving the way for the new wave of interns and developers! If he doesn’t have his nose buried in his computer, you’ll more than likely find him on the tennis court or the ski slopes! Maybe one day, he’ll figure out how to do both at the same time. Be sure to check out his LinkedIn and Github!

I asked the two whether there was an IDE which focuses on development in Dart/Flutter, here are their thoughts:

First, Tyler explains that there is no specific Integrated Development Environment (or IDE) for Dart/Flutter but there are a few general IDE’s that allow for development with the two and the ones that come to mind very quickly are Android Studio, IntelliJ and Visual Studio Code. Xavier adds that those are the ones recommended by Flutter. Hence, the three would be the best options. Tyler adds that Visual Studio Code is his favourite IDE for the long term due to the almost seemingly endless list of programming languages that are supported on the platform, but Xavier mentions that Android Studio is easier to use when you are new to Dart/Flutter due to its more app development based purpose.

We then went on to discuss the basis of Flutter/Dart, just a quick understanding of the two: Xavier goes first to share that Flutter is a very declarative language and is supposed to be treated as reading a function of states, but in some cases what is really powerful is being able to define abstract classes or implement things such object orientated programming into your data model. Because you can have some flexible stuff going on behind the scenes which you don’t have the option to do with something such as React-Native as easily.

Furthermore, he explains that Dart/Flutter is somewhere between C language and Javascript/Typescript which gives a lot of flexibility on how you can treat the language. In addition, the learning curve is low, hence if you know any of these languages, it would be easy to catch up with Dart/Flutter. Tyler adds to the discussion that he comes from a C++ background, and it was easy to get into Dart because of this. Dart can be a ‘boring’ language, meaning it doesn’t have incredibly innovative workings and can tend to feel very complex such as a typical C language, but can be quite hard to get a hang of if you are coming from the aforementioned languages.

Now digging deeper into the Flutter recommended IDE’s:

Android Studio

To begin with Android Studio, it is a wonderful environment to create projects for Android devices whilst simultaneously allowing you to set up an Android Virtual Device (or AVD) to emulate these projects developed for testing purposes. If you are looking for an easy IDE to get started on, this is the one recommended by the @ Company. You’ll find that most of the code, documentation, and tutorials are created with Android Studio at Atsign.

Visual Studio

Visual Studio Code, often referred to as VS Code, when compared to Android Studio is the most customizable. Most of the Atsign developers also use Visual Studio Code. VS Code has many community-driven extensions that allow for ease of life such as Bracket Colorizer, Better Comments and Error LEns, just to name a few.

IntelliJ

IntelliJ is another commonly used IDE, which has a similar feel to Android Studio (as Android Studio is powered by IntelliJ!).

I asked Xavier and Tyler for some of the common Keyboard Shortcuts that can be utilized: In this section, we will focus on the shortcuts used with VS Code, but may also be applicable when using other IDE’s. Time is precious and there are shortcuts that help a lot when coding. You can find the list of default keyboard shortcuts and search for shortcuts by using CTRL+K+S. Below, I’ve listed some of these shortcuts.

Code Assist or Code Completion (Ctrl + Space) While coding, this is one of the important tools, especially for beginners or if you get stuck somewhere and would like to check for options, you can use Ctrl+Space to get a list of curated code completion options.

Quick Fix or the Magic Wand (Ctrl + . => Quick Fix)

For faster development in Flutter, you can use the quick fix tool which is Ctrl+.. This helps in fixing the code with some additional requirements without messing with your code or your widget structure and gives you less headache of manually correcting everything.

Extract Widget (Ctrl + . => Extract Widget)

This can come in handy a lot if you want to split your widgets into smaller widgets. Just click on any widget and then click Ctrl+. and click Extract Widget option and give a name for the new widget and click Enter and that is it.

Stateless Widget to Stateful Widget (Ctrl + . => Convert to Stateful Widget)

Now let us say, you wanted a Stateful widget, but have already set up a Stateless Widget. Simply select the Stateless Widget you wish to convert and click Ctrl + . and then select the option Convert to Stateful Widget and Vs Code will automatically convert this widget for you. Some Debugging Shortcuts: · F5 => Start Debugging · CTRL + F5 => Start Without Debugging · Shift + F5 (macOS: Cmd + Shift + F5) => Restart Debugging or Hot Reload

In conclusion, IDEs can be a useful tool that can save developers a lot of time and enable them to develop applications swiftly and efficiently. The aforementioned tips and tricks by Tyler and Xavier can guide and give a clear introduction to IDEs.