What I Really Like About Flutter so Far
Tags: flutter, dart, react, mobiledev
Published: 2020-05-18 07:44:50

---
title: What I Really Like About Flutter so Far
published: true
description: Flutter cli, native feeling, everything works, everything you might like in Flutter coming from a React background
tags: Flutter, Dart, React, MobileDev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/4b7qbo776kc93m7s8vwd.png
series: Wrapping my head around Flutter
---

If you didn't read my previous articles, I’m building a **Flutter** app for a children's book[^1]. If you want to check out: [Hector the little dinosaur](https://hector.aureliemercier.com). The cover image is also part of the book and is not related to _Deno_ at all, I think they copied Hector 😂. Last time I did any mobile development before was more than 2 years ago with **React Native**.

My expertise right now is **React** and **TypeScript** and when I started with **Flutter** I was skeptical at first. The syntax may scare you at, it looks quite similar to Java (so I've been
told) and the way you build the UI feels to me how **React** did it a year or so ago before the introduction of hooks 🙀. 

In this article however I'd like to highlight what I really like about Flutter and Dart.

## Everything just works! 🤘
The thing that I like the most, is that it seems that everything just works! It's amazing, I don't have much experience in mobile development but the few times I approached it, it hasn’t been easy. This time, I have to say I'm pleasantly surprised!

## A Super Cli 🔥
As I mentioned already in a previous article, tools are quite nice and probably superior than the ones available for JS/TS.

Once everything is set up, you can run `flutter run` with a device connected (or a simulator open) and the app is up and running. No need to run it with Xcode or Android studio. Basically no need for an _IDE_ at all. You still need to have them installed along with the native SDK but at least while writing code you don't need to open them that often and that's a big 👍for me!

Hot reload is available while running the application in the command line. It felt weird the need to press `R` in the terminal in order to hot reload the app but I got used to it pretty quickly.

Also pressing `P` while running gives a very useful overview of all widgets and how they are positioned on the screen.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4tvyijoq9kbhjqc6sp8t.png)
<figcaption>My current homepage running in the simulator after pressing P in the cli</figcaption>

Debugging is straightforward too.
This is the whole setup needed to run the app in the vscode debugger.

```json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Flutter",
      "request": "launch",
      "type": "dart"
    }
  ]
}
```

There are other useful command, such as `flutter create` to start a new project, `flutter doctor` to help you with the setup and to check that everything is fine for the development. If you want to know more, here is a complete list of useful commands: https://github.com/flutter/flutter/wiki/The-flutter-tool

## VS Code integration 👀
The integration with vscode is amazing. After installing the **Flutter** plugin you will have: error handling, autocomplete and documentation on definitions available in the editor.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n4v7fs73tu3kg9ltfd4u.png)
<figcaption>Example of code hovering over RoundedRectangleBorder</figcaption>
I would say that you have the same experience that you expect working with TypeScript and probably a little more! The compiler feels faster and more accurate.

I can’t entirely compare due to the different scale of projects I'm working on, but **Flutter** (and probably Dart) left me with a very good impression overall.

## Native feeling 🤞
I still need to see how the app behave once I publish it but so far even in debug mode it seems like a Native app. I’m interested to see how it looks, but so far I can't complain.

Also I needed to integrate with the native side 😼 for the audio. I wanted to load audio files from assets and I installed this [plugin](https://pub.dev/packages/assets_audio_player) along with some native libraries. I had some issues with _cocoapods_ installation (iOS dependencies) but after fixing that, everything just worked fine.

Also installing new dependencies can be done from CLI manually or adding a line to the equivalent of the `package.json`, `pubspec.yaml`, which triggers the installation command `flutter pub get` for you in vscode.

## Wrapping it up 💣
I'm very happy with what I've seen so far and I would recommend to just install **Flutter** download the repo https://github.com/dbertella/hector-app and try it out. The syntax might be challenging at first coming from **React** but as soon as you realise that it's actually very similar and you might find out that the _DX_ will be even better.

Don't forget to let me know if you try it and end up liking it!![^2]

[^1]: [Hector the little dinosaur](https://aureliemercier.com/) written and illustrated by [Aurelie Mercier](https://www.instagram.com/aurelie_mercier/). Cover image is also part of the book.
[^2]: As usual thanks to [Peter](https://petervaro.com) for the english corrections here and there ❤️.