DEV Community: Francisco Souza

Flutter Widgets 101

Francisco Souza — Wed, 18 Mar 2020 16:53:20 +0000

Flutter is a UI toolkit created by Google intended to help developers to easily create pixel-perfect apps for Android and iOS from a single code base.

No one can deny that the React philosophy inspired the creators of Flutter, and the concept of component, or widget, is central for understanding how applications are designed and build. Each one is part of a component tree and receives its data from a parent widget. Also, a widget describes its look based on the application's state. Therefore, if data changes, the framework will determine the affected widgets and repaint them accordingly.

Simple Example

import 'package:flutter/material.dart';

void main() => runApp(
      Container(
        child: Center(
          child: Text('Hello, dev.to'),
        ),
      ),
    );

As shown by the example above, each Flutter app requires the package 'package:flutter/material.dart', which contains all functions needed for the app creation. Next, the runApp function sets up the initial settings for the app and defines which is the root widget of the application. Finally, the framework forces the root widget to cover all the screen, so, when executed, the example will show a text widget centered into a blank canvas.

As React programmers know well, flutters components are classified into two types: stateless and stateful widgets.

Stateless Widget

It is a type of widget that does not require an inner state to render its child tree. Therefore, the parent widget is the source of all data required by the stateless rendering loop.

To create a stateless widget, the developer must extend the StatelessWidget class and implement the build method. This method is the one responsible for creating the widget's children based on the input data.

Example

import 'package:flutter/material.dart';

class BackgroundTitle extends StatelessWidget {
  final String titleText;
  final Color backgroundColor.

  BackgroundTitle({
    this.titleText,
    this.backgroundColor,  
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8),
      child: Text(
        titleText,
        style: Theme.of(context).primaryTextTheme.title.copyWith(
              fontSize: 32,
              fontWeight: FontWeight.w600,
            ),
      ),
      decoration: BoxDecoration(
        color: this.backgroundColor.withOpacity(0.9),
        borderRadius: BorderRadius.all(
          Radius.circular(4),
        ),
      ),
    );
  }
}

Performance

A stateless widget depends solely on the configuration data provided to it. Consequently, the widget is rendered in two main occasions: when the widget is inserted into a widget tree and when that configuration data changes.

If the parent widget is constantly changing the widget configuration's data, so measures must be taken to avoid performance issues. The developer must guarantee that the widget will continue to render smoothly.

According to Google's documentation, there are several techniques to be considered to make a widget renders well.

Use const widgets where possible, and provide a const constructor for a custom widget, too. So, users can apply this same method to the custom widget.
Consider refactoring the stateless widget into a stateful widget, and applying the adequated performance methods.
Minimize the use o transient widgets to build complex layouts. Instead of many levels o widget layering, consider using a SinglePaint widget.

For more information about stateless widget, check the official documentation.

Stateful Widgets

It is a type of widget that owns an inner and mutable state. As in React, state data can be read synchronously and might change through time. Consequently, stateful widgets are responsible for implementing their inner state, notifying the framework about state changes.

A stateful widget instance is itself immutable, but its mutable part is stored apart, into state objects. When the widget is created, it subscribes to the state objects and repaints the widget elements according to changes notified by State.setState function.

Finally, a stateful widget can keep the same state data if moved from one location to another one inside the component tree. But, this behavior is only possible if the developer provides a global key to that widget. Therefore, the framework can track the associated subtree and graft it in another widget tree.

Example

import 'package:flutter/material.dart';
import 'package:my_app/src/widgets/components/email_field.dart';
import 'package:my_app/src/widgets/components/password_field.dart';
import 'package:my_app/src/widgets/components/submit_button.dart';

class LoginForm extends StatefulWidget {
  @override
  _LoginFormState createState() => _LoginFormState();
}

class _LoginFormState extends State<LoginForm> {
  final _formKey = GlobalKey<FormState>();

  String _email;
  String _password;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16),
      child: Center(
        child: Form(
          key: _formKey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              EmailField(
                onDataChange: (String value) => setState(() => _email = value);
              ),
              PasswordField(
                onDataChange: (String value) => setState(() => _password = v);
              ),
              SubmitButton(
                onSubmit: _onSubmit
              ),
            ],
          ),
        ),
      ),
    );
  }

  void _onSubmit() {
    if (_formKey.currentState.validate()) {
      _formKey.currentState.save();

      print(_email);
      print(_password);
    }
  }
}

