DEV Community: Leonardo Rosa

Testing the widget’s appearance in Flutter

Leonardo Rosa — Mon, 27 Mar 2023 09:15:34 +0000

A good programmer writes tests to find errors and maintain the code. Tests are part of a programmer guy daily, but many programmers ignore an important kind of test, the user interface test. Can you think how hard to ensure the widget's appearance or don’t introduce a bug for a project with thousands of widgets? That’s much hard or maybe impossible to maintain this without tests. However, The Flutter Golden Test provides an easy way to help us ensure that widgets have the correct appearance.

In this article, you'll learn about improving your user interface testing experience with the Alchemist tool and any concepts of the Golden Test.

The maintainable code is a testable code. - Unknown

What’s a Golden Test?

Remembering a little of any concepts of unit tests, the Golden Test provides a way to test the appearance of one single widget using a master image called Golden File which is considered the correct rendering of a widget.

Setting up the Alchemist package

The tool configuration is pretty simple and easy. Let’s start installing the Alchemist package into the project with the command below:

flutter pub add alchemist --dev

Create a file to prepare some configurations before a test is executed called flutter_test_config.dart in the test/ directory after installing the Alchemist tool successfully. In this file, we’ll prepare some configurations like render widget shadows and allow the display of raw text rather than obscure them.

import 'dart:async';

import 'package:alchemist/alchemist.dart';

Future<void> testExecutable(FutureOr<void> Function() testMain) async {
  return prepareGoldenTests(testMain);
}

void prepareGoldenTests(FutureOr<void> Function() testMain) {
  return AlchemistConfig.runWithConfig(
    config: const AlchemistConfig(
      platformGoldensConfig: PlatformGoldensConfig(
        renderShadows: true,
        obscureText: false,
      ),
    ),
    run: testMain,
  );
}

Writing a Golden Test

Let’s write one widget to test before we start to write the Golden Test. We created a widget for this section displaying an NBA game schedule.

import 'package:flutter/material.dart';

