The current Flutter Driver tests will be deprecated and it’s recommended to move to the new Integration Tests.

In this post let’s talk about what are the new tests good at and what are they still lacking.

The Positives

+ Same API

The API does not only look but is the same that is used by widget tests — only the deep internals are different.

Thanks to this, on my first try, when trying to run 20 random Widget tests, 15 run out of the box without modifications.

+ Runs on device

With widget tests to verify why some tests are not working you just print with debugDumpApp the…


Photo by Caspar Camille Rubin on Unsplash

TL;DR: Follow those steps if you want to run Flutter as a desktop application on beta or stable channels (and not only on master or dev).

At the time of writing this post, Flutter Desktop is still in Alpha and you are only allowed to enable it on master or dev channel.

In case you are using beta or stable channel, you are out of luck if you want to run your app as a MacOs/Windows/Linux app without the need of switching to more unstable channels. Or are you?

Running Flutter Desktop on any channel

  • Make sure your app compiles for Flutter desktop on master or…


Photo by Nynne Schrøder on Unsplash

TL;DR You can now write fast driver tests with much less amount of code using this package.

A note of warning: if you are in a Flutter project that won’t take more than 3 months, you won’t need an extensive testing approach, therefore you won’t need the approach that I suggest in this post.

But. . .

If you work in a Flutter project that will take a long time, I would strongly advise investing in testing, and that includes:

Flutter Driver Tests

I’ve mentioned that Flutter Driver Tests have its issues:

  • Require iOS/Android device
  • Slower than Widget Tests
  • Dependency Injection is problematic
  • Tests depending on…


Photo by amirali mirhashemian on Unsplash

SliverFillRemaining is fairly simple yet useful — it fills the remaining scrollable space with a widget of your choice.


Photo by amirali mirhashemian on Unsplash

The best way to learn how to write your own Sliver is to know how existing Slivers are made.

I would split Slivers into groups by their complexity:

Easy

Single child Slivers

Medium

Slivers with one child that provide a special effect

Hard

Slivers containing multiple children

To understand Slivers, you need to understand Sliver constraints and geometry.

SliverConstraints & SliverGeometry

Usually, you…


Flutter Animations Cheat Sheet

Since writing Flutter Layout Cheat Sheet article, I intended to create a similar article about Flutter’s animations.
Unfortunately using GIFs or videos is not the greatest way to show the potential of animations. I was not able to teach animations compellingly… until now, thanks to Flutter Web.

If you want to check out Flutter Animations Cheat Sheet written in Flutter, please visit that article.
Let us know how you like it!

Curves

An integral part of animations are Curves. They allow specifying when animation speeds up and when it slows down.

Now at Flutter Animations, you have an easy way to…


Photo by Johan Desaeyere on Unsplash

Creating animations in Flutter is really fun and easy, but there is one bad practice that might make those animations laggy: setState.

Bad Practice: AnimationController and setState

When using AnimationController in a StatefulWidget, you might be tempted to do the following:

void initState() {
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 1),
)
..addListener(() => setState(() {}));
}

To animate a Placeholder from left to right by 100 pixels:

Transform.translate(
offset: Offset(100 * _controller.value, 0),
child: Placeholder(key: Key('animated')),
),

This will animate the Placeholder by it will also rebuild all other widgets in the StatefulWidget:

Column(
children: [
Placeholder(key: Key('1')), //…


Photo by Debby Hudson on Unsplash

TL;DR: Widget Keys can improve the performance of our application in places where you do not get the promised 60 FPS.

An Element is created internally by a Widget. Its main purpose is to know where in the widget tree is the widget that created it.

Elements are expensive to create and if it’s possible, they should be reused. That can be achieved with Keys (ValueKeys and GlobalKeys).

Element’s life cycle

  • Mount — it’s called when the element is added to the tree for the first time
  • Activate — it’s called when activating previously deactivated element
  • Update — updates the RenderObject with new…


TL;DR Flutter provides a reliable and easy way to test custom widgets and painters using snapshot/golden files testing.

The Issue with Testing Custom Painted Widgets

Widget tests are an amazing way to verify if your Widgets are working correctly. Unfortunately, they don’t work so well when you just paint your own widgets with CustomPainter .

Golden Files/Snapshots to the rescue!

Golden files are just snapshots (PNGs) that are created from a widget and compared when testing.

‘nuff said —Show me the Code!

Let’s test the following widget:

Tomek Polański

Passionate mobile developer. One thing I like more than learning new things: sharing them

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store