DEV Community: FlutterExplained

A terminal real time application with Dart Sockets

FlutterExplained — Wed, 27 Jul 2022 08:59:00 +0000

We already covered in another Article what an HTTP call is and how it works in a Client - Server Architecture. But today we want to have a look how we can keep an connection open between the Client and the Server in order to implement an Real Time Application.

Why do we need Sockets

But what would be the benefit of Sockets compared to the standard HTTP Request / Response method? In modern applications, we want real-time data, and who thinks now at Firebase is correct.

Before we had the benefit of WebSockets or Sockets, we had to wait until the Server finished a task and make another request to get the Data. Because the Server never told us, that we were ready with the new data. Therefore, developers all around the world discovered some quite exciting workarounds like Pooling. At Polling a client made a request every period (200+ ms) to check, if there are new data present. Thanks to WebSockets and Sockets we have the chance to reduce the load of our servers because we can reduce the calls needed. With that the server can directly notify the client of the new information. Real-Time applications are born.

Sockets vs. WebSockets

At the beginning of my journey I tried to use Shelf_WebSockets and connect with my two Terminals and the result was,... nothing. Interesting enough I was able to connect via the terminal clients to the server but whenever I send a message it was just not visible and the server did not show anything.

After a long time of learning and debugging I found out that my Terminal used Dart:io and needs that a Server works with the same TCP Sockets. While the WebSocket Server was able to allow the connections it was unable to understand the messages the Terminals tried to send.

Why is that the case, well WebSockets are an upgraded HTTP request that allows the open connection between a client and a server. WebSockets are usually used to connect from a Browser or an UI to the Server and this made it probalmatic. There are packages out there that allow Terminals to connect against an WebSocket server but I did not use them. Therefore I needed to change my WebSocket Server to an TCP Socket Server.

So the rest of the Tutorial we will only use a Socket Server and Socket Clients but the same thing can be done with WebSocket Server and an WebSocket Client like for example websocket_manager that allows Flutter to connect against a WebSocket Server.

If you want to know more about Sockets vs. WebSockets I can recommend you to read the mdn post about WebSockets and the StackOverflow answer. Great now that we have that out of the way let's see how we can develop our application.

Implementation

The best part of the implementation we will now see is that we do not rely on any package. To make this possible default Dart is enough to make it work and that is by any means awesome. The only package I added is absolutly optional and is called ansicolor and allows to make prints in the console a bit more colorful.

I created a basic barebone Dart project without anything inside but a terminal executable. Because we do not need the boilerplate from the Server app because we want to use Sockets :).

![[Pasted image 20220706134649.png]]

Now I delete everything in the bin folder and created three files client.dart, server.dart and terminal_service.dart. In the client.dart we will collect all information about the client, how he connects to the server and the message he sends. At the end we will be able to start multiple clients against a single server. The second file is the server.dart inside here we write everything to receive messages from multiple clients and notify all clients that there happens something new. Last but not least we have the terminal_service.dart this is just a mini service that contains different print functions for different colors. The result after the tutorial will look something like this.

Setup the Server

First we start as always with a main function inside here we want to find the local ip address and we allow to find dart just an unused IP address. Then we create a ServerSocket and bind the ip and a port in our case the port is fixated on 3000. after that we just let the server listen to incoming connections, so whenever someone connects to the server the callback in server.listen(callback) will be executed.

Future<void> main() async {  
  final ip = InternetAddress.anyIPv4;  
  final server = await ServerSocket.bind(ip, 3000);  

  print("Server is running on: ${ip.address}:3000");  

  server.listen((Socket client) {  
    handleConnection(client);  
  });  
}

Whenever a client is connecting to our Server we call the method handleConnection inside of which we want now to inform the Server that there is an incoming connection. The Socket we receive in the handleConnection is the information how to communicate to that specific client and if you want for example to create multiple players you can save that socket to have a reference between player and socket to send messages between specific players. Now we have to listen to the client if the client is sending the server some messages.

List<Socket> clients = [];

void handleConnection(Socket client) {  
  printGreen(  
    "Server: Connection from ${client.remoteAddress.address}:${client.remotePort}",  
  );  

  client.listen( ... );  
}

Before we had already server.listen where the server waited for connections, now we have client.listen so we on the server wait for the client to send us some notifications. the client.listen function has some information we have to pass in. The first part is how to handle messages from the client. So what we will do is we receive a Uint8List message that is just a basic ByteString, and because we will be in full control of the client we know that this will be a basic string so we can transcode it with String.fromCharCodes(data).

In that message we want that our users will send the player name so we can inform every client that already connected to the server

client.listen(  
  (Uint8List data) async {  
    final message = String.fromCharCodes(data);  

    for(final c in clients) {  
      c.write("Server: $message joined the party!");  
    }  

    clients.add(client);  
    client.write("Server: You are logged in as: $message");  
  },
  onError: ...
  onDone: ...
  ...
)

Implement the Client

First we create in our Dart Project another file called client.dart. Here we will implement the client application that will connect to our Server. The client works similar to the Server and should be a standalone Dart application. Therefore, we need another main function. In this main function we connect with a Socket to our Server with the IP we get from the server command:

Future<void> main(){
    final socket = await Socket.connect("0.0.0.0", 3000);
    print('Connected to ${socket.remoteAddress.address}:${socket.remotePort}');
}

When we execute the client.dart file now without anything further we will get already the information on our Terminal where the Server is running, it should look something like this.

➜ dart ./bin/client.dart
Connected to: 127.0.0.1:3000

➜ dart ./bin/server.dart
Server is running on: 0.0.0.0:3000
Server: Connection from 127.0.0.1:53419

Therefore we can see that the Server already receives the connection, and keeps the connection open for the ip 127.0.0.1:53419. This is in our case also the same computer but the IP and the Port could be completly different for your implementation. Great so the Connection is already stable so lets send some messages from the client to the Server and see how we can handle them. For that we will ask the User for his name and send the information to the Server.

// Ask user for its username

String? username;  

do {
    print("Client: Please enter your username");
    username = stdin.readLineSync();
} while (username == null || username.isEmpty);

socket.write(username);

We first define a variable username that could be null and in the do-while-loop we ask the user for a terminal input to enter the username, if the username is null or empty we ask him again until we get the info we need. After that we call socket.write(username); which sends the information directly to the Server. But if we restart the Server and the client now we will see that nothing has changed. The message is now only send to the server and if we check again the server we see that we send the message to the client.
client.write("Server: You are logged in as: $message");
The client on the other hand does not listen to server messages and is not able to show what the Server send, yet. So let us make the Client smarter and allow it to receive messages send by the Server.

socket.listen(
    (Uint8List data) {
        final serverResponse = String.fromCharCodes(data);
        printGreen("Client $serverResponse");
    },
    onError: (error) {
        print("Client: $error");
        socket.destroy();
    },
    onDone: () {
        print('Client: Server left.');
        socket.destroy();
    },
);

If we check the socket we can see that it provides also the listen method and also here we have the chance to implement the same three methods like on the Server side. Therefore we implemented them nearly the same. The only difference is the onData method that is now receiving the message and directly prints them into the console.

If we start up now the Server and Client we should be able to see something like this:

➜ dart ./bin/server.dart
Server is running on: 0.0.0.0:3000
Server: Connection from 127.0.0.1:54384

➜ dart ./bin/client.dart
Server: Connected to: 127.0.0.1:3000
Client: Please enter your username
Max
Client Server: You are logged in as: Max

And if we create another client the following will happen:

➜ dart ./bin/client.dart 
Server: Connected to: 127.0.0.1:3000
Client: Please enter your username
Mahtab
Client Server: You are logged in as: Mahtab

➜ dart ./bin/client.dart
Server: Connected to: 127.0.0.1:3000
Client: Please enter your username
Max
Client Server: You are logged in as: Max
Client Server: Mahtab joined the party!

➜ dart ./bin/server.dart
Server is running on: 0.0.0.0:3000
Server: Connection from 127.0.0.1:54384
Server: Connection from 127.0.0.1:54415

Conclusion

Great with that we have now a successful Socket Server running and multiple clients connected. This allows us now to create amazing applications that needs the real time experience. That can be integrated in Games but also in Tools where collaboration is key.

The tutorial project can be found on Codeberg, feel free to check it out and if there are any toughts please let us know. Thanks for reading and till the next post.

Deployment of a Dart Server on Heroku

FlutterExplained — Sat, 09 Apr 2022 14:49:23 +0000

Running the first server is a fantastic experience for every developer. It gives you many options and possibilities and improves your general understanding of software engineering. After we learned in my previous videos already how to start a server locally, we want in this article to learn how to make our services available on the world wide web so that you can access them from every device.

Client & Server Architecture - Build your first Web Server with Dart

Today, we want to look into a client-server architecture, and we will create our first server with dart & shelf. Chapters: 00:00 Welcome to the Flutter Explained 00:45 Theorie what is a Client / What...

odysee.com

Deployment

Software deployment includes all activities that make a software system available to use. - Wikipedia

In our use case, we want to access our server from every device connected to the Internet and not only our local device in front of us. In professional teams, that task is automated in most cases and transforms quickly. Into continuous deployment where you work on your code, push to a repository, and the deployment gets automatically triggered. But in smaller teams or smaller organizations, the preferred way is usually for a skilled professional to perform that task. And because we are skilled professionals, we do exactly that today.

Prerequisites

We have to prepare just a few things to get started in the beautiful world of deployment. The first thing that we need is a physical server that will run our software server :). For this reason, we will use Heroku, because it allows us to run our software for free in a small server Virtual Machine (VM) that we can scale up if we want.

We also need a software service that we already built in the videos mentioned above. The service we want to deploy will use the shelf server from Dart
hat we already run locally and make our first requests.
But this will also work if you use a aqueduct server or a conduit server.

Summary of what we need today:

Heroku Account
Running Software Server
No previous knowledge about deployment processes

Getting started

After you successfully create an account on Heroku, you will probably see a page that welcomes you to Heroku. From here,
you could also create a new app, but we will do it with the Heroku CLI.

Heroku CLI