Performance

In terms of performance, we classify stateful widgets into two categories: cheap and expensive.

The cheap stateful widgets are those that allocate resources in the creation time and dispose of them when the widget is discarded. They are computationally cheap because they consume little CPU and GPU time since they never are redrawn due to updates. These widgets are commonly created as the root elements in the widget tree.

The expensive stateful widgets are those that allocate resources at creating time, but are subject to redrawing during its lifespan. They are the most common type of stateful widgets and will depend on State.setState to trigger changes in response to events.

To avoid performance issues regarding stateful widgets, the developer must take some simple measures:

Try to place stateful widgets in the leaf nodes of the widget tree.
Avoid the use of many transient widgets and complex layouts, especially for widgets that have a high update rate or a big widget subtree.
Re-using a widget is a way more performant then rebuilding it. So, if the widget's subtree does not change, try to cache that. At first, extract the widget subtree to a stateless widget, then make it available as a child argument of the stateful widget.
Use const widgets wherever possible.
If in-depth changes are necessary for some reason, the subtrees must use a global key object, avoiding superfluous updates.

For more information on stateful widgets, check the documentation

Also, you can check this video:

Conclusions

Widgets are a key role for a Flutter developer since each application is structured as a widget tree. As React, Flutter uses the concept of one-way data binding, meaning that data flows in a single direction, i.e., from a parent widget to its children. That creates a situation where there are widgets that holds data as an inner state, reacting to its changes, and others that do not. Those are stateful and stateless widgets, respectively.

Due to state operations, stateful widgets consume more computational resources than the stateless ones. Therefore, developers might take some actions to prevent performance lags and deliver a smooth experience to the user.

Finally, stateless widgets can decrease performance due to constant repaints, mainly because they cannot cache widgets when they have a complex widget subtree. To avoid those problems, developers must be aware of the performance tips from Google's documentation to build applications that render smoothly.

Thoughts about Clean Coding

Francisco Souza — Mon, 16 Mar 2020 18:23:03 +0000

The purpose of any software project is to provide a high-quality solution for a client meeting some timetable. But sometimes it is not possible to do so because of many factors like unforeseen requirements, lack of team members and an unrealistic delivery schedule.

Another big problem that can decrease the developer's productivity is bad-written code. As a developer, I spend a lot of my working hours reading and trying to understand what other developers had done and how I can fix their mistakes. Unfortunately, it is usual for me to find pieces of code that are so cryptic that it would be better to rewrite it from scratch.

That kind of situation is called Technical Debt. That is the amount of rework required to correct problems created during software development by poor implementation choices, like the use of limited solutions or the lack of expressiveness on code. This sort of situation increases the software entropy, also like any form of debt, it can accumulate over time, making the proper corrections harder to implement.

What is clean coding?

Clean coding is a development-driven philosophy that allows developers to use simple techniques to create and maintain code that is readable, effective, understandable and easily maintainable. The main focus is to decrease technical debt by creating a self-explanatory narrative that allows the introduction of changes and new features in a more natural way.

Each programmer is responsible for using and applying the clean coding rules, but the best results show up when all team members can make use of those conventions. Therefore, the whole team must compromise itself to a culture change and to the implementation of mechanisms that enforces that new coding standard.

Clean coding techniques

In his book Clean Code: A Handbook of Agile Software Craftsmanship, Robert Martin explains the clean-coding philosophy and methods. Those are generic enough to used by any software project, despite the chosen programming language or the framework adopted.

1. Focus on Simplicity

Simplicity is the main point of all clean-coding philosophy. It means that the developers must avoid the use of complicated or obscure logic. Instead, they must use simple and straightforward logic. Finally, they must use well-known algorithms and coding conventions.

2. Significative Naming Convention

Programmers are used to creating and naming a lot of entities when writing code. They must pay attention to each language, or framework, naming convention and follow it. Also, they must avoid the use of too short, or too long identifiers. Those must be concise and simple, allowing the reader to understand its purpose without much more information.

Examples:

// Opens a certain file in reading mode

File openFileInReadingMode(String path) {
    // function body
}

// Saves a text file
void saveTextFile(String path, String text) {
    // function body
}

3. Write short functions

A function is a piece of code that is responsible for executing one well-defined task. Therefore, a programmer must avoid writing big chunks of code that perform several operations at once, but break that in some small and self-contained procedures.