class GameItem extends StatelessWidget {
  const GameItem({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(
        vertical: 15,
        horizontal: 20,
      ),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
            child: Row(
              children: [
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: const [
                      Text(
                        'Boston Celtics',
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.w400,
                        ),
                      ),
                      SizedBox(height: 15),
                      Text(
                        'Chicago Bulls',
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.w400,
                        ),
                      ),
                    ],
                  ),
                ),
                const Expanded(
                  child: Center(
                    child: Text(
                      '08:00 PM',
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Create a testGoldens test

With a widget to test the appearance, becomes easy to write a test. Use the goldenTest() function from the alchemist package to define one test, this function allows you to define a widget to test the appearance and the file name to generate the Golden File.

goldenTest(
  'displayed the basketball game',
  fileName: 'baskteball_game_widget',
  constraints: const BoxConstraints(
      maxWidth: 300,
  ),
  builder: () => const GameItem(),
);

Generating the Golden File

It's time to generate the Golden File after writing the test using the goldenTest() function. You can execute the command below to generate the Golden File.

flutter test --update-goldens

You may notice that the test directory has been updated with a new directory called goldens containing the Golden Files generated by the Golden Test, for example:

test/
    goldens/
        ci/
            - baskteball_game_widget.png
        macos/
            - baskteball_game_widget.png

The golden tests generate the macos/ subdirectory because while I'm writing this article I'm using a MacOS operation system. Whether you are using Linux or Windows your golden tests will generate the subdirectory dealing with your operating system with subtle differences between the platforms.

Golden Test in continuous integration workflow

You may notice that the goldens/ directory also has the ci/ subdirectory. The ci/ subdirectory is generated to deal with the subtle differences in rendering between MacOS, Linux, and Windows platforms.

Enabling the continuous integration using —dart-define

To enable continuous integration environment is necessary to disable the tests locally. We can use the IS_CONTINUOUS_INTEGRATION environment declaration to identify when the tests are running on the continuous integration environment and obtain this value using the bool.fromEnvironment.

Go back to the flutter_test_config.dart in the test/ directory and update the prepareGoldenTests to obtain the IS_CONTINUOUS_INTEGRATION declaration and disables the tests locally when this value is true.

void prepareGoldenTests(FutureOr<void> Function() testMain) {
  const isContinuosIntegration = bool.fromEnvironment('IS_CONTINUOUS_INTEGRATION');

  return AlchemistConfig.runWithConfig(
    config: const AlchemistConfig(
      platformGoldensConfig: PlatformGoldensConfig(
        renderShadows: true,
        obscureText: false,
        enabled: isContinuosIntegration
      ),
    ),
    run: testMain,
  );
}

Running tests using the —dart-define

Running the tests using the —-dart-define environment declaration is pretty simple. See the command below to run the tests for a continuous integration environment.

flutter test --dart-define=IS_CONTINUOUS_INTEGRATION=true

Conclusion

The Golden Test is important for maintaining the code and the project's health. Sometimes, the standard Golden Test tool is insufficient to cover all cases possible; therefore, using the Alchemist tool gives developers a powerful tool to develop the appearance test and a way to use it in their continuous integration environments.

Design system by a person don't well-know

Leonardo Rosa — Thu, 24 Feb 2022 11:31:11 +0000

First of all, I’m not an UI/UX professional, I’m Software Developer. But, I started this article because I saw in my personal projects there's redundant things between components. However, it did become a sadly job to update a property of a component per example. Thus, I did think how I can to makes better them? Answer to the ask, it is design system.

Design system

A design system is a complete set of principles, rules and best practices to manage design at scale using reusable components and patterns.

Why use a design system?

For create a system, can you has a lot work, but a good and robust design system, can saved hours of work and provide benefits to scale and the team*:*

Development work can be created and replicated quickly and at scale;
Consistency;
Focus at more complex problems;
It creates a patterns, to across products, channels and teams.

What do need to create design system?

I highlight two principal topics to makes a great design system:

Style guide;
Components;

Style guide

Style guide provide guidelines for way the your brand creating interfaces, like as: colors, typography and tone of voice. Generally, created by UX/UI team with developers team. The style guide is a tool that helps the team for maintaining consistent product and modular format.

Components

Components are reusable UI elements of our design system. Generally, it's clear, quickly and abstract enough to use at many projects and variety of use cases. Examples of components: button, text field and dropdown.

Generally components has to least two properties:

name: a name to component, quickly and easier to understand;

description: a description to the component, can you set details about the component like as: how it works and where be can used per example.

Conclusion

It's not only UI/UX professional should be do know about design system and little bit concepts about it, for create a design system requires a lot works but can saved time to reusable and scale design. However, it is need shared with developers team too, for makes an achieve a good and don’t out of curve design.

A little bit about binary search

Leonardo Rosa — Tue, 01 Feb 2022 09:19:30 +0000

Algorithms are step-by-step well defined instructions accomplish a program or task. I chose to write and learning more about binary search, because it’s an interesting algorithm kind and help much for high performance for a program or task.

Suppose you’re looking up a phone number in the phone book, the owner name phone starts with L. You open the phone book in the middle and find the K letter phones list, you does know K is before L and eliminate almost half of phone book options.

Imagine a social network with millions of users, and you are try find a user starts with F. If when you try search about user starts with F, the social network programming search in all millions users, this does spend unnecessary time and resource for it.

📌 Binary search is a kind algorithm of does search and that minimize search options. But remember, it’s just does works with sorted lists.

Search a number

Suppose now, you’re search a number 32 in an array. You know that number 32 is near the middle, and you take a position that returns 42 number*. 42* is fewest that 32, so you can eliminate half numbers.

Now, you can have an array with three positions, and take a middle position again and that returns 20 number.

Now, you know 20 is fewest that 32, and left over one number for search, it’s 32!

Hands-on

Let’s see how to write binary search with Dart language. The binarySearch function takes an array and item, the function returns which position of item at array.

void main() {
  const list = [5, 20, 32, 43, 65, 88];

  print(binarySearch(list, 32)); // 2
  print(binarySearch(list, -1)); // null
}

int? binarySearch(List<int> list, int item) {
  // low and high to track search
  var low = 0;
  var high = list.length - 1;

  while (low <= high) {
    // check the middle of element
    var middle = low + high;
    var guess = list[middle];

    // If found them
    if (guess == item) return middle;
    // The guess is fewest than item
    if (guess < item)
      low = middle + 1;
    // The guess is higher than item
    else
      high = middle - 1;
  }

  // The item does not exists
  return null;
}

Flutter: almost everything is a widget

Leonardo Rosa — Mon, 13 Dec 2021 14:26:13 +0000

In Flutter, almost everything is a widget, it's an important piece to underlying of the framework to render powerful visual layouts with high level performance.

This short post approach about items below:

Widgets;
Implement build method;
Widgets state.

Widgets

The widgets is an important piece to core of the framework render greats interfaces. Widget is a way to declare and build the user interface. The Flutter apps starts with a widget, and basically, the user interface that's see in Flutter apps, everything is a widget. Flutter comes also with many native widgets and two main design: Material and Cupertino, to help you build that look native platform for Android and IOS.

A widget generally is composed many other widgets. In Flutter there's visible and layout widgets, where visible is see on interface, like: Text, Image and Icon. And layout widgets aligns visible widgets, like Column, Row and Stack.

import 'package:flutter/material.dart';

void main() {
  runApp(const SpiderMan());
}

class SpiderMan extends StatelessWidget {
  const SpiderMan({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: const [
        Text(
          'spider-man: no way home',
          textDirection: TextDirection.ltr,
        ),
        Image(
          image: AssetImage('assets/spider_man.jpg'),
          width: 300,
        ),
      ],
    );
  }
}

Starts app with runApp function, that display given widget. Shows SpiderMan widget and display Text and Image widgets, that is visible widgets, and align these with a on Column. As result of preceding code:

Implement build method

When Flutter needs render a widget, it's calls build method. It through is describes that widget visual representation in part of user interface.

Widget build(BuildContext context)

Flutter framework call this method, when this widget is inserted into the tree or dependencies changes. Like when user interaction with UI and the state changes of widget, method build is rebuild.

Remember SpiderMan widget, it's show an Image and Text, but build method insert new widgets in the tree such as RawImage and RichText to show widgets, respectively. That's here the tree:

Widgets state

Flutter has many widgets and creation possibilities. Widgets does needs changes, because it happened user interactions, for example. However, haven't all widgets does needs that's changes. In Flutter calls this two more popular kind widgets: stateful and stateless, respectively.

Basically, s*tateful* widget are dynamic. Useful to a widget can change when an user action or receive data with it.

import 'package:flutter/material.dart';

void main() => runApp(
      const MaterialApp(
        home: Scaffold(
          body: Counter(),
        ),
      ),
    );

class Counter extends StatefulWidget {
  const Counter();

  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Text(
            'Counter $counter',
            style: Theme.of(context).textTheme.headline3,
            textDirection: TextDirection.ltr,
          ),
          TextButton.icon(
            onPressed: () {
              setState(() {
                counter++;
              });
            },
            icon: const Icon(Icons.plus_one),
            label: const Text(
              'plus',
              textDirection: TextDirection.ltr,
            ),
          ),
        ],
      ),
    );
  }
}

Explain, for implement stateful widget requires creating two classes: StatefulWidget that defines the widget and State, that stored the state for the widget and widget's build() method. And for changes widget state, calls setState() to Flutter rebuild the widget.

A stateless widget is an immutable widget - that's never changes. For implement stateless widget requires creating StatelessWidget that's contains build() method. Rollback to SpiderMan widget, it's stateless. Another examples is: Text, Container and Icon.

Conclusion

Widgets is an important piece to Flutter framework and does makes greats interfaces. The framework like helps developer with many natives and easy customizations widgets. But, it's a widely theme and that's possible deep dive into more it, with: element and render tree, animations and state management.