Now that we have that covered let us jump right into it. To begin our journey to deploy something on Heroku, we need to
install the Heroku CLI. Then, check out the link of the Heroku CLI and select the system that fits your operating system.

Great, the Heroku CLI will help us deploy our Server to the Heroku server. After the installation, we first have to login against the Heroku system. For that, execute Heroku login in your terminal. After executing the command, your default web browser will open and allow you to log in to Heroku.

Create a new Heroku app

The most convenient way to create a new Heroku app is via the CLI. For that, open a terminal and navigate to your workspace in which your project is. In our example, it will be in ~/dev/dart-server. Now we want to create our app. We execute Heroku create <name-of-your-app> in our example. We call the app fe-dart-server. If you do not pass a name, it will create a random app name for you.

heroku create fe-dart-server
Creating ⬢ fe-dart-server... done
https://fe-dart-server.herokuapp.com/ | https://git.heroku.com/fe-dart-server.git

As a result, Heroku delivers us two URLs. The first one is the URL directly to our app. Currently, we do not have an application running on https://fe-dart-server.herokuapp.com/.Therefore, you will find the
ocumentation link of Heroku if you open it. The second link is the internal git server of Heroku, from which it will use your source code to build the project. We will need to add a new remote to git to push our Dart project.

# If you have not initialized your project with git
git init
git add remote heroku https://git.heroku.com/fe-dart-server.git

** Hint: It could be that if your project was already in git, it was already added with the Heroku create command**

Now that your app is registered to Heroku, we have to set up a buildpack.

How Heroku works

Now it is essential to know how Heroku works. A build pack is responsible for transforming your deployed source code into a slug, which can then be executed by a dyno. You can read more about how Heroku works here. So before we go deeper into the topic, let's quickly check what a slug and a dyno are.

A slug is a bundle of your source, fetched dependencies, the language runtime, and compiled/generated output of the build system - ready for execution.

Dynos are isolated, virtualized Unix containers that provide the environment required to run an application.

Source: devcenter.heroku.com

Set up a build pack for Dart

Unfortunately, Heroku is not yet supporting Dart with an official build pack. Therefore, we have to take advantage of
the fantastic Dart & Flutter Community, which has created already a build pack that we can use. We will use in this tutorial the most starred build pack by igrigorik.

To use the build pack, we will have to tell Heroku to use a specific download URL for the Dart language and configure the build pack we want to use. To find a Dart SDK URL, we check the Dart Archive page. Then, we select Linux and the version we would like to install. This example case is version 2.16.2`, which is the current version. Now right, click on Dart SDK and copy the link address. We will need it in a second.

Now it is time to set the Dart URL and our BUILDPACK_URL for our Heroku app by executing in our terminal.

`
heroku config:set DART_SDK_URL=https://storage.googleapis.com/dart-archive/channels/stable/release/2.16.2/sdk/dartsdk-linux-x64-release.zip

Setting DART_SDK_URL and restarting ⬢ fe-dart-server... done, v3
DART_SDK_URL: https://storage.googleapis.com/dart-archive/channels/stable/release/2.16.2/sdk/dartsdk-linux-x64-release.zip

heroku config:add BUILDPACK_URL=https://github.com/igrigorik/heroku-buildpack-dart.git

Setting BUILDPACK_URL and restarting ⬢ fe-dart-server... done, v4
BUILDPACK_URL: https://github.com/igrigorik/heroku-buildpack-dart.git
`

Now it is time to push our source code to Heroku by pushing our source code to the remote git that we got when we created our Heroku app.

git add . # Adds all files to git in this repository git push --set-upstream heroku main # Sets the upstream branch to heroku main and pushes all files

If you are doing it in the terminal, Heroku will give you a lot of logging information about the build process.

remote: -----> Discovering process types remote: Procfile declares types -> (none) remote: remote: -----> Compressing... remote: Done: 195.9M remote: -----> Launching... remote: Released v7 remote: https://fe-dart-server.herokuapp.com/ deployed to Heroku remote: remote: Verifying deploy... done. To https://git.heroku.com/fe-dart-server.git refs/heads/main:refs/heads/main 75c0e7f..b4f1198 Done

The log above tells us that everything was successful, but one step is missing. First, we need to declare the dynos we want for our app. For that, we need to create a Procfile in the root directory of our project. Then, we enter the dyno and what it should start to execute our server. In our case, we execute the dart_server.dart in the bin folder.

:title=Procfile web: ./dart-sdk/bin/dart bin/dart_server.dart

Hint: The Procfile does not have a file extension like .txt or .js.

If we now commit and push again to the Heroku git server we are ready to see our server in action.

git commit -m "Added Procfile to setup the dyno" git push --set-upstream heroku main

🎉 Great, if everything worked well, you should have now your first running Dart Server on Heroku.

Troubleshooting

As always, some things could go wrong, and I try to add a collection that we found out during our
live stream.

Dynamic Port

Heroku does not provide you static port, so you will get a new port every time the instance is started. Especially in the free plan, that happens pretty frequently and therefore, you must take the PORT provided by the Environment variables of Heroku.

`dart
var env = Platform.environment;

var port = env.entries.firstWhere((element) => element.key == 'PORT',
orElse: () => MapEntry('PORT', '8080'));

