DEV Community

Cover image for A month of Flutter: continuous linting
Abraham Williams
Abraham Williams

Posted on • Originally published at bendyworks.com

A month of Flutter: continuous linting

Originally published on bendyworks.com.

Yesterday I configured CI. Today, in step with @tpolansk's advice, lets set up linting. For this project we'll start with the analysis options that the Flutter team uses. To download the file I'll run the following command within the root directory of the repository.

$ wget https://raw.githubusercontent.com/flutter/flutter/master/analysis_options.yaml
~~~{% endraw %}

The {% raw %}`analysis_options.yaml`{% endraw %} file tells the {% raw %}`dartanalyzer`{% endraw %} tool the preferences to use when analyzing the codebase. You can now run {% raw %}`flutter analyze`{% endraw %} to see everything in the app that can be improved. Your editor should use this file to show you inline feedback as well.{% raw %}

~~~bash
$ flutter analyze
Analyzing app...

   info • Prefer declare const constructors on `@immutable` classes • lib/main.dart:29:3 • prefer_const_constructors_in_immutables
   info • Prefer const with constant constructors • lib/main.dart:94:13 • prefer_const_constructors
   info • Prefer const with constant constructors • lib/main.dart:107:16 • prefer_const_constructors

3 issues found. (ran in 0.8s)
~~~{% endraw %}

Linting is one of the tooling options you want to get into a project as soon as possible so you don't run into issues like @hillelcoren did.

> A bit depressing seeing the number of warnings go from 2 to 2,000 but better now than later...
>
> [@hillelcoren](https://twitter.com/hillelcoren/status/1013337198295441409)

But having linting set up in your app doesn't mean developers will run or follow the recommended patterns. So let's enforce it with the [CI we set up yesterday](https://bendyworks.com/blog/a-month-of-flutter-configuring-continuous-integration).

Add the following to {% raw %}`.travis.yml`:

~~~yaml
matrix:
  include:
  - name: Test
    env: COMMAND=test
  - name: Analyze
    env: COMMAND=analyze
~~~

And modify the `script` line to use `$COMMAND` instead of `test` like this:

~~~yaml
script:
  - ./flutter/bin/flutter $COMMAND
~~~

The [`matrix` option](https://docs.travis-ci.com/user/customizing-the-build#build-matrix) on Travis CI is very powerful. It lets you set up multiple test runs that will perform in parallel.

Now we need to make the suggested improvements. In this case it's as simple as adding a couple of {% raw %}`const`{% endraw %}s where the analyzer says. Using {% raw %}`const`{% endraw %} lets the Dart compiler [better optimize your code](https://stackoverflow.com/a/47996512/26406) and improve performance.

Come back tomorrow when I'll be doing talking about Flutter's [big announcement](https://developers.googleblog.com/2018/12/flutter-10-googles-portable-ui-toolkit.html).

## Code changes

- [#7 Run flutter analyze on CI](https://github.com/abraham/birb/pull/7)
Enter fullscreen mode Exit fullscreen mode

Top comments (3)

Collapse
 
tiguchi profile image
Thomas Werner

I'm checking back here regularly and a couple questions crossed my mind. It's not really 100% on topic here (linting), but it's at least to do with Flutter.

Do you also have experience with React Native development?

How do they compare in your opinion, especially in terms of stability, project setup and build reliability? I dabbled a bit in React Native and I found it a bit shaky. A freshly created project would for example not build or start on an emulator without some corrections (in my case it was a faulty NPM dev dependency).

I saw that Flutter has a "doctor" tool. It looks like there's already a feature built in for fixing issues like that. Does it work well? Any similar setup and build hurdles to overcome in Flutter land?

How easy / difficult is platform-specific customization?

Are there iOS and Android-specific sub-projects that can be opened with XCode or Android Studio in order to add platform specific code? How is that bridged into Flutter application code?

Is it possible to use custom UI per platform?

I.e. material design for Android, and iOS UI for iPhone?

Is it advisable to use the same UI for both platforms?

Or does it break with user expectations? Is look and feel actually good enough to feel native?

Is the Apple App Store OK with Flutter apps?

AFAIK Flutter renders its own UI on an OpenGL ES accelerated render surface. That's great for consistency and accelerating dev time, but does Apple actually reject Flutter apps if they don't comply with Apple UI standards?

Collapse
 
abraham profile image
Abraham Williams

There is a lot to unpack but I'll answer what I can.

React Native

I don't have any experience with RN so I can't speak to how it compares with Flutter. There are a fair amount of blog posts floating around though that attempt to do comparisons.

Platform customization

I know you can do platform specific integrations but I've not attempted them. Here are the docs

Platform UI

Yes you can have platform specific UI. Here is a codelab that has iOS and Android customize UI.

User preference of platform UI

This is a often debated topic. I see most brands moving to having their branded UI everywhere, while I see power users complaining when apps are not "platform" enough for them. I recommend siding more on building a great UI and less on being exactly platform perfect.

App Store

There are a number of Flutter apps published to the App Store so it is certainly doable to make Apple compliant apps.

Collapse
 
sduduzog profile image
Sdu

From an android platform perspective, I'd say its pretty easy and straight forward. I'm currently attempting to create a flutter pluggin that works with ndk. The limitations that I noticed are that of the platform you're developing for