Each development team is responsible for creating the naming conventions and assuring its use. But, there is some common sense that everybody can use to improve the source code readability.

Function names must be concise and accurate. They must describe what the function does and the possible side effects. And the users must be capable of understanding the function's purpose without knowing how it works.

Examples:

DBConnection connectToDevelopmentDB() {
    // function body
}

double calculateProductDiscount(Product product, String promoCode) {
    // function body
}

Functions must have fewer arguments as possible. However, if many arguments are required, the developer must provide a configuration object instead.

Examples:


//bad example
DBConnection connectToPostgres(
    String user,
    String host,
    String password,
    String database,
    String port,
) {
    // function body
}

//good example
DBConnection connectToPostgres(DBConnectionConfig config) {
// function body
}

The main goal of writing functions is to avoid duplications. So, the redundant code must be extracted to an independent function that will replace all duplicates.

Example:

User mapJsonToUser(String userJson) {
    final Map<String, dynamic> userMap = json.decode(userJson);
    return User.fromMap(userMap);
}

User createUser(Map<String, dynamic> data) async {
   final response = await MyHttpClient.post('/users', data: data);
   return mapJsonToUser(response.body);
}

User updateUser(Map<String, dynamic> data) async {
   final response = await MyHttpClient.patch('/users', data: data);
   return mapJsonToUser(response.body);
}

4. Add Meaningful Comments

"Source code must document itself" is a common motto among clean coding advocates. However, it is not always possible to provide meaning to the user using only well-written source code. Sometimes, it is necessary to give an additional explanation about obscure passages or specific logic.

Comments must be written according to a previously agreed format, therefore the user can find the needed information fast. Also, comments must be short and condense as much information as possible, avoiding long and hard to read chunks of text.

5. Test the Code

Testing is ordinarily used as a measure to ensure that some implementation is compliant with its requirements. It is also responsible for keeping the code clean, flexible and maintainable, therefore changes can be introduced without breaking anything. Finally testing provides important insights to the developer, therefore helping to create well-written code.

It is important to choose a proper test suite that is recommended for the framework in use, following its philosophies and conventions. Also, tests must be readable, dense and assertive. Each test must deal with one feature at a time and run autonomously. Variables and memory allocated before each test need to be released after each one completes.

Conclusion

Nowadays, the pace of technological change is growing faster. Each day, developers are fixing broken code and adding new features to their respective projects. But, to each new feature or fix, many other errors can be introduced and harm the software quality. To avoid this situation, improve the code quality and pay the existing technical debts are fundamental. To make this feasible, the use of clean coding techniques is fundamental.

Clean coding procedures are concise, simple. They emphasize that the programmer truly owns the code he produces and that he is the main responsible for the quality of the final product. Therefore, for those measures to be effective, the development team has to be sure that everybody is aware of this commitment and enforce it.

For more content related to clean coding, I recommend the book Clean Code: A Handbook of Agile Software Craftsmanship by Robert C. Martin.

If you already read the book but want just a summary to make a checklist, this gist is for you.

What about Flutter?

Francisco Souza — Fri, 13 Mar 2020 18:51:14 +0000

Introduction

In mid-2007, Steve Jobs introduced to the world the most loved product Apple has ever crafted and the de facto first smartphone: the first-generation iPhone. His main goal was to radically change how we interacted in a connected world and to revolutionize the current status quo of the mobile computing industry. Realizing the great opportunities offered by that new-borne market, Google launched its operating system for mobile devices in the following year, the Android OS.

Evolving through many iterations and receiving a whole new lot of features, they are now the platforms that aim billions of people around the world to be part of an interconnected global economy. This new scenario is responsible for the current high demand for mobile apps which availability in Apple’s and Google’s ecosystems is practically mandatory for companies that intend to maximize their profits. Also this demand for apps created a budgetary problem because a company should keep two different sets of professionals to develop, maintain and distribute those apps for each platform using a native approach.

Through time many solutions were proposed to solve those problems. The most famous frameworks use web technologies (like HTML5, CSS and Javascript) as Ionic and React Native does. The main goal is to use a single code base to create a product, compile it to the targeted OS and upload the generated binary file to the App Store or Google Play. This approach worked well for the last years, but nowadays the users have more expectations on the look and feel of the available mobile apps. They require them to have great design, smooth animations and optimal performance without compromising the inclusion of new features. And this is the main reason why Google decided to enter this game creating Flutter.