var server = await shelf_io.serve(
logRequests().addHandler(router), '0.0.0.0', int.parse(port.value));
`

Replace localhost with 0.0.0.0

Heroku is pointing to itself while setup a server you will need to change localhost to 0.0.0.0

dart var server = await shelf_io.serve( logRequests().addHandler(router), '0.0.0.0', int.parse(port.value));

Wrapping up

Great, we did it. With these steps, we published our server to Heroku and made our very first deployment possible. The next milestone is to create a helpful app out of this server. We were maybe starting with a small quiz app that allows you and your friends to learn more about development. For that, you will probably need more insights into the shelf_router package or an even bigger solution like Conduit.

Feel free to share your first examples with me on Twitter with the Hashtag #FlutterExplained. I cannot wait to see your results!

Code Analysis & Linting in Flutter and Dart

FlutterExplained — Mon, 04 Jan 2021 15:27:29 +0000

One of the best practices that we introduced in the video best practices for Flutter is Flutter Code Analysis and Linting. I would like to start a small series of different Blog posts where we talk about each of these Best Practices and today we start with the very first one: Code Analysis and Linting.

Max Weber 💙

@flutter_exp

What is your #Flutter Best Practice? 🤔

14:16 PM - 01 Dec 2020

31 144

Setup Code Linting for a Flutter project

In the beginning, let me say that additional Linting in Flutter is a controversial topic. On one side, many love code linting, because it allows us to focus on crucial parts of our code. However, some people are not fond of it because it restricts them and leads to false build errors. But before we start the discussion, let us begin with what code linting is and how we can use its full potential.

Code Linting is an automated verification that your code is correct. There is always a Linter that we all use in our day to day work. In editors like VSCode and Android Studio, we receive errors when our code is not runnable. The visualisation of build errors are already features of our Linter. This integrated Code Linter is a tool that checks your code for build problems, that means you would not even be possible to run your application. We do not have to search for errors in our code, and when everything is green, we are sure that our code is executable.

Thanks to modern tools, we can extend these rules and check our current project for more than just broken code. For example, we can tell our Linter that we want to check for wrong code styling. In Dart and Flutter the additional lint rules are managed by a file called analysis_options.yaml. If you have never heard about a yaml file extension, it is just a convenient way to structure a file that allows you to create tree structures with two spaces. Feel free to read more about the .yaml file extension here.

Our Mission: Enforce single quotes in our project

Let us assume we would force all our developers to work on our project, that every string should be done with a single quote. Our IDE should show it immediately, like in the image below.

To achieve that the static code analyzer of Dart and Flutter recognize that mistake, we must create an analysis_options.yaml responsible for our whole project gives our Dart analyzer instructions that run in the background and verifies our code. We can create the analysis_options in the root of our project, and most IDE's like Android Studio or Visual Studio Code will right away understand what it needs to do with it. Now, let's take a closer look into the analysis_options file. Inside of the analysis_options, we can modify the behaviour of the analyzer and the linter.

The Analyzer & Linter

In our first section in the common analysis_options.yaml file is usually the analyzer. Here we can configure a more general part of how we want to check our code. Firstly, we can set up if we want to show errors, warnings, or as information for specific rules. Secondly, we can exclude files and folders from the checking system. Moreover, we can ignore specific rules. Last but not least, we have the chance to introduce additional strict type checking and experimental behaviour like no slow checks or super-mixins.

To use now the main information that we registered to the Analyzer, we have to specify the rules that we want to apply in our project. Therefore, we use the Linter section of the analysis_options.yaml. In the linter section, we define which rules are applied to our project. There are around 180 rules that you can specify and make them right away visible in your application. To explain, all of them would bust this blog post, so feel free to look at the list of linting rules you can specify at the Linter for Dart site.

Linting Rules

At the time I write this post, there are three different categories of Linting Rules. The first is the Error Rules, and they are possible coding errors. Secondly, we have the Style Rules that define code style matters, like a single quote or double quote. It does not hint whether your code is stable or not, but it helps align the whole codebase. The pub rules follow both. This set of rules defines how a pub package has to behave; it includes only two rules on how to name a package and sort dependencies in your pubspec.yaml.

avoid_init_to_null

As the name already states with this linter rule, you do not allow anymore to initialize a variable with null. But why could this be helpful? In Dart, every variable that is not specified with a value is automatically set to null. There is no concept of empty memory or any other trap that we could fall into. With that in mind, a specific declaration of a variable to null would only bloat our code and is unnecessary and unneeded.

use_string_buffers

Another fantastic rule that many developers are not really aware of is a more performant way to concatenate strings. The String Buffer helps you improve the concatenation of Strings and allows you to do it in the most performant way. To make sure that all contributors in your code concatenate strings efficiently, we can set the use_string_buffers style rule.

prefer_double_quotes

The prefer double quotes rule allows you to take control if you want to enforce a specific quote style. Here we prefer in our code base double quotes but also the single quote rule exists and makes it possible to enforce quote style. This is especially helpful if you work in a multilanguage team because Keyboard layouts differ from country to country. In contrast, in English and American speaking country, the single quote is easier accessible and mostly used in other countries like Germany, the double quote is usually prefered. This rule leads to clear information on how the maintainer or the owner of a package or project wants to work in general.

This is also the rule that we will use to finally solve our problem and enforce double quotes for the whole project.

The Solution

Alright now that we know how the Linter and the Analyzer work lets solve our goal for this blog post, we want to enforce every developer who works on our codebase to prefer double quotes, and if they do not, we want to really show it as an error. The first thing we have to do is to define the Analyzer with the correct severity of the issue. In our case, this would be "error". Next, we just defined in the pubspec.yaml our linter with the new rule that we want to add.

Now after we have specified the rule and the severity of the enforcement we can already see in our IDE the errors appearing.

If we now run dart analyze in our terminal inside our project, we receive a full analyzing report. Now we can use this command inside our terminal. If we use this command now in our CI / CD chain, the build will fail, and our team would have to fix it to merge it in our project.

Lint Rules as a package

As always, there are fantastic packages that come with a predefined selection of rules that makes it easier to set up the first baseline that you want to use in your project. Let us first have a look at how we can include them in our project.

Install a third party linting rule set

In order to add a linting rule set we have to first add the dependency to the pub.dev package in our pubspec.yaml. As an example we want to add the Lint package to our project.

The next step is to import the rules from the package into our analysis_options.yaml.

As soon as you open now the different files, you will now recognize that the package's linting rules are already taken into account and are ready to use. Let us assume that you do not like a rule. You can easily overwrite the behaviour by including the linter and analyzer. Your rules will overwrite the package's rules, with that you will always have control over the lining.

Lint Packages

Pascal Welsch creates the first Lint package, and it includes a baseline of lint rules for Flutter and Dart Projects. You can extend or exclude rules afterwards if you use this package, but it is created with consumers. That means if you are not necessarily working on the Flutter project. This should be your way to go.

Pedantic

The second package that I want to introduce you is the so-called pedantic package. The Flutter team created the pedantic package to support a set of rules that is usually way more restrictive in terms of usage and allowances and is a bit over-engineered from time to time.

Conclusion

In this post, we learned how to use the Linting Rules to our advantage and enforce rules so that every developer who collaborates with us works in the same way. To generate these rules and discuss them in a team could be tedious, and many people would say that it is not worth the effort. But if the conversation and discussion start now, you have the right tools to join the discussion and give some valuable insights.

Thank you for reading and let me know what you are thinking about Linting rules down in the description below!

The post Code Analysis & Linting in Flutter and Dart appeared first on Flutter Explained.

3. Problems we avoid with our CI / CD pipeline

FlutterExplained — Sun, 03 May 2020 19:34:40 +0000

In the first episode of our CI / CD blog, we worked with GitHub Actions. In our last project, we decided to work with the CI / CD solution Codemagic. We were delighted with the tool and could solve some issues in our codebase that happens to probably every development team.

This article is an addition to my video for CI/CD.

Save Recipe App

Whenever we want to try a new recipe in our home, we will search on the internet and select a random recipe for cooking or baking. But as soon as we had our dinner or the cake, we can not remember and find the recipe anymore. Therefore, my partner and I decided that the world is ready for a save recipe app where we can store screenshots of all the delicious recipes that we find on the internet.

The app is currently an MVP, but it has already most of the functionality that we want to deliver. This app will be today the example for our article.

We created already a Codemagic build pipeline for it. We configured it that way that whenever we push on the master branch in GitHub, it starts the build and deployment process. Feel free to check out our repository and give the project a star on GitHub.

CI / CD with Codemagic

For those who never heard anything about Codemagic, I want to give a brief overview of the solution. Codemagic is a solution to create Continuous Integration (CI) and Continuous Delivery (CD) for mobile apps. It began as a pure Flutter CI / CD SaaS and is therefore strongly aligned with Flutter development. So if you or your company program in Flutter I can highly recommend you to take a look at it.

Thanks to a CI / CD like Codemagic, we can run our tests and deploy without doing anything additionally as pushing to the master branch furthermore, because the pipeline runs the Analyzer, Tests and releases immediately. That creates us a safety net which helps us to avoid some common issues that happen in every team from time to time. So we want to give you a glance at what could go wrong and how you can debug this problem.

1. Compiler Error in our code

Let us begin with a problem that very rarely occurs, but if it happens, it blocks a lot of team members and is usually extremely expensive. So we confine our code base with some compiler errors. We push the broken code to our branch on GitHub, and we merge it to the master branch. A new build will start to run, and a couple of minutes later, we will see the following message in our build overview.

Test run failed: Flutter analyze found issues.

The message states that the Flutter analyses did not pass, and our pipeline found issues. To receive more information, we open the testing tab and see in the results part which issues we have.

The Flutter analyser found the mistakes that we did and shows in the logs the problematic areas. I point this “basic” error out because it helps us to find issues and protect our application from defect code. Finally, our team can be sure that after the CI / CD pipeline runs, our team does not have to fear defect code and with that a code freeze.

2. Broken Unit- or Integration tests

The most natural and most widespread problem that we run into are broken unit or integration tests. When one of our tests failed, we could find the problem very easily by checking the testing part on the dashboard. The build logs are very expressive, and the result messages give us the right direction.

Test run failed: Flutter test run failed. Test run failed: Flutter test run failed.

Thanks to the dashboard, we must jump into the testing tab and see here the log and results in tabs.

The result tab offers us the possibility to find the broken tests very quickly, and we can even select the test to receive the reasons from Dart Test. Another benefit is that all criteria are running through, and it does not stop at the failed test.

The CI / CD helps us, in that case, to keep our code working correctly. We secure the stability of the source code. Thanks to the necessity to run all the tests, we make sure that everyone handles their changes and the inspections are the safety net for that we create them.

3. Wrong app-specific password

Hurray, our app is ready to get published to the App Store, we run into issues.

Test run failed: Flutter test run failed. Test run failed: Flutter test run failed.

To get more information about our error, we open the dashboard and open the publishing part.

In the picture above you find the following errors.

Error: Unable to validate archive “/Users/builder/ipas/Save_Recipes.tpa
Error: code –22020 (Unable to validate your application. We are unable to create an authentications session.)

This error messages unfortunately still do not help us what exactly went wrong. So we needed the first time the SSH access to get more details about this error. To do so, we must run the build manually and activate the “Enable Remote Access” in the specified build configuration window.

To connect to the build machine, we need to open our Terminal and paste the statement that we get on the top of the codemagic dashboard for SSH access. After we connect to the build machine, we run in our terminal the last executed command, which you can find in the Publish area in blue.

The added verbose attribute helps us to get way more detailed information of the command and shows us additional error messages that we can use to figure out what went wrong.

Here we get the error message that the app-specific password is wrong. To solve this, we need to create an app-specific password in the app store. This password provides a secure process for a third-party app to connect with Apple Store via our Apple ID. To create this password, you can follow the steps in the apple portal.

After we created our app-specific password, we head back to the configuration of our app in Codemagic. Here we have to update the app-specific password in the field iOS code signing. If you now start a new build, the problem is solved, and your build passes successfully.

The work with the SSH tool was mind-blowing. It helped us to identify the problems and solved them inside of our CI / CD tool. It showed us how vital SSH access to the running build system is if the UI cannot be expressive enough.

Conclusion

I hope that these solutions for our three expensive mistakes will help you in the future to avoid these problems within your build pipeline. Thanks to the integration with Codemagic, we managed to save time, increase our stability and prevent from expensive code freezes.

Please let us know in the comments below, which CI / CD tool you normally use for your projects and what problems you already solved with it.

Step-by-Step guide for Flutter JSON Serialization

FlutterExplained — Tue, 07 Apr 2020 10:58:12 +0000

I published some time ago a video tutorial on how we can create a basic network request. In this post, we want to take a look at how we can improve that solution with Flutter JSON Serialization. With that, we can remove a lot of Strings in our code base.

I also created a video for this article, so feel free to take a look.

General Serialization

Serialization is the process in computer science to convert an object into something that can be saved in a database or be sent via a network request. Today we want to transform a JSON String that we receive from an API and transform it into an instance of an object.

To get our Person information as a String, I will work in the following example with the Random User Generator. This can generate random user information and provides us with an API to receive a JSON String.

Basic Network Request - Example App

With the help of the RandomUserAPI, I created an application that shows us a list of users as soon as we open the app. We create this Application together in the video for a basic network request. In the video, we use the manual approach for Flutter JSON Serialization, and with this blog post, we changed that to a more automated process.

If you search the source code for this project and this article please you will find everything here.

Manual Flutter JSON Serialization

To get a better understanding of why we should prefer automatic Flutter JSON Serialization, we have to take a step backwards. For that, we first take a look at how the manual serialization works precisely.

In the code snippet above, we created a new person object that we receive from our API. As you probably already have seen, we have to write all the key strings into the class and pollute our class with API information. Additionally, we come into the trap that if we want to add or remove an attribute, we have to change it all over.

That makes the maintainability pretty hard. Especially if the API changes and we have to create it from scratch. That would lead to a lot of searches and replacements, and we will lose all IDE supports.

Benefits

No boilerplate surrounding the solution
There is no setup required, so you can start directly accessing the parameters

Disadvantages

You have to write every line yourself
Typos can happen and reduce the stability of your application
For every new Field that you want to add, delete or modify we have to modify the code in the model
Higher maintenance costs especially for larger projects or with changing API´s

Generated Serialization

Now that we understand the issues with self-written serialisation let's have a look at generated Flutter JSON Serialization. There is at the moment not a built-in solution in the Flutter framework, but there are plenty of perfect packages on pub.dev for this problem. In this article, we will have a closer look at the json_serializable package.

The package works powerfully with the build_runner package and allows us to generate the "fromJSON" and "toJSON" functions, without writing all keys of the JSON. We only have to set up our models correctly, annotate them accurately and provide two functions inside. But enough of the words, we want to see some code.

Dependencies

Before we can begin to work with the json_serializable package, we have to add first some dependencies into our project.

The json_annotation is the only dependency that actually has to be inside of our project. The build_runner and json_serializable are just development dependencies and will not be part of the final bundle.

Modify the model

Line 1: With the part 'person_model.g.dart' we give the PersonModel class the possibility to access the methods inside of the person_model.g.dart file. The file will be generated later from the built_runner.

Line 3: The @JsonSerializable() annotation tells the build_runner that this class has to be concerned for the generation of a new file and creation of a serialization.

Line 5 + 8: For objects inside of our JSON we have to create their representing Model classes for NameModel and PictureModel. The new models will also be annotated with @JsonSerializable() and will also get the two new methods from line 12 and 14.

Line 12: The new factory constructor fromJson is close to our old method. But instead of creating a new Instance of the PersonModel, we call a method _$PersonModelFromJson(json). This method will be generated later with the help of built_runner.

Line 14: The toJson method returns as expected a Json (in Dart a Map between String and dynamic). To receive the map we call the generated function _$PersonModelToJson(this), and pass the current instance inside.

Unleash the power of the built_runner

After we have successfully created our model with the necessary annotations and functions, we are ready to go for the built_runner script. We open our project in the terminal and execute one of the following commands.

// Inside of Flutter projects
// Generates the generate files once
flutter pub run build_runner build

// Watches the model files and generates on each change
flutter pub run build_runner watch

// Inside of Dart projects
// Generates the generate files once
pub run build_runner build

// Watches the model files and generates on each change
pub run build_runner watch

For the case that you have a regular dart project, I also added the commands for the consistent Dart packages creation. This command will create for you the additional *.g.dart files. These files can be inserted into .gitignore, as everyone in the team can execute this command.

Let us have a more in-depth look into the generated file from the serialisation. Here you can see the two functions that we call in the fromJson and toJson of the partial class.

Here are all the strings that we had to create beforehand inside of these methods. Thanks to built_runner they getting now generated for us. If you take a look at line 18, you can see that even the child models are generated correctly. If we now change something in our class and execute once more the build runner (or let it watch), then we will see how it gets added to the list automatically.

Benefits

Modifications to the class are instantaneously reflected
Lower maintenance due to less written code
Types are directly set via the attributes
No magic happens, the generated files are in the project

Disadvantages

Initial setup is increased
There is some boilerplate involved
You have to make sure everyone on the team is aware of the build_runner function (possible solution would be a script or a good readme.md file)
Generated files could distract from the real model files

Packages for Flutter JSON Serialization

There are several other packages that you can use for generated JSON Serialization.

built_value built_collection

The built_value or built_collection can handle JSON Serialization in a very similar way as we did in json_serializable. But add beneficial functions like immutability, comparability and other quality of life functions.

dart_json

The dart_json has the benefit that it is absolutely dependency less. If you search for a solution with as few dependencies as possible this package is your best bet.

JSON Web parser

There is some JSON Web parser that creates out of your JSON a valid dart model for you. You can copy a JSON into the left side and copy the model on the right side into your application.

Conclusion

JSON Serialization is a crucial topic, primarily if you work with a lot of external requests and different API´s that are changing their contracts from time to time. These should lead to more productivity so that we can implement significant features easier.

I made a poll on twitter to see which framework is the most used at the moment, but it seems it is pretty close together. My recommendation is to take a look at each package/solution and then use which one fits your needs best.

Setup a Flutter Web Project on GitHub Pages

FlutterExplained — Thu, 13 Feb 2020 14:01:24 +0000

After my last blog entry, I got asked how I created a web project in Flutter and how I managed to deploy it. So join me on the journey how to create a Flutter web app and implement the whole thing on GitHub Pages.

Flutter Channels

To enable flutter web, you have to set up your Flutter CLI properly, and after that, you have to make sure you are on the right channel. Today when I write this post, Flutter web is still in beta, so we have to select a branch that supports beta features.

>> flutter channel
Flutter channels:
*  master   
   dev
*  beta   
   stable

The master channel is the current tip of development. It contains the newest changes in the framework, but it is also vulnerable to breaking changes. So that means in the worst case, something is going wrong. The beta channel is a code selection of the flutter team once a month to a branch that contains the newest released features. It is selected and more stable. So if you want to try around, this would be the channel to go.

For more information about the channels in Flutter, take a look here.

>> flutter channel beta
# To download the Flutter SDK execute flutter doctor

>> flutter doctor

Enable Flutter Web

After we set the correct channel and downloaded the new version of flutter, we have to enable the web development model.

>> flutter config --enable-web
Setting 
   "enable-web" value to "true".

>> flutter config Settings:  enable-web: true

Now we are ready to go. Next, we have to create a basic Flutter project.

>> flutter create ./project-name

Flutter create will create all the relevant folders for us. If we open up that project, we should see now the folder "web" inside of the project.

The last step is to run the app. So go into the project folder and run flutter devices. We should see now chrome and Web Server as a choice.

>> cd ./project-name
>> flutter devices
Chrome     • chrome     • web-javascript • Google Chrome 80.0.3987.87
Web Server • web-server • web-javascript • Flutter Tools

>> flutter run -d chrome
# Should startup your web dev server.

After the flutter run -d chrome command, the chrome browser will start up and reveal the Flutter app.

Perfect, we did it!

Deploy on GitHub

Before we can deploy, we have to create a new repository in GitHub and to use it as GitHub pages, it needs to have a specific naming convention.

Template: :: GitHub-UserName ::.github.io
Example: md-weber.github.io

Now we can create anything that we want in our Flutter app. If we are ready to go, we have to build the app.

>> flutter build web --releaseCompiling 
lib/main.dart for the Web...                              1.6s

After that, your project will contain a build/web folder. This folder contains all the files that you will need to upload to your GitHub Repository. Open a terminal and switch to the folder and push it into your repository.

If you are new to GitHub and Git, this Guide could help you.

>> cd ./build/web

# The following are the steps that I took. They could vary from project to project. 
>> git init
>> git remote add origin 
>> git add .
>> git commit -m "Init Flutter web project"
>> git push

After the push, GitHub will take care of the rest. It immediately creates for you an environment and pushes your changes to the website.

Inside of your GitHub repository, you will find a new Tab called environments. In this tab, you can see how far your deployment process is.

Now you can navigate to https://::username::.github.io or my example https://md-weber.github.io/ to see your webpage.

If you get at that stage a 404 error, please try to add the /index.html to your path and now you should see your very first Flutter Web App.

Thank you for reading!

My Flutter Journey

FlutterExplained — Mon, 10 Feb 2020 13:06:51 +0000

Frankly, the first time I heard about flutter was at the Google I/O 2019. For me, who always enjoyed working with Hot Reload and hated the way how Xamarin works for mobile apps. I was searching for a hybrid programming pattern for both android and iOS devices. Even though React Native was already out, it has the same foundation. JavaScript, this is not necessarily bad, but it has its own downsides.

I searched for a strongly typed language that shows me errors before I am falling for them. Now after one and a half year I can say that I transformed from an Angular 2+ engineer to a flutter engineer and I even started my own Youtube Channel with the topic FlutterExplained.

First steps

I started by creating some smaller prototypes. Without knowing the Dart Language, I wanted to create my first web app, which I did with the help of Chingu. Chingu is a platform where you collaborate with other members of a community to create a new project.

The first time I used Flutter I used it in a Web Project and developed the backend with Aqueduct. Aqueduct is a framework in Dart, with that you are able to create a scalable backend. That was a fantastic time, learning Heroku added some CI/CD with Github Actions and was able in two weeks to create a web journal full out of Flutter.

It was far from perfect but jeez I was so proud of it. I wrote articles and showed it in the community, and they liked it very much. That gave me the drive to work harder on my Flutter skills. At the end of 2019, I finally quitted my Freelance contract and started working full time on Flutter.

Starting with my Flutter Journey

I wanted to enhance my Flutter knowledge, I completed a certificate on Udemy from the "The Complete 2020 Flutter Development Bootcamp with Dart". I was glad that I have done it, just to see all things once more together and understand more of the core concepts.

After that, I tried to replenish my social media channels. My Twitter activity was not existent and my old youtube channel with around 20 subscribers was not worth a lot. Additionally, I had some ideas in my mind that I wanted to realise. Creating a world travel companion and even an electric calculator (which is currently in Alpha). That was the start of my journey.

First, I developed the electrical calculator to see if I can manage to create an app in one week, and well thanks to Flutter I did! There are some improvements that I have to do, but it will be released in the next weeks. Also, I started with my youtube channel and got till now 400 views on a "MediaQuery and LayoutBuilder" Video, which I used to create a better user experience in my app.

via Giphy

This is super exciting and I am thrilled that it works like that. This motivates me to improve myself even further so that I can explain everyone, even better the pros and cons of Dart and Flutter Development.

Advantages

I have never learned that much in such a short amount of time. Also for the videos that I prepare, I have to continually improve myself. Learning to cut videos, add effects, creating better boilerplates, learning flutter details and dart packages. Additionally, my partner and me are working to setup up our own startup which takes time to prepare pitches and talk to investors.

My Github Repository explodes thanks to all the commits and if you compare it to 2014 when I draw little pictures in my timeline, it is a dramatic increase.

Furthermore, I found a way into the flutter community and had the opportunity to talk with people who have the same interest as me. To be part of this new and interactive community is just amazing and the people encourage you to be a better developer in every aspect.

Downsides

Currently, I am living from my hard work of last year, and there are less till no projects for Flutter Development in Germany. So my clear goal to earn money with Flutter is to create my own products, services and apps. Also, my Youtube Channel is one of my critical hopes for income. But there are a lot of barriers and if you think you can earn money with BuyMeACoffee ... well, think again.

via Giphy

Future perspective and Goals for 2020

I still have to learn a lot about BloC pattern, state management and advanced API handling with built_value and built_collection, but that does not keep me away from working further with this great technology.

I would say there was never a technology stack that cared so much about the needs and desires of their developers. The users love the material design and flexibility. Designers see their creation coming alive in no time. The community seems to be still small but is one of the best groups I have ever worked with. All these things combined make me love Flutter.

My goal for this year is to earn a living from Flutter development. The dream would be to go full time on youtube and earn my money as a flutter tutor and speaker. Additionally, I want to publish at least two apps this year.

Thank you for reading so far, please feel free to share your journey with us. I would love to hear more about it.