Flutter with Dart— Is it worth it?

Flutter with Dart— Is it worth it?Tomas Petras RupšysBlockedUnblockFollowFollowingMay 28I’ve always been fascinated by frameworks that help to “hit two birds with one stone”.

It was amazing when Facebook announced about React Native, a platform where you can have 2-in-1, i.

e.

code a Node-based app and get iOS and Android mobile apps.

The community seemed to embrace the technology: Instagram, Facebook, Pinterest, Skype, Tesla, Uber use it one way or another in their mobile apps.

In 2018 you may have heard about Flutter — “Google’s portable UI toolkit for building beautiful, natively-compiled applications for mobile, web, and desktop from a single codebase.

”These there my initial thoughts BEFORE I tried Dart and Flutter:Oh here’s yet another and framework only top companies will useDart sounds like a very different language I won’t even bother learningThis will require at least 10 years before someone will start using itIt’s hard for me to find native developers, how am I supposed to hire Dart developers?Native-specific customisation should be hellBut then I’ve tried it:Setting upThat was easy.

Just installed dart via their official link in a few minutes, installing flutter command line tools using the guide was also a piece of cake.

Guys in Google have obviously spent some time making really verbose and easy to use cmd tool.

For example, there is a a command:$ flutter doctorThat immediately told me that I am missing an IntelliJ plugin, I should upgrade my iOS and Android toolchains for mobile development AND immediately suggested commands I should run to solve these issues.

Conclusion: 10/10.

I don’t think any other framework / language suggested tooling which works THAT fast and is SO easy to understand.

Creating a Hello worldDeveloper community became used to brilliant “Hello world” code.

But a nice code not always means that it runs fast and has a nice hot reloading.

Flutter guys nailed this too:$ flutter create hello_world$ cd hello_world$ flutter runCombined, these three took ~3 minutes until .

apk was started on android emulator.

Do you remember the last time you started a React Native app?Hot reloadingThis is probably the main selling point of Dart and Flutter.

It’s an amazing experience.

To hot reload changes while running, press “r”.

To hot restart (and rebuild state), press “R”.

Is what they offer in the terminal.

Whenever you do UI changes, it takes longer to alt-tab than for hot reload to happen.

The default-generated hello-world app has a lot of comments there with explanations what does what.

It’s highly development friendly.

The only problem I ran into, was that after some more serious compilation issues, the hot reload did not come back to normal for me, so I had to manually click R in the terminal.

Conclusion: 9/10.

Blazing fast and almost fluent.

UI abstraction — WidgetIf you are familiar with React or Vue.

js or any other component-based fronted UI library, a notion of Widget shouldn’t be new to you.

Widget can be stateful (StatefulWidget) or stateless (StatelessWidget), Flutter offers these abstractions by design.

Also, you don’t need to pick your “redux”, Flutter already provides you a State class, that you have to extend and manipulate.

But if you want, there are some crazy examples how you could use StatelessWidget from Flutter and a Redux store here.

Generally, the feeling is similar to if you were developing react+redux+styled components.

UI abstraction — ScaffoldSo this is the first place where the learning steep hits a bit harder.

In React native if you knew css, you were fine.

Here, Flutter’s Scaffold is something really new and far from React Native / iOS / Android UI building.

If you are familiar with React, imagine you got a UI library where you can compose different components into one, seamless UI.

That’s similar — you are building a graph of UI elements, e.

g.

the initially generated code for the body looks like:body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.

center, children: <Widget>[ Text( ‘You have pushed the button this many times:’, ), Text( ‘$_counter’, style: Theme.

of(context).

textTheme.

display1, ), ],),So basically you have to learn a library to know how do build UI components.

It may mean once you learn it you’ll be able to bake UI quickly.

But you’ll have to learn it from scratch.

HTTP integrationIt’s hard to find an app that doesn’t do http calls.

How it would happen on a flutter+dart app?Dart uses an abstraction called Future (which is very common in JVM world).

If you come from JS world — imagine it’s a Promise.

import 'package:http/http.

dart' as http;import 'dart:convert';Future<String> getFirstIssueTitle() async { final url = 'https://api.

github.

com/repos/flutter/flutter/issues'; final response = await http.

get(url); if (response.

statusCode == 200) { final issues = jsonDecode(response.

body); return issues[0].

title; } return '';}So to get the first title you make a call to getFirstIssueTitle().

Cool, but how to connect this to UI now?.Flutter offers an abstraction called FutureBuilder.

FutureBuilder is a Widget:class FutureBuilder<T> extends StatefulWidget { … }Which requires a Future to load it.

This is how my Widget with a title of the first GitHub issue looks.

FutureBuilder<String>( future: gettingFirstIssueTitle, builder: (context, snapshot) { if (snapshot.

hasData) { return Text(snapshot.

data); } if (snapshot.

hasError) { return Text(“${snapshot.

error}”); } return CircularProgressIndicator(); // Spinner },);You should place this inside your Scaffold.

The magic part is how to pass the gettingFirstIssueTitle, which is a Future.

More on that — here.

Business logic layerHaving seen the http integration, we can up with a conclusion that all we need is a passed Future.

Since Dart is object oriented, you may probably want to have classical things like Service layer, Dao (Data access object) layer etc.

, where contract is a Future.

Having such things usually require dependency injection.

Yes, Google has what to offer — package:inject, but it is still in early stages and has no proper documentation at the time of writing.

TestsYou may say that Flutter is for building prototypes and that means tests are useless.

But what if you built an MVP and need to carry on with what you have?.Then it’s time to add some tests.

So adding tests are easy: just add a file with a prefix *_test.

dart into test folder.

Then just run flutter test and all tests will run.

Each file should have a main (I wish it wasn’t necessary):import ‘package:test/test.

dart’;void main() { test(‘my test’, () { expect(0, 1); });}So this is a basic example, but when it comes to more complex scenarios, like instrumental tests, unit tests — again, guys in Google did a great job adding libraries, like Mockito for Dart, or a driver for Flutter apps that helps you manipulate the UI in tests.

SummaryI loved the development experience: <500ms hot reloading, easy-to-learn Dart language, React+redux kind of feeling, a lot of beautiful documentation on both Dart and Flutter websites.

Also, plugins don’t need the “linking part” what really irritates in React Native, so you can easily use things like Camera or native photo gallery.

BUT I would be afraid to start a new project with devs/UX/product people in the team:Hiring.

There are literally no Dart devs in the market (except hobbyists)Scaffold.

This is a concept that limits the team’s possibilities of how UI may work/look like.

I would add “Flutter for designers” and/or “Flutter for product managers” sections in the Flutter.

dev website, so they can know what are the possibilities and limitations.

Community code.

If you search for keyword http in npmjs.

com, you get~45k results, whereas in pub.

dev — ~700.

The amount of stuff you can reuse is still quite small.

.

. More details

Leave a Reply