But, what is Flutter?

Architecture

Flutter is UI Toolkit created by Google in mid-2017 intended to help developers to create pixel-perfect apps that look and feel like native ones. Also it should enable a developer to make those apps available for mobile devices, the web and desktop without compromising performance and the user experience.

As shown in the image above, the Flutter framework can be sliced into three basic layers.

The Embedder: This is the native part of every flutter application and it is responsible to provide an interface to interact and access resources of the targeted OS. It also provides the most basic features that the Engine layer uses to control the app’s lifecycle and the widget painting process.
The Engine: This is the core of each Flutter App, and can be divided in basically three sub-modules:
- Dart Virtual Machine: Responsible for interpreting and executing all Dart Code created by the layer above.
- Rendering Engine: Its main responsibility is to paint efficiently the widgets created by the layer above and assure that animations will be played smoothly. It is written in C/C++ to boost performance and uses Skia Graphics Engine to efficiently paint each widget on the screen.
Skia is an open-source 2D graphics library that provides common APIs that work across a variety of hardware and software platforms. It serves as the graphics engine for Google Chrome and Chrome OS, Android, Mozilla Firefox and Firefox OS, and many other products.

Skia is sponsored and managed by Google but is available for use by anyone under the BSD Free Software License. While engineering of the core components is done by the Skia development team, we consider contributions from any source.

Source: [Skia WebSite](https://skia.org/)
- Services: Interfaces that allow the Framework layer to access the engine services, like the rendering engine, platform channels (access the system’s resources) and listen to system events.
The Framework: this is the layer that the programmer will interact daily. It contains the foundational resources upon what all the Flutter’s widgets are built. This layer also offers the two main themes used to create Flutter apps: material and cupertino. The material theme is responsible for implementing widgets that are compliant with the second version of Google's Material design system. In the same way, the Cupertino theme implements the look and feel of the iOS native design system.

Characteristics

All flutter apps are compiled and optimized for ARM architecture in production mode and optimized for debugging in development mode. Also hot reloading is available in development and it is simply awesome!
As shown in the architecture section, all Flutter widgets are build using Dart, a language created and maintained by Google itself. Dart is optimized to easily create user interfaces using code at the same time that offers a similar syntax to C#, JS, Swift and Kotlin.
Due to performance improvements, Flutter renders its widgets that mimic the underlying OS components. So, a new embedder must provide a canvas upon what the Skia Engine will draw the user interface itself and services to access resources of the system.
Extensibility is granted by the aggregation of third-part plugins that adds new components or allows the use of the OS resources that are not yet available in the built-in classes. All those libraries can be found in the official repository and added as dependencies in the apps pubspec.yml file.
Similarly to the React ecosystem, a flutter app can be described as a widget tree and the UI can be defined is the result of a function applied to the current app state. Therefore, as in React, data flows in a unidirectional way: from a parent widget to its children and each widget is repainted only if the application state changes and it affects the widget state.
Platform custom code is super easy to write. The Platform class has some static methods that help to identify the current OS and execute specific code. Also, some widgets like Switch implements the adaptative constructor that chooses the widget theme based on the current OS.
It helps to efficiently create Minimal Viable Products and Proof of Concepts. Due to increased development speed, great UI flexibility and minimum setup time, Flutter helps to easily approach and validates business ideas. Also features as hot reloading helps to speed up the implementation of feedback from clients.

Use Cases

For a long time, many companies have struggled to deliver high-quality apps using a hybrid approach. Performance issues, slow development time, limited UI development and other downsides have made companies to move away from more traditional hybrid solutions and give Flutter a try. In the showcase page you can find a whole lot of companies that are developing apps using Flutter. In this list you can find some big players like Tencent, Alibaba, The New York Times and eBay.

Conclusions

Flutter is a new framework from Google that speeds up the app development cycle by focusing on key features like interface building, performance and extensibility. By rendering its widgets, the developer can easily and rapidly extend and implement new features without losing the look and feel of the operating system upon which the app will run.

There are some critics because of Google's choice to use Dart instead of Javascript/Typescript. But after playing with Dart for some time and developing some simple apps, I realized that the language really resembles a lot the most popular C-like programming languages and it was not hard to learn.

Finally, I believe Flutter is a trend to 2020 mobile app development and it really worths a try. As time passes by and this technology solidifies, it is certain that more companies are going to adopt it as a first-class framework for cross-platform app development.