For the development of our application, we will use Flutter to create our Web-based dashboard and a Notion database to manage persistence and save the list of our books. The final result can be found here: My Reading List

The code for the application is available in this repo on GitHub: myreadings-flutter licensed Apache 2.0.

Notion Database

A Notion database is nothing more than a table that can have columns characterizing the data and can be sorted according to different sorting criteria. For this project, the columns that have been created have this meaning:

• Finished: indicates whether or not the book has been completed

• Cover: link to the image of the book cover taken from Amazon

• Title: title of the book, in my case in Italian

• Author: author(s) of the book. In this case, the value is put directly into the cell and there is no relation to external master tables

• Date: the date on which the book was finished and which is used later for sorting

• Progress: number representing the percentage progress of pages read compared to total pages read

• Link: sponsored link to Amazon

In order to access our Notion database from the outside via the API provided we must first create an Integration to which we must give read privileges to our database. Once the application is created we will be given a secret in the form secret_XXX which we must use to authenticate ourselves in our calls to the Notion API. Following the documentation, to access a Notion database via the API the call to make is this:

curl --location 'https://api.notion.com/v1/databases/${NOTION_DB}/query' \
--header 'Authorization: Bearer ${NOTION_SECRET}' \
--header 'Content-Type: application/json' \
--header 'Notion-Version: 2022-06-28' \
--data '{
    "page_size": 100,
    "sorts": [
        ...
    ]
}'

Where two variables are present:

• NOTION_DB: which can be found in the URL of the page that corresponds to the database

• NOTION_SECRET: is returned to us when we have created the integration to use the API

In my case, I also set up a particular sorting in which the sorts array where the call, as stated in the documentation for Sort database entries, is made like this:

"sorts": [
  {
    "property": "Finished",
    "direction": "ascending"
  },
  {
    "property": "Progress",
    "direction": "descending"
  },
  {
    "property": "Date",
    "direction": "descending"
  }
]

Because I want the books I haven't finished yet to be there first and then the ones that are completed, the ones that are being read to be sorted by the progress field, and finally the ones that have been read I want to have sorted from the one I finished most recently to the one I read first.

This way I can modify the Notion database as I want, adding books, editing information, and automatically the results will be displayed within the dashboard.

Flutter Web App

The Flutter application is very simple because it only cares to make a call to the Notion API via the http package and displays the results in a grid, with the help of the very useful flutter_staggered_grid_view package (about which I have already done an article here). Other packages that were used in the project are:

• riverpod to manage the application state and HTTP call via a provider and its repository

• go_router for navigation and routing

• percent_indicator for the loading bar indicating progress in reading

• super_banners for the banner above the card for the status of planned and read

• url_launcher for opening the link to the Amazon page upon clicking the button

The end result is as shown in the figure:

Insights

As reported in these two discussions on StackOverflow: Notion API, Vanilla JS, Fetch does not work [duplicate] and Can I use fetch to call the Notion API?, it is not possible to call the Notion API directly from a web page due to a problem with CORS; to solve this problem, a Cloudflare Worker was used that acts as middleware between the web page and the Notion API allowing for a result that then returns to the web page.

To improve the development experience, a much-simplified version of CI/CD has been implemented that allows each push on the main branch of the repository to automatically start a build on Netlify that deploy the web app directly to myreadings.albertobonacina.com

The architecture is in the figure and more details on configurations on environment variables, code for deployment, and release can be found directly in the repository on GitHub:

Conclusions

The final result can be viewed on this webpage: myreadings.albertobonacina.com and all the code can be found in this repo on GitHub: myreadings-flutter

Code strong, Alberto

There are several techniques to manage users' preferences and allow them to choose dark or light themes, which can be considered a feature that all applications should have, and accent color to change the application's theme. This last feature is not so common because often colors inside the application are imposed by the brand or recently they are increasingly using the system theme as described by the Material You guidelines on Android and which is mainly based on this aspect:

custom palettes that emphasize expression and accessibility are algorithmically generated based on your brand or—starting with Pixel—an individual’s wallpaper

However, wanting to give default choices to the user we will see in this article how to set up an application so that it is easy for the user to change preferences and see in real time how the theme of the application changes.

The final application is this and allows you to choose whether to use the dark or light theme and set the accent color with which all the colors related to the theme will be created:

Main aspects and implementation

The only essential dependency that we will need in this project will be Riverpod which will handle the application state and the theme and accent color information so in our pubspec.yaml we are going to add the flutter_riverpod dependency:

dependencies:
  ...
  flutter_riverpod: ^2.3.6

At this point, we wrap the whole application in the ProviderScope to make Riverpod manage the application state:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(
    ProviderScope(
      child: App(),
    ),
  );
}

To read and update the status of the theme and accent color, the most important part of Riverpod is used: providers. Providers are objects that contain within them a state and allow this state to be read and modified. In particular, in this application it was sufficient to use a StateProvider since the information that needs to be managed is "simple": Brightness and Color. So I create a theme_provider.dart that will contain two providers that will manage the dark and light theme and accent color of the application:

final isDarkModeProvider = StateProvider<Brightness>((ref) 
                               => Brightness.light);

final accentColorProvider = StateProvider<Color>((ref) 
                               => Colors.indigo);

To manage the change of accent color, the custom widget was created AccentColorButton whose basic parts are:

Widget build(BuildContext context, WidgetRef ref) {
    //reference to the accent color provider
    final acProvider = ref.watch(accentColorProvider);
    double size = 32;

    return InkWell(
      //On tap I update the provider value by changing its status 
      //to the new color selected
      onTap: () => ref.read(accentColorProvider.notifier).update((state) => color),
      child: Container(
        decoration: BoxDecoration(
          border: Border.all(
            ...
            //I update the color of the button's border 
            //by making it color if that button has been clicked
            color: acProvider == color ? color : Colors.transparent,
          ),
          ...
        ),
        ...
      ),
    );
  }

An entirely similar argument can be made for the ThemeButton widget that takes care of reading and updating the status of the brightnessProvider.

To update the entire style of the application, it is then sufficient to add in the MaterialApp the reference to the two providers:

Widget build(BuildContext context, WidgetRef ref) {
  return MaterialApp.router(
    ...
    theme: ThemeData(
      ...
      colorScheme: ColorScheme.fromSeed(
        seedColor: ref.watch(accentColorProvider),
        brightness: ref.watch(brightnessProvider),
      )
    ),
  );
}

Conclusions

These customizations are usually added in the settings section of the app to allow the user to customize their user experience, but in this article, we have placed them directly on the home page to give them more importance.

In this GitHub repository, you can find the source code of the application developed for this article: theme-accent-color-switch-flutter.

Code strong, Alberto

If you've got an app that syncs or gets information from a third-party service you must call some API from your code and it is often tempting to write endpoints directly within our HTTP calls, more or less like this:

//Worst case
Future<MyClass> callEndPoint(int id) async {
    var response = await http.get(Uri.parse("https://myendpointurl/myclass/$id"));
    ...
}

//not that much worse
Future<MyClass> callEndPoint(int id) async {
    var response = await     http.get(Uri.parse("${Env.BASE_URL}/myclass/$id"));
    ...
}

but it is not good practice to hardcode endpoints in all calls, and it is a tad better to manage an environment variable or constant that defines our BASE_URL for calls.

My solution

The solution I have adopted for some time in all my projects is to create an ApiEndPoint class where I define all my endpoints and the parameters I need to manage. So for example to implement calls to the Star Wars API I can do it this way:

class ApiEndPoint {

  late String FILM_ALL;
  late String FILM_SINGLE;

  ApiEndPoint({int? id}) {

    //Value added for simplicity but it is always better 
    //  to add it in a configuration file
    String baseUrlPath = 'https://swapi.dev/api';

    FILM_ALL = '$baseUrlPath/films/';
    FILM_SINGLE = '$baseUrlPath/films/$id';
  }
}

That way when I need to call the endpoint to get the list of movies I just type in:

Future<List<Film>> getAllFilms() async {
  var response = await http.get(
    Uri.parse(ApiEndPoint().FILM_ALL),
  );
  //...
}

And if this endpoint requires input parameters, such as the endpoint to get the information about a single movie, simply write:

Future<Film> getSingleFilm(int idFilm) async {
  var response = await http.get(
    Uri.parse(ApiEndPoint(id: idFilm).FILM_SINGLE),
  );
  //...
}

Easy isn't it?

I find this setup useful and with the following advantages:

• I have a single class with the responsibility of managing my EndPoints and organizing the paths as required by the API;

• I can easily pass input parameters without worrying about URL formatting;

• In my repositories and in my HTTP calls I can tell right away what API it is without going to the URL to figure it out because I have made it explicit in the attributes of my ApiEndPoint class;

• In the most extreme case, I can switch to another API without having to change my HTTP calls but only by changing the URLs within the ApiEndPoint class;

Code strong, Alberto

Cover Photo by Maria Orlova: Corner Of Aged House Near Direction Post In Town

In an application that communicates with external services, that needs to authenticate via API key or to configure particular settings we must set environment variables that must be kept as hidden as possible, especially those related to API keys, but rather conveniently to be used in our Flutter applications.

For all this, we are helped by the valid ENVied package that lets you create a convenient Dart class that maps the .env file. To install it we can add it to the pubspec.yaml file along with envied_generator and build_runner for the build step and generation of the Dart class:

dependencies:
  ...
  envied: ^0.3.0

dev_dependencies:
  ...
  envied_generator: ^0.3.0
  build_runner: ^2.3.3

Now we can create an .env file inside our project where we can add all our environment variables like this:

GREETINGS="Hello world!"
MY_NAME="Alberto"

Now we have to create a env.dart file where we can define our constants:

import 'package:envied/envied.dart';

part 'env.g.dart';

//Here you can specify the path to your .env file
//  relative to the project root
@Envied(path: '.env')
abstract class Env {
  //The ofuscate flag lets you make your variables more
  // secure through obfuscation
  @EnviedField(varName: 'GREETINGS', obfuscate: true)
  static final greetings = _Env.greetings;
  @EnviedField(varName: 'MY_NAME', obfuscate: true)
  static final myName = _Env.myName;
}

Now we can do the build step and let ENVied generate the class for us, so let's run:

flutter pub run build_runner build --delete-conflicting-outputs

ENVied will generate a file named env.g.dart alongside env.dart with pretty much this content:

// GENERATED CODE - DO NOT MODIFY BY HAND
part of 'env.dart';
// *****************************************************
// EnviedGenerator
// *****************************************************
class _Env {
  static const List<int> _enviedkeygreetings = [
    3271495377, 3997315090, 436058207, 3553787292, 3538777736,
    955590460, 3819871908, 4039201348, 2424541315, 3686169803,
    1299522498, 1263434759
  ];
  static const List<int> _envieddatagreetings = [
    3271495321, 3997315191, 436058163, 3553787376, 3538777831,
    955590428, 3819871955, 4039201323, 2424541425, 3686169767,
    1299522470, 1263434790
  ];
  static final greetings = String.fromCharCodes(
    List.generate(_envieddatagreetings.length, (i) => i, growable: false)
        .map((i) => _envieddatagreetings[i] ^ _enviedkeygreetings[i])
        .toList(growable: false),
  );
  static const List<int> _enviedkeymyName = [
    3026637516, 1908999005, 3526437322, 2478128297, 2753058997,
    855764648, 1111676782
  ];
  static const List<int> _envieddatamyName = [
    3026637453, 1908998961, 3526437288, 2478128332, 2753059015,
    855764700, 1111676673
  ];
  static final myName = String.fromCharCodes(
    List.generate(_envieddatamyName.length, (i) => i, growable: false)
        .map((i) => _envieddatamyName[i] ^ _enviedkeymyName[i])
        .toList(growable: false),
  );
}

Before proceeding it is good to exclude from version control the .env and env.g.dart files that contain all our variables, to do this simply add to the .gitignore file:

#Envied
*.env
env.g.dart

App Code

At this point, we can create a small example app that shows how to use our environment variables and call them within the code, so create a main.dart file with the following code:

import 'package:flutter/material.dart';

import 'env.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'ENVied Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text("ENVied Demo"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                Env.greetings,
              ),
              Text(
                "Hi, I'm ${Env.myName}",
              ),
            ],
          ),
        ),
      ),
    );
  }
}

As you can see we can call within the code of our app the environment variables we created simply with:

//Import the env class
import 'env.dart';

//Use variables
Env.greetings
Env.myName

The result is something like this:

Conclusions

In this post, we saw how to secure our environment variables through obfuscation, how to exclude them from version control so they are not exposed in our repositories, and how to generate a Dart class that we can access throughout the code to conveniently use our variables. So we have all the requirements to start developing an app with a good degree of security.

Code strong, Alberto

This article is in the series Simple Flutter Apps where I want to show how to code some simple apps in Flutter to help you get started.

What we will build

We are going to create a simple application using the very useful window_manager package with which we can act on the window in which the app is running to do resizing and repositioning. The package supports Windows, macOS and Linux and in this simple example no special control codes have been created, in case we develop the app for other platforms, Android, iOS and Web, it is a good idea to add controls on the execution of the resize code only if the app is running on Desktop.

The dependencies that will help us in the development of the application, are found in the file pubspec.yaml, are:

dependencies:
  ...
  flutter_riverpod: ^2.1.1
  window_manager: ^0.2.8

• flutter_riverpod: library with which the state of the application is maintained, which in this case is the size of the window;

• window_manager: a library that takes care of the window resize through a Size() class to pass the width and height to;

The result looks similar to this:

Let's code

You can find all the code in this GitHub repo simple-flutter-resizewindow and these are the main parts.

enums/windowsize_enum.dart

Enum in its Enhanced version available from Dart 2.7 with which it is possible to assign multiple properties, named or positional arguments and define custom methods and getters. Specifically, within the enum, I defined keys with which to identify the screen size I want to support by specifying the width and height of the window as well as a description. In this way it is possible to find all the necessary information with the use of only this enum:

enum WindowSizeEnum {
  mobilePortrait(400, 890, "Mobile Portrait"),
  mobileLandscape(890, 400, "Mobile Landscape"),
  tabletPortrait(607, 874, "Tablet Portrait"),
  tabletLandscape(874, 607, "Tablet Landscape"),
  desktop(1440, 900, "Desktop");

  const WindowSizeEnum(this.width, this.height, this.description);
  final double width;
  final double height;
  final String description;
}

The article I relied on is How to Use Enhanced Enums with Members in Dart 2.17 on CodeWithAndrea.

provider/windowsize_provider.dart

In this file was defined the class that manages the application state, which is the window size, the provider and the notifier that allows this state to be exposed and modified to the main view from the home_page.dart. The state of the application is based on the WindowSize class, which has a width and a height:

@immutable
class WindowSize {
  const WindowSize({required this.width, required this.height});

  final double width;
  final double height;

  WindowSize copyWith({double? width, double? height}) {
    return WindowSize(
      width: width ?? this.width,
      height: height ?? this.height,
    );
  }
}

this class is then used by a StateNotifier to keep track of the state and change it, with the changeSize method, and then expose it via the state to all widgets that need it:

class WindowSizeNotifier extends StateNotifier<WindowSize> {
  WindowSizeNotifier() : super(const WindowSize(width: 400, height: 890));

  void changeSize(WindowSize windowSize) {
    state = windowSize;
  }
}

finally through a StateNotifierProvider we allow the UI to interact with the WindowSizeNotifier:

final windowSizeProvider =
    StateNotifierProvider<WindowSizeNotifier, WindowSize>((ref) {
  return WindowSizeNotifier();
});

pages/home_page.dart

A PopupMenuButton has been added to the home page to allow the user to quickly change from one window size to another. When one of the options is chosen, the actionChangeWindowSize method is called, which takes care of calling windowManager to change the window size and update the application state:

void actionChangeWindowSize(WindowSizeEnum windowSizeEnum) {
      //Update window size
      windowManager.setSize(
        Size(
          windowSizeEnum.width,
          windowSizeEnum.height,
        ),
      );
      //Read provider and change status
      ref.read(windowSizeProvider.notifier).changeSize(
            WindowSize(
              width: windowSizeEnum.width,
              height: windowSizeEnum.height,
            ),
          );
}

How to improve it

As always there are so many ways to improve a demo application like this, the first ones that come to mind are definitely:

• add control code to check which platform the application is running on and then disable the window resize feature because it could not be executed;

• in the case of a much more complex application with several pages and sections, it might be useful to move the editing part of the window to a settings-related section, which should only be displayed in development and not in production.

You can find all the app code in this GitHub repo: simple-flutter-resizewindow, you can fork, use and modify it as you want, the app uses thein latest Flutter 3.3.10 you can build it on Windows, macOS and Linux.

Code strong, Alberto

Foto di USGS su Unsplash

This year I fully learned the meaning of the quote:

Don't judge a book by its cover

which in my case concerns a programming language that I have always considered over the years to be "old" and uninteresting, but which in the last year, thanks to the help of a colleague who has opened my eyes, I have learned to appreciate and to use more and more: Java.

Preamble

Since university, I have always considered Java as a language to keep away from because, erroneously, I considered it as "old", too "enterprise" and far from what was the Hacker spirit to which I wanted to belong. I always tried not to take any course that included it as a language to use to pass the exam. In the only course that I could not avoid and which required a project with the recommended language Java, I asked the professor to be able to do it with another language, at the time I chose PHP, with which I had a fair amount of work experience and which suited me more.

First approach

A few years after finishing university, for a company I worked for, I developed a couple of native applications for Android at the time when Kotlin had just been announced, but the company still didn't want to use this language. My approach with Java had been to live with it for business needs, I was also starting to study Kotlin on my own to no longer need to use Java to develop applications.

Java FullTime

Currently, I am involved in the maintenance and development of Java applications with Spring and I have been dealing with Java code, not always written by me, for about two years but until the middle of 2022, my relationship has always been one of love/hate with this language.

The lighting

Since mid-2022, on the other hand, everything has changed thanks to the new entry into the team of which I am part of a colleague who has been working with Java for 20 years and who has opened my eyes to a whole series of Frameworks, libraries, patterns that I did not know but they completely and forever changed my opinion of Java and its ecosystem.

They made me change so much that, up until a year ago, I would have done any backend application that provides APIs and interacts with a DB with Node.js, now I wouldn't think about it for a moment and I would do it with one of Spring Boot and Quarkus.

As proof of the fact that I have changed my mind, I recently developed two applications that interact with Telegram Bots, and I made them both with Quarkus, one of them I talked about here: Save Bookmarks to Notion Database with Telegram and Quarkus.

The conversations and articles that I've been reading the most in the last weeks always refer in some way to Java and in particular:

• Vlad Mihalcea: an institution regarding the whole world of persistence and databases in Java;
• Baeldung: if you look for any Java and Spring guide 9 times out of 10 you end up here;
• Amigoscode: a YouTube channel with lots of quality content on Java;
• Giuseppe Scaramuzzino: I learned a lot from his videos on Quarkus;
• Maciej Walkowiak and Dan Vega on Twitter.

Conclusions

This year I learned how I had always had the wrong idea about Java because there had never been anyone who guided me and showed me what good I could find in its ecosystem. I learned how important it is to have a colleague, in this case, a mentor, who can open your eyes and give you another point of view on things because often your first opinion can be wrong and you could miss out on a great opportunity for personal and professional growth. I won't name him because I know he wouldn't want to but when he reads the article he will surely understand that I'm talking about him. I am looking forward to the new challenges that 2023 will bring and its new opportunities to grow.

Code strong, Alberto

Credits: Image by starline on Freepik

Background

For work and in my personal life I use 3 devices:

• Business PC with Ubuntu
• Personal PC with Pop! _OS
• Smartphone with Android

On all these devices when I browse it often happens that I want to save articles, web pages, and guides to read later. I have been using Notion for some time to organize my bookmarks list, in which I created a database where I save my links, add tags, date, and if I have already read them or not. But using 3 different devices I wanted a quick way to save the links directly in Notion without having to open the web or the Android app, create a new line, choose tags, and put a title and a date.

So I thought of creating a simple Telegram Bot to which I can send a message and it, using the Notion APIs, saves the web page in my database. The Bot is powered by a Quarkus application.

Let's see how I did it!

Application

The source code of the application is available in this repo on GitHub: Telegram2Notion Quarkus released under MIT license.

Once configured, the result is what you can see in this video:

Here is some information about the project:

• to interact with the telegram bot I used the library: Telegram Bots which allows you to interact with a Telegram bot from a Java application;
• to interact with the Notion API I used the documentation here: Introduction and the Postman collection;
• to create the app documentation I used Docs.page by Invertase;
• the app documentation is available at Telegram2Notion Quarkus Docs;
• I used jsoup: Java HTML Parser to obtain information on the webpage sent to the bot;
• to get information on the status of the app I have enabled Quarkus SmallRye Health

The general operation is schematized as follows:

Future

You can always follow the development of the application by referring to the repo on GitHub: Telegram2Notion Quarkus and on the issues page, currently the next feature to be implemented is the possibility to specify a custom title for the link you want to save (#5).

Bye, Alberto

Wassword is a password generator and as said in its description:

With Wassword you can easily generate complex passwords and use them for your online accounts. Choose length and chars to be used and generate your passwords safely. Everything works offline and nothing is shared, your safety comes first.

so with Wassword you can create passwords with Numbers, Lower case letters, Upper case letters, and Symbols from 8 to 32 chars. Once you created your password you can copy it and use with your account, share it and there's no limit on how many password you can create.

These are some screenshots that show its functionality:

Wassword is Open Source with MIT License and you can find the repo on GitHub with all the source code: wassword-flutter.

Project Structure

Let's dive a little into the project structure to explain how I organize all the code and what packages I used. To start these are my dependencies:

dependencies:
  ...
  bloc: ^7.2.1
  equatable: ^2.0.3
  flutter_bloc: ^7.3.0
  fluttertoast: ^8.0.8
  google_fonts: ^2.1.0
  share_plus: ^2.1.4
  url_launcher: ^6.0.10

dev_dependencies:
  ...
  flutter_launcher_icons: ^0.9.2
  flutter_native_splash: ^1.2.3

I use the bloc package to manage the state of the app and I choose to go with one Cubit for its simplicity because my state is the password that I want to show and all the password characteristics like number of chars, numbers and so on.

The other packages are pretty standard: customize the font, share generated password, open links, create app icon and create splash screen.

This is the structure that I used to manage the code in the lib folder and keep the same stuff in the same place:

• cubit: in this folder, I put the cubit and the cubit state that lets me manage password characteristics. To change the state I create one method for every characteristic that I want to change, so: changeLowercase, changeUppercase and so on;
• pages: folder where I put the code for the two pages of the application, both stateless widget, one for the main page with the password creation and one for the about page where I put some information about myself and my social account;
• styles: folder where I create variables to theme the app and to make the design consistent;
• ui: folder where I put some reusable UI components across the app like buttons and rows;
• utils: in this folder, there's the function that generates the password based on the selected options.

Takeaways

There are many takeaways from this app but two of them that I want to recall are related to the password generator and the slider to set the number of chars in the password.

To generate the password I used the generatePassword method inside password_generator.dart file in lib/utils

/*
 * @desc Function to generate passwords based on some criteria
 * @param bool isWithLetters: password must contain letters
 * @param bool isWithUppercase: password must contain uppercase letters
 * @param bool isWithNumbers: password must contain numbers
 * @param bool isWithSpecial: password must contain special chars
 * @param int _numberCharPassword: password length
 * @return string: new password
 */
String generatePassword(
    {required bool isWithLowercase,
    required bool isWithUppercase,
    required bool isWithNumbers,
    required bool isWithSpecial,
    required int numberCharPassword}) {
  String _lowerCaseLetters = "abcdefghijklmnopqrstuvwxyz";
  String _upperCaseLetters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  String _numbers = "0123456789";
  String _special = "@#=+!£\$%&?[](){}-_";

  String _allowedChars = "";

  _allowedChars += (isWithLowercase ? _lowerCaseLetters : '');
  _allowedChars += (isWithUppercase ? _upperCaseLetters : '');
  _allowedChars += (isWithNumbers ? _numbers : '');
  _allowedChars += (isWithSpecial ? _special : '');

  if (_allowedChars.length == 0) {
    return '';
  }

  //If I can create a password because I've got some char to use
  int i = 0;
  String _result = "";
  while (i < numberCharPassword) {
    int randomInt = Random.secure().nextInt(_allowedChars.length);
    _result += _allowedChars[randomInt];
    i++;
  }

  return _result;
}

To style the Slider I use this wonderful article on Medium: Flutter: Sliders DeMystified where I use a combination of SliderTheme and SliderComponentShape to integrate the slider inside the app's theme. You can find all the code in the pages/home_page.dart and ui/custom_slider_thumb_circle.dart.

Download and Use

You can download Wassword from the Play Store: Wassword - Wonderful Password Generator or you can use it on the web at this link: Wassword Web, the web version is not optimized for the desktop but it has got all the functionalities of the Android version.

Bye, Alberto

I look around my needs and I started working on a project to solve one of my problems, that I think other developers on Hashnode also have:

planning posts scheduling and when to share them on other platforms like Twitter, Reddit, Facebook, and LinkedIn

Obviously, I want to create something in Flutter and with the HarperDB API, I connected my HarperDB instance with very simple steps.

Architecture & Functionality

The architecture of the app is very simple, on the database side, there is only one table to store all the posts' schedule info like title, the text of the post on social media, platform, and date of the share. On HarperDB I create a schedule schema and a post table:

The JSON that represents the single post schedule is this one:

There's my Flutter app on the front-end side that lets you retrieve, create, update, and delete all the posts that you have to schedule. By writing the app in Flutter 2.2 you could run the app natively on Android, iOS, and Web. The result is pretty much like this:

The posts are ordered by date so you could immediately see what's the schedule. In the app, all the CRUD operations are made in pure SQL as described in the documentation: SQL Operations.

To connect to HarperDB from our app, and the procedure is similar for all other languages and frameworks, you have to use the instance name and the API key, remember to put them in a .env file, and keep away from git by including it on .gitignore. For more information about that you could read these articles:

• Create a serverless book library app with HarperDB and Gatsbyjs by Tapas Adhikary
• Build A REST API With HarperDB and FastifyJS by Catalin Pit
• HarperDB Instance w/ React by Piyush Sinha
• Curate Top Programming Blogs with React and HarperDB by Victoria Lo

Code info

As said earlier the app is built with Flutter 2.2 with support for Android, iOS, and Web, and you can find all the code in this GitHub repo: harperdb-hashnode-hackathon with MIT License. The project structure is:

• models: models to map the table on HarperDB to Dart Class;
• pages: screens inside the app. The app has only two screens one for the list of the post schedule and one for the single post. I use the same page for the creation and update of a post;
• repository/schedule_repository.dart: main class to interact with HarperDB API;
• ui/post_row.dart: personalization of the row of the single post inside the list in the home_page.

To make the project work you need to create a .env file in the project root, that was not added to version control with git, like this:

HARPER_DB_SECRET_KEY='your-secret-key'
HARPER_DB_URL='https://your-istance-name.harperdbcloud.com'

When you run the app, on the homepage you could find the list of all the posts schedule with information on the day, platform to share, title, text, and link to the post. By tapping on a single line you go to the detail page where it's possible to modify all the info, save them to the DB or delete the post scheduling. On the homepage, if you tap on the violet FAB in the bottom right you could create a new post scheduling, and with the refresh button on the top right on the homepage, you sync all the info on the HarperDB with the App.

Models

The post_model.dart is responsible for the translation between the JSON that represents the post schedule and the Dart class, in that class there is the definition of all the fields and the Post.fromJson function converts the JSON from HarperDB in the Post Class used inside the app:

class Post {
  String id;
  String link;
  String platform;
  DateTime postDate;
  String text;
  String title;

  Post({
    required this.id,
    required this.link,
    required this.platform,
    required this.postDate,
    required this.text,
    required this.title,
  });

  factory Post.fromJson(Map<String, dynamic> json) {
    return new Post(
      id: json['id'] as String,
      link: json['link'] as String,
      platform: json['platform'] as String,
      postDate: DateTime.parse(json['post_date']),
      text: json['text'] as String,
      title: json['title'] as String,
    );
  }
}

HarperDB API

All the code to interact with the HarperDB API is in the schedule_repository.dart Class where I create an http.Client and with the flutter_dotenv package I make calls to HarperDB with my HARPER_DB_SECRET_KEY and HARPER_DB_URL. All the functions that correspond to the CRUD (Create, Read, Update, Delete) operations return a Future because are asynchronous and the structure is:

//All calls to HarperDB have been created asynchronously because it is not possible 
//  to know when a response will arrive which is therefore defined as a Future
Future<responseType> actionToPerform(variable) async {
    try {
        //Create a POST request with the http Client
        final response = await _client.post(
            //Set the URL to call
            Uri.parse('${dotenv.env['HARPER_DB_URL']}'), 
            //Set headers like the authentication and the content-type
            headers: {
                HttpHeaders.authorizationHeader:
                    'Basic ${dotenv.env['HARPER_DB_SECRET_KEY']}',
                HttpHeaders.contentTypeHeader: 'application/json'
            },
            //Encode the JSON to send to HarperDB
            body: json.encode({
                //Operation Mode to intercat with HarperDB
                "operation": "sql",
                //Query to execute
                "SQL": "...."
            }),
        );
        //Handle the responde from HarperDB
        if (response.statusCode == 200) {
            return ok_result;
        } else {
            return ko_result;
        }
    } catch (_) {
        return ko_result;
    }
}

Packages

To simplify the development of some functionality, the following packages have been included in the project:

• datetime_picker_formfield: used to show a datetime picker on the single schedule post to set date and time where to publish the post or share it on social media;
• flutter_dotenv: used to load configuration variable from a .env file;
• flutter_styled_toast: used to show a simple toast when the app completes actions like save, update, delete posts;
• google_fonts: used to customize the look and feel of the app with custom fonts;
• http: used to make POST requests to the HarperDB API;
• intl: used to localize and format dates;
• url_strategy: used to set the web URL strategy, in particular, used to remove the # in the URL of the web app.

Improvements

Obviously, there's a lot of improvement that can be made, I share here some ideas that came to my mind during development, or that were suggested to me, that it could be included in future versions of the application, which for now is to be considered as a proof of concept of what is possible with HarperDB and Flutter:

• more customization on the UI (like dark mode 😉)
• better management of app refreshes when switching from one screen to another. Now you have to tap on the update button on the top left of the home page to sync information between HarperDB and the app
• implement a single post registry and subsequent scheduling by choosing only the date and platform. In this way, you don' have to put the title, link on all the scheduling posts because the registry is unique
• allow, through a login, multiple users to create their own personal data and then manage their scheduling
• publish the application on the Android, iOS stores and make it publicly available on the internet. All this is possible directly with Flutter making the application truly multi-platform and available to everyone on any device

An improvement that can be made and that is not directly linked to this app, in particular, is the possibility of developing a package for Flutter to be published on pub.dev with which to interface directly with the HarperDB API in a simpler way and cover the most possible of API calls in the documentation; in this regard, we could certainly establish the discussion directly with the developers of HarperDB to understand if there is interest.

Bye, Alberto

What we will build

We build a simple flutter app to implement a responsive GridView using an awesome package by Romain Rastel @lets4r called flutter_staggered_grid_view, a staggered grid view which supports multiple columns with rows of varying sizes. By making this app we will learn:

• display different layouts based on the screen size;
• use a very well know package in the Flutter world;
• make a simple card UI layout like Pinterest.

The final result in different screen sizes will be:

Let's code

First of all, we have to import the flutter_staggered_grid_view package so we have to include it in the pubspec.yaml

dependencies:
  ...
  flutter_staggered_grid_view: ^0.4.0

After that to implement a responsive layout we have to use a LayoutBuilder that builds a widget tree that depends on the parent widget's size, so we can define a set of widths, and based on them we can change the UI. Let's first define the widths

const kMobileBreakpoint = 576;
const kTabletBreakpoint = 1024;
const kDesktopBreakPoint = 1366;

then we can set up our LayoutBuilder like this

LayoutBuilder(
  builder: (context, dimens) {
    if (dimens.maxWidth <= kMobileBreakpoint) {
      return CustomGridView(columnRatio: 6,);
    } else if (dimens.maxWidth > kMobileBreakpoint &&
        dimens.maxWidth <= kTabletBreakpoint) {
      return CustomGridView(columnRatio: 4,);
    } else if (dimens.maxWidth > kTabletBreakpoint &&
        dimens.maxWidth <= kDesktopBreakPoint) {
      return CustomGridView(columnRatio: 3,);
    } else {
      return CustomGridView(columnRatio: 2);
    }
  },
)

in this way, if the width of the screen is <= kMobileBreakpoint we'll show the CustomGridView widget with a columnRatio of 6 and so on.... but what does the columnRatio variable mean?

This is a way I found to make the UI responsive based on the characteristics of the flutter_staggered_grid_view library and the way many web libraries think for defining the number of columns based on the screen size, the widget I used is StaggeredGridView.countBuilder which allows you to define two properties to structure the layout and the number of columns it has, in particular, the two properties have more or less this meaning:

• crossAxisCount: the number of columns in the cross axis. If the scroll is from top to bottom, and vice versa (vertical scroll) the cross axis is the horizonal one. The axis in which the scroll movement takes place is called main axis, therefore the perpendicular one is called cross axis;
• StaggeredTile.fit(columnRatio): number of columns that content can expand to be represented in the layout.

By taking advantage of these two properties, the layout can be organized in this way according to the size of the screen

Once we have organized the layout of the columns, to simulate a Pinterest card, we just need to create a layout and for simplicity put a random color in the upper part based on a previously set color array

Container(
  decoration: BoxDecoration(
    color: _myColorList[random.nextInt(_myColorList.length)],
    borderRadius: BorderRadius.circular(4),
    boxShadow: const[
      BoxShadow(
        color: Colors.black26,
        offset: Offset(0,2),
        blurRadius: 6
      )
    ]
  ),
  height: random.nextInt(75).toDouble() + 200,
  margin: EdgeInsets.symmetric(horizontal: 6, vertical: 6),
  child: Column(children: [
    Expanded(
      child: Container(),
    ),
    Container(
      color: Colors.white,
      child: ListTile(
        leading: FlutterLogo(),
        title: Text("Card with index $index"),
        subtitle: Text("#card #index$index #flutter"),
      ),
    )
  ]),
)

The result is something like this

How to improve it

You can look inside the code of the flutter_staggered_grid_view library and see other option to experiment with, some hints are:

• Customize the look and feel of the single card;
• Insert an image in the top part of the card, maybe grab it from services like Pexels or Unsplash;
• Manage device orientation on Android and iOS.

You can find the source code in this GitHub repo: simple-flutter-gridview, you can fork, use and modify it as you want, the app uses the latest Flutter 2.2 so it's already with Sound Null Safety, you can build it on Android, iOS and on the Web.

Bye, Alberto

What we will build

We will build a simple Flutter App to show some fake data generated with Faker to simulate a contact list and go into contact details, this is useful to understand some concepts that can be used in Flutter Apps like:

• generate fake data to test UI design
• create a horizontal and vertical scrollview
• explore the useful ListTile widget
• explore simple navigation between screen

The final result will look like this

Home	Details

Let's code

You can find all the code in this GitHub repo simple-flutter-contactlist and these are the main parts:

• lib/models/contact.dart: this is the model that represents all the contact details, for the purpose of this post we will use name, surname, phone, email, address, city, username, avatar;
• lib/ui/contact_row.dart: use of ListTile widget where you can create a simple layout with all the components in the right place;
• lib/pages/singlecontact_page.dart: single page to show all the contact information.

As we did in the previous post we have to create a dart class to represent our Contact

class Contact {
  final String name;
  final String surname;
  final String phone;
  final String email;
  final String address;
  final String city;
  final String username;
  final String avatar;

  Contact(
      {required this.name,
      required this.surname,
      required this.phone,
      required this.email,
      required this.address,
      required this.city,
      required this.username,
      required this.avatar});
}

To create all the fake information about a contact we use Faker

//import library
import 'package:faker/faker.dart';
//initialize it
final _faker = new Faker();

//Create single Contact
Contact _thisPerson = Contact(
    name: _contactFirstName,
    surname: _contactLastName,
    phone: _faker.phoneNumber.us(),
    email: Utils.createEmail(
        _contactFirstName, _contactLastName, _domainName),
    address: _faker.address.streetAddress(),
    city: _faker.address.city(),
    username: Utils.createUsername(
        _contactFirstName, _contactLastName),
    avatar: Utils.createAvatarLink(
        _contactFirstName, _contactLastName));

To maintain consistency between name, surname, email, and username of the random data generated by Faker I created three simple functions that I put in the Utils.dart file

String createEmail(String firstName, String lastName, String domainname){
  return "${lastName.toLowerCase()}.${firstName.toLowerCase()}@$domainname";
}

String createUsername(String firstName, String lastName){
  return "${lastName.toLowerCase()}_${firstName.toLowerCase()}";
}

String createAvatarLink(String firstName, String lastName){
  return "https://eu.ui-avatars.com/api/?name=$firstName+$lastName&background=2f855a&color=fff";
}

With all the informations on the contact, we can now display it in a single row with the ListTile widget that lets you create a row layout with little effort and arranges information in the right way, the main parts are:

ListTile(
    //Action to perform when the user tap on the row
    onTap: 
    //Content to display, in the most case as an icon, on the left
    leading: 
    //Main text widget to display in the row
    title: 
    //Secondary text widget to display in the row
    subtitle: 
    //Content to display, in the most case as an icon, on the right
    trailing: 
);

two examples of ListTile widget in the app are

To perform the navigation between screen I used the Navigator widget to go to and from screens

//In this way I can go into another screen
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SingleContactPage(
      contact: this.contact,
    ),
  ),
);

//In this way I can go back to the previous screen
Navigator.pop(context);

How to improve it

There are lots of improvements that we can do to make our app better, now I can list some of them to give you some inspirations:

• let the user perform a call by tapping on the phone icon in the list of contacts, the url_launcher package can make it happens;
• let the user filter on the contacts list;
• test more layout variation on the ListTile Widget both in the contacts list as well in the detail page;
• define a custom layout for the detail page, on sites like Uplabs, Behance or Pinterest you could find lots of UI Design to improve it.

You can find all the app code in this GitHub repo: simple-flutter-contactlist, you can fork, use and modify it as you want, the app uses the latest Flutter 2.2 so it's already with Sound Null Safety, you can build it on Android, iOS and on the Web.

Bye, Alberto

What we will build

We will build a simple Flutter App to read a list of appointments from a local JSON file and show them in a list, this is useful to understand some concepts that can be used in Flutter Apps like:

• read a file from the local storage
• parse JSON file
• model a JSON file to a list of Dart Classes
• create a list with a FutureBuilder

The final result will look like this

Let's code

You can find all the code in this GitHub repo simple-flutter-timetable and these are the main parts:

• assets/json/timetable.json: file json with the timetable that represent our "store", image that as our DB or API result;
• lib/model/appointment.dart: this is the model that allows us to convert the JSON object into a Dart class;
• lib/pages/home_page.dart: main screen of the app with all the calls to read and parse the JSON;
• lib/ui/appointment.list.dart: listview to read the List of Classes from JSON and display it on screen;

In this post I will only explain the most important parts because if you follow the code in the repo it's pretty easy to understand what it does.

First of all you have to tell Flutter that It can use the timetable.json file and to do that you have to put those lines in the pubspec.yaml file

  assets:
    - assets/json/timetable.json

After that we have to provide a Dart class that represents the information, in our case I create the appointment with this data

{
    "day": "2021-05-24",
    "time": "09:00 -> 11:00",
    "type": "relax",
    "title": "Yoga class"
}

and the Dart class is this one

class Appointment {
  final String day;
  final String time;
  final String type;
  final String title;

  Appointment({required this.day, 
      required this.time, 
      required this.type, 
      required this.title});

  //This is the function that lets you to convert the 
  //  JSON representation of the Appointment in its Dart class
  factory Appointment.fromJson(Map<String, dynamic> json) {
    return new Appointment(
      day: json['day'] as String,
      time: json['time'] as String,
      type: json['type'] as String,
      title: json['title'] as String
    );
  }
}

We can read the file and parse the content with these two functions in the home_page.dart

Future<String> getJsonStringFromFile() async {
    return await DefaultAssetBundle.of(context)
              .loadString('assets/json/timetable.json');
}

List<Appointment> parseJson(String response) {
  final parsed =
      json.decode(response.toString()).cast<Map<String, dynamic>>();
  return parsed.map<Appointment>((json) => new Appointment.fromJson(json)).toList();
}

Note in this case that the function getJsonStringFromFile has been declared async since accessing the memory is an operation that can take some time and therefore the reading of the file is something that will happen in the "near future". To take advantage of the async code and not to "freeze" the UI, a FutureBuilder has also been added, a very useful widget when you need to show a portion of the UI in which data comes from an async, in this way it is possible to provide a placeholder widget while the data arrives, once the data has arrived it is then possible to design the definitive UI

new FutureBuilder(
  future: getJsonStringFromFile(),
  builder: (context, snapshot) {
    if (!snapshot.hasData) {
      //Placeholder widget because the data hasn't arrived yet
      return new Center(
        child: new CircularProgressIndicator(),
      );
    } else {
      List<Appointment> appointments = parseJson(snapshot.data.toString());
      return new AppointmentList(
        appointments: appointments,
      );
    }
  },
),

To customize the UI, the type field in the class was used to show a custom icon in a single row and allow the user to easily distinguish the different types of appointments.

How to improve it

There are lots of improvements that we can do to make our app better, now I can list some of them to give you some inspirations:

• Read JSON file from a custom URL on the internet: in this way you are not limited to the JSON that you have in your local storage, so if you have to update the JSON file you don't have to update the app, but you only have to update the JSON file because the app will read the updated one;
• Add more information on the single appointment like the location, split start and end time, insert a description or some notes on the appointment;
• Create a detail page of the appointment to show all the information;
• Allow the user to filter the contents of the list: for example you can add filters by type of appointment or by date, in case of a very long list of appointments it can be very convenient;
• Customize more the look and feel of the single row, on sites like Uplabs, Behance or Pinterest you could find lots of UI Design to improve it.

You can find all the app code in this GitHub repo: simple-flutter-timetable, you can fork, use and modify it as you want, the app uses the latest Flutter 2.2 so it's already with Sound Null Safety, you can build it on Android, iOS and on the Web.

Bye, Alberto

Do NOT use the same password

The first fundamental advice is not to use the same password for access and login to the sites to which we are registered because if only one of these credentials were stolen they could be used to access not only the site from which they were taken but also to all others. So do not use your child’s birth date or dog’s name as a password and above all do not use it either to access Facebook, to the bank, or maybe to that online site where you bought something years ago that may not have the same security policies as the most structured sites.

USE a password manager

It is a good idea not to use a piece of paper to mark all the passwords we have and keep them somewhere in the house because we could always lose it but use a password manager (more details here) that is a software that allows you to save all the different passwords of yours online accounts securely ready to use. Many of these password managers are available as online services to have them always available and allow you to generate complex passwords and auto-fill login forms securely.

ALWAYS update programs and the operating system

This is as simple as forgotten by many: update programs and the operating system to the latest version available. In this way we will also have all the security updates and bugs will be fixed that could be used against us to steal information from us. This advice applies not only to our PC but also to all mobile devices such as tablets and smartphones, it is strongly recommended to periodically take a ride on the Play Store or the Apple Store to update our apps.

Pay ATTENTION to how much information you post online and with whom you share it

Post as little information online as it could be used against you by exploiting what is called Social engineering), through which the behavior of a person is studied to obtain useful information that can be exploited to cheat. Here is an example: do you know that purchase you posted on Facebook and are awaiting delivery? An attacker could use this information and pretend to be the company that sold it to you saying that there were problems with the payment and that you have to redo it using a special link that will send you by email but not having access to this information will tell you to give it back on the phone... where is the problem? If you take the bait you just let him know your email (and as mentioned before it might not be difficult to guess the password), in case you went further by clicking on the link that sends you and try to make the payment you will have a nice cloned credit card.

USE two-factor authentication

This is perhaps the most advanced method of all but it is the one that takes security to another level. Two-factor authentication is the ability to enable access and log in with SMS/notification/code that is sent to your mobile phone to confirm your identity and that you must enter to log in, often used to access sites and home banking apps. Why is this method so important? If they were to steal your credentials they could not use them to log in because they would not have the code that arrived on the phone... Not to mention the fact that if that happens, you’ll see right away that something’s wrong.

BONUS: use passphrases instead of passwords

A good way to make your password secure is to replace it with a passphrase that is a phrase, duly modified, that is: easy to remember for you, sufficiently long and complex to make vain the efforts to discover it. Here’s an example: consider the phrase

da Londra a Parigi ci sono circa 450 km

and convert it into

fromL0nD0ntoP@risth3r3are@b0ut450km

Do you know how long it takes to discover it? 8 Hundred Quattuordecillion Years.

Bye, Alberto

51% Attack

It is a hypothetical scenario that could occur when 51% of the nodes of a blockchain are under the control of a single entity. In this case, the network consensus would not be distributed enough, because there would be a majority, and the blockchain could be manipulated. The aforementioned entity could arbitrarily block, reverse or duplicate transactions by invalidating the blockchain itself. This attack is as difficult as the blockchain grows in several nodes, values, and usage.

Address

An address in a blockchain is a unique string made up of letters and numbers that identify an account within the blockchain itself. During a transaction, digital assets, often called tokens, are moved between two addresses of the same blockchain.

Altcoin

Altcoins, or "alternative coins", are all cryptocurrencies that were launched after Bitcoin, some examples are for example ETH, LTC, XRP.

Annual Percentage Rate (APR)

An annual percentage rate (APR) on a loan is the amount of interest a borrower has to pay on the loan he has taken out. APR is expressed as an annual percentage of the outstanding loan balance and represents the annual cost of the loan.

Annual Percentage Yield (APY)

The annual percentage yield (APY) refers to the rate of return earned on a deposit in a year, therefore it translates into the sum that is earned by a person who has deposited funds and left to mature for one year. APY takes into account compound interest, which is calculated periodically and added to the balance.

Bitcoin & BTC

Bitcoin is the first and best-known blockchain worldwide and has its own native cryptocurrency (bitcoin). It is, historically, the first blockchain with associated cryptocurrency, and has always been a dominant presence within the cryptocurrency ecosystem. Bitcoin was founded in 2009, by Satoshi Nakamoto, and is based on the Proof of Work algorithm, a technology for reaching consensus on a decentralized network.

Bitcoin (BTC) is a cryptocurrency that can be transmitted between accounts on the Bitcoin blockchain by exchanging assets between two addresses.

The difference between Bitcoin as a blockchain and bitcoin as a cryptocurrency is in the initial B which in the first case is capitalized, in the second it is lowercase.

Block

Within a blockchain, a block is a single entity that makes up a piece of the chain. Inside, all the information on the transactions carried out (the exchange of tokens/coins between addresses of the blockchain) during a predefined time interval depends on the blockchain itself. The blocks are hung one after the other at the end of the chain, which represents the public ledger known as the blockchain.

A Bitcoin block contains information on the date, time, and amount of transactions, including all information about the addresses involved and the amount of currency they exchanged. The blocks must all be confirmed by the nodes of the network through a process of consent, once the block is confirmed it is added to the end of the chain and the chain can move on to the creation of the next one.

Blockchain

A blockchain is a public register of transactions that is maintained and verified by a decentralized network of peer-to-peer nodes/computers which, thanks to a consensus mechanism, confirms the data.

A sufficiently decentralized blockchain makes it possible to exchange cryptocurrencies to carry out transactions in a secure, verifiable, and rapid way, without authority or centralized intermediaries globally.

Each computer on the network keeps a copy of the entire ledger, making it virtually impossible for a single node to alter past transactions or overwhelm the network.

Block Explorer

A block explorer is a software that allows users to access all the operating information of a blockchain in real-time: transactions, blocks, addresses, nodes, and balances. Many of these interfaces are available via web browsers, are free, open source, and essential for providing transparency and democratized access to the blockchain network.

Cold Wallet

A Cold Wallet is a cryptocurrency wallet that is not connected to the Internet, very often they come in the form of physical devices that store private keys and are used to "keep your cryptocurrencies safe". Very similar by analogy to hard drives for backups not directly connected to a PC or network.

Collateral

Collateral refers to an asset that is offered as collateral for the repayment of a loan. In the event that an individual is unable to repay the borrowed principal, the collateral will be held by the lender.

When borrowing money on a lending platform, collateral is often expressed in the form of tokens which are blocked by the platform itself. The guarantee is returned when the loan is repaid. If the loan is not repaid, the guarantee remains blocked on the platform and is no longer available to the loan applicant.

Cryptocurrency

Cryptocurrency is a digital asset that can be exchanged between two parties and that uses the internet for its circulation. Cryptocurrencies use blockchain as a distributed ledger of transactions that has inherent characteristics of transparency and advanced cryptography. The exchange of these assets or cryptocurrencies through the blockchain allows the certainty that they cannot be spent twice even in the absence of a centralized intermediary. The first cryptocurrency to achieve mainstream success was bitcoin followed in the following years by many other cryptocurrencies, often called altcoins.

Cryptocurrency Exchange

Cryptocurrency exchanges are similar to traditional exchanges where digital assets can be bought, sold, and exchanged for fiat currency (Dollar, Euro, Pound, etc...) or other digital assets, for example, they make direct exchange between two different cryptocurrencies possible.

Compared to the early years, when transactions were often unregulated, exchanges have evolved greatly to ensure transparency, accessibility, and legal compliance in the countries in which they operate. To compete in user numbers and trading volume they offer competitive trading fees, exchange rates, and user-friendly features.

Cryptomining

Cryptocurrency mining is the process by which, through solving complex equations, a blockchain with the Proof-of-Work consensus mechanism verifies transactions and adds new blocks to the blockchain. The computers that perform these mathematical operations are called nodes and the process by which they solve equations is called mining. For their efforts, the owners of these nodes, also called miners, are rewarded with a fraction of the blockchain's native cryptocurrency.

Decentralized Applications (dApps)

Decentralized applications -dApps- leverage the blockchain to offer services ranging from investments to loans, games, and governance. From a graphic point of view, they are very similar to web applications but the back-end processes do not use centralized servers to carry out transactions but implement them in a distributed and peer-to-peer way, often interacting with automated smart contracts on networks such as Ethereum.

Decentralized Finance (DeFi)

Decentralized Finance (DeFi) is a very growing sector in the blockchain landscape, offering financial services and technologies based on Ethereum. DeFi exchanges, loans, investments, and tokens are much more transparent, do not need centralized authorization, and are interoperable compared to traditional financial services, governance is decentralized and promotes fair stakeholder ownership.

ERC-20

The ERC-20 standard represents the set of technical specifications that an Ethereum token (often a cryptocurrency) must have to be fully compatible with the Ethereum blockchain. Through this standard, tokenized assets, tokens, or contracts can be created that can be bought, sold, and traded together with cryptocurrencies such as bitcoin (BTC) and ether (ETH) and used interoperably between Ethereum-based dApps.

Ethereum & ETH

Ethereum was launched in 2015 as a decentralized global network based on its own blockchain that forms the basis of an ecosystem of decentralized applications (dApps) that leverage tokens and automated smart contracts.

The blockchain's native token called Ether (ETH) is used to power the network. Ether plays a vital role in the Ethereum ecosystem, where transactions are paid for through micro-payments of ETH called gas.

All contracts on the Ethereum network are intelligent and self-executing, this means that there is no need for a central authority or an intermediary to control its operation. Ethereum, which by its nature is open-source, programmable, private, and resistant to censorship, forms the backbone of a decentralized Internet, where there are already many innovations such as Initial Coin Offerings (ICOs), Stablecoins, and decentralized finance applications.

Fiat Currency

A fiat currency is a government-issued currency of a state that is used by its citizens as a bargaining chip to buy goods and services within their nation. Most modern national or multi-country currencies, such as the Dollar or Euro, are fiat currencies.

Their face value is defined by the government or entity that issued it, they are not backed by a physical commodity (such as gold and silver) and to operate properly they must be durable, wearable, uniform, and limited.

Fork

A fork occurs when a blockchain splits into two branches or two different blockchains when an update occurs in the blockchain management protocol in which not all nodes decide to adapt to the update. The fork can be "soft" or "hard", in the first case the update is backward compatible with previous versions of the blockchain, the updated and non-updated nodes can still operate with each other, in the case of a "hard" fork this what cannot happen and the two blockchains become two distinct entities with a life of their own.

Gas

Gas refers to the fees associated with transactions and the execution of contracts on the Ethereum blockchain. Decentralized applications (dApps) take advantage of smart contracts in which rules are defined for the events' execution. These events are associated with transactions that have costs based on the actions they contain, the computing power, and the time required for their execution.

The gas is used to allocate the resources of the miners' network that support the blockchain, it is also used for spam mitigation because it discourages malicious actors who could send many small transactions to clog the network, having a price to pay to be able to do them, they are discouraged from doing so.

Halving

When the reward given to miners on a blockchain is reduced by 50%, a halving is said to have occurred. These halving events occur at fixed intervals and their scheduling is defined within the protocol of the blockchain itself. In the case of Bitcoin, halving occurs every 210,000 blocks generated, approximately every 4 years.

Hash Rate

Within a blockchain with a Proof-of-Work consensus mechanism, the hash rate identifies the unit of measurement of the computing power of a single node, generally, it is evaluated in terahash per second (TH/s) or its submultiples, as miners increase or decrease within the network the hash rate changes accordingly.

HODL

"Hodl" is a slang term that refers to keeping cryptocurrencies in a wallet as opposed to selling. Everything was born from an error of a user on Bitcointalk who wrongly wrote the word "hold", which was later transformed into a meme by the community.

Initial Coin Offering (ICO)

Sometimes to finance a new blockchain project, a decentralized application (dApps), or digital assets, Initial Coin Offers or tokens are launched to raise funds, made possible by the Ethereum blockchain. These sales are called ICOs and the ownership of these tokens allows the user to have an economic return or benefit in the project. In fact, this mechanism is very similar to the purchase of shares of a company but it is all managed in a decentralized way on the Ethereum blockchain.

Liquidity Pool

A liquidity pool is crowdsourcing of cryptocurrencies that have been locked into a contract used to facilitate and speed up the exchange of assets or coins on a decentralized exchange.

Market Capitalization

Market capitalization is the total value of all tokens of a cryptocurrency. This value is obtained by multiplying the total number of coins or tokens in circulation by the unit value of a single token in a fiat currency, for example, to date, the market capitalization of BTC is approximately 1,021,263,394,654 USD.

Miner

Miners are an essential component of all blockchains based on the Proof-of-Work (PoW) consensus protocol, they are responsible for validating the transactions carried out and registering them in a new block. To validate the transactions they have to solve complex mathematical problems, their resolution leads to the creation of new tokens, simultaneously increasing the security and reliability of the network. To incentivize users to provide computing power to perform these complex computations, miners are rewarded with a fraction of the blockchain's native currency with each new block created.

Mining and Mining Pool

Mining is the process whereby a computer, or generically a node, provides its computing power to the blockchain so that transactions are validated and new blocks can be produced in all those blockchains that use Proof-of-Work (PoW). During the mining process the miners, node managers, are rewarded with the native coin or token of the blockchain.

To increase the chances of mining a block of transactions, miners merge into what is called a mining pool to combine individual computing power. In the case of extraction of a block, the reward is divided proportionally on the basis of the participation of each.

Non-Fungible Token (NFT)

A non-fungible token (NFT) is a special type of token that represents a unique digital asset that cannot be exchanged for another type of digital asset or split into smaller pieces. This feature makes it different from other types of tokens or cryptocurrencies on the Bitcoin or Ethereum blockchains which are fungible.

Proof of Stake

The Proof of Stake (PoS) consensus mechanism is one of the most widely used mechanisms today for validating transactions on a blockchain that differs from Proof-of-Work.

In the Proof of Stake, nodes participate democratically in the validation of transactions as the participants point to the native tokens of the network and randomly, in proportion to the number of tokens staked, they are chosen to validate the data of the block, thus generating the next block and earning native tokens as a reward.

Such a network offers greater security, resilience, and computing power, and also allows the creation of decentralized governance of the platform by voting on updates and decisions. PoS networks are proving to be faster and more scalable than blockchains and more energy efficient.

Proof of Work

Proof of Work (PoW) is a consensus mechanism first brought to the fore by the Bitcoin blockchain. This type of mechanism relies on the concept of mining to maintain the network. The miners provide their own computing power that is required to solve complex mathematical problems, these calculations are necessary for the confirmation of the data present in the transactions, as a reward in the case of a correct solution, miners are rewarded with the cryptographic token underlying the network.

Proof-of-Work systems are decentralized, require a high amount of power to operate, and typically poorly scalable for widespread adoption by the general public.

Satoshi Nakamoto

Satoshi Nakamoto is the individual or pseudonym of the group responsible for creating the Bitcoin protocol. Nakamoto released the Bitcoin white paper in October 2008 and mined the first block on the Bitcoin network in January 2009.

About him, or them, nothing has been known since April 2011 when he posted a message on an online forum in which he said he "moved on to other things". Satoshi Nakamoto's identity is still surrounded by an aura of mystery and several unconfirmed theories claim to have revealed his identity.

Stablecoin

A stablecoin is a digital currency created for the sole purpose of maintaining a stable value over time and not being affected by the volatility of the cryptocurrency market. Most stablecoins tie their value to a predetermined fiat currency, having no significant fluctuations they are designed to be used rather than as an investment.

Staking

Staking is the process by which a user "bets" or blocks their cryptocurrency tokens in a network by participating in the consensus mechanism, thus ensuring the security and functionality of the blockchain. In order to encourage staking by users on a blockchain, most projects reward users with annualized financial returns.

Token

When we talk about tokens in a blockchain we refer to the unit of value for an asset that is managed by a smart contract and an underlying distributed ledger. These tokens, which can be fungible or non-fungible, are used to store value in a blockchain which is very often Ethereum. Initially, these tokens were used to manage simple transactions but in recent times more and more complex tokens are being designed that manage much more variable use cases for example for network governance and maintenance.

Wallet

A cryptocurrency wallet is a physical device (hardware), program, or online service that saves users' public and private keys, this allows them to perform transactions on various blockchains for the exchange, purchase, or sale of cryptographic assets. The wallet may or may not be connected to the internet, in this case, we are talking about a hot or cold wallet, it may or may not be guarded if it is guarded a trusted third party has control of a user's keys if it is not guarded only the user has his own private keys.

Whitepaper

A white paper is a technical document that is written by those who carry out a blockchain project or by a service that uses one, which describes the operating methodologies, the structure of the project, governance, the technology used, future developments, etc... It is often published in the early stages when looking for financiers to invest in the project and can subsequently be updated in case of progress or changes.

Conclusion

In this article, we have listed and described a series of basic terms necessary to properly approach the world of cryptocurrencies. There are many other interesting concepts to discover once you enter this world, but to take the first steps I think these are more than enough.

Bye, Alberto

Problem & Solution

To test your Flutter apps on the web you need a Chrome executable as said by flutter doctor command:

user@localhost:~$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.0.4, on Linux, locale it_IT.UTF-8)
[✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable. 
...

and based on the documentation, Chrome and Edge are supported as the default browsers for debugging your app, but our loved Brave Browser is based on Chromium so you can export the CHROME_EXECUTABLE variable to your Brave installation and use it. All you have to do, based on your Linux operating system (for Windows and macOS the process is similar), is to modify your .bashrc file and insert this line:

#Put your Brave installation location here
export CHROME_EXECUTABLE="/opt/brave.com/brave/brave-browser"

Now if you save the file, close the terminal, reopen it, run again flutter doctor you should see:

user@localhost:~$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.0.4, on Linux, locale it_IT.UTF-8)
[✓] Chrome - develop for the web
...

So now if you run your Flutter Web project you'll use Brave as the browser to debug it 🚀. I personally use Brave to test a new web app that I'm developing as a side project and all works well.

Bye, Alberto

Web

The support for the web goes in Flutter's direction to develop applications that can reach the user whatever the device he's using. The web is everywhere around us, Flutter allows us to write applications that not only have as targets Android and iOS, but the same codebase can be compiled and transformed to run in any web browser.

The emphasis is on the development of web applications and not static sites, in this way you can replicate the same functionality of native applications in the browser. Flutter, therefore, focuses on 3 main use cases:

• Progressive Web Apps (PWA): real applications that run within the browser, can communicate with the hardware and sensors of the underlying device, can be installed and have customized graphics;
• Single Page Application (SPA): applications that load their content when they are initialized and subsequently communicate with other web services;
• Mobile apps: porting of applications initially developed only for Android and iOS that users can now use in the browser.

To get to this point, many changes have been made to the framework to make it performant with the use of CanvasKit for the part of rendering the widgets with an increase in performance, especially in desktop browsers. Another feature of the web that Flutter supports is Custom URLs, to ensure that your users can reach your app anywhere with just a click of a URL.

Great attention was also put to all interactions and features of browsers such as scrollbar, the multitude of form factors and resolutions, accessibility functions such as VoiceOver or TalkBack, correct management of keyboard inputs, text selection, and constant support for new features that are made available in modern browsers.

There are already several applications in production that are developed in Flutter for the web and one of them is InvoiceNinja, which has recently arrived in version 5 and which uses the same codebase for the online and mobile version, iRobot Coding App which allows children to approach the world of programming, Rive who offers designers a powerful tool for creating custom animations that can ship to any platform.

The Flutter Folio application was created by gskinner which brings a very important showcase on how it is possible to bring the same application on all platforms supported by Flutter: iOS, Android, Mac, Linux, Windows, and the Web. With this application, you can browse all the features of the app from any device you want!

Desktop

Desktop support for Flutter is another very interesting announcement because it opens up interesting scenarios by being able to develop applications for macOS, Linux, and Windows as well. In this regard, there are already examples of software written by large companies that target the desktop, let's see them together.

Let's start with Canonical which in the development of the Linux distribution Ubuntu decided to choose Flutter as the default framework for the development of its next applications. This means a lot for Flutter on the Linux desktop as the collaboration between Canonical and the Flutter team will benefit the entire developer community. The application they decided to start with is nothing less than the Ubuntu Installer, and this is a huge decision because the installer is one of the main programs, in fact, one of the first, that the user uses and it is critical that they can deliver rock-solid experiences on a huge variety of hardware configurations.

Toyota also decided to use Flutter for the development of its applications and in particular for the realization of its infotainment systems right into the heart of their vehicles. Toyota chose Flutter because of its high performance in a constrained environment, consistency of experience including smartphone-tier touch mechanics, fast iteration and quicker feedback loop, developer ergonomics allows for developers to make use of all the multi-platform tools.

Conclusions

The support for the desktop and all the other innovations announced by the Flutter Team in this new 2.0 release lead the framework in the direction it has always given: beautiful native apps in record time. And we have seen that this native is expanding more and more allowing now to create applications that target 6 different platforms. The future is going to be very interesting for Flutter and I can't wait to see where he can go.

Bye, Alberto.

Links

• Seamless multi-platform app development with Flutter
• Flutter web support hits the stable milestone
• Web support for Flutter
• Adapting our Flutter mobile app to web and desktop

We all know that the concept of beauty is subjective, but some tricks can be used to improve the look and feel of our apps and are quite simple to implement. Let's see them together!

White Space

This is the first important concept that you have to keep in mind when you develop your app. White space is the space between elements that lets them stand out. Trying to fit as much stuff as possible on the screen is often not a good idea because it can make the content difficult to read and make the user lose in the flood of information that is given altogether.

Through the correct use of the spaces between elements, it is possible to communicate what the hierarchy is and therefore the importance or the relationship between elements. The easiest way to implement this first suggestion is through the use of Padding which allows giving space and air between different elements of our interface. In combination with padding, you should make good use of alignments to communicate even more than elements are related to each other, a very common case is to align the title with the paragraph that corresponds to it so that visually the user can correlate them.

Typography

Another very important concept, especially in those apps that contain a lot of text, is typography. Within your app, fonts, and styles you use can give you a great hand in communicating what are the most important elements and what their function is.

A rule that always works is: limit the number of fonts to a minimum, the best would be to use only one family and play with its styles instead: bold, italic, medium, thin. In Flutter there's the google_fonts package to quickly use Google Fonts in your app and play around with fonts until you find the one that best suits your needs, but remembers: less is more.

Color

You can get a lot in an app using the right combination of colors, certainly, it is not always easy to find the right one but you can always get help from the many online tools that provide already "effective" and beautiful to look at color palettes that we can use to improve the look and feel of your app.

Some of these tools such as Coolors allow you to start from an image and extract the corresponding palette, Picular instead starting from keywords gives you the colors that correspond to it, and finally, ColorSpace allows you to generate a color palette from a starting key color, such as the color of your brand.

Once you have chosen the color palette that's right for you, Flutter provides you the ThemeData class with which you can define the style of your app, use it and make it consistent across all screens and elements.

Iconography

Sometimes a picture can say a thousand words, and a picture placed in the right place can do even more. Proper use of icons, images, and graphics can make a huge difference and turn a boring app into a great one.

Flutter provides many classes and packages to work with images, to download them efficiently from the web like cached_network_image, and to apply a customized icon package: font_awesome_flutter, fluentui_system_icons just to name a few.

As mentioned in the case of fonts, if you choose to use a custom icon pack, limit yourself to using only one, in order to keep the style consistent within your app.

Animation

This is perhaps the most advanced point of all because with animations it is possible to relate and give life to the elements that are in our apps. Correct use of animations can guide the user within the app, make him naturally switch from one screen to another, or give him feedback on what just happened.

A very easy component to implement in our apps but which can make a big difference is Hero class with which a component can literally switch between screens continuously. Flutter also allows you to customize the transitions with speed, directions, rotations, leaving you free to customize the interface as you want, even in this case, however, it is always better not to overdo the applied effects too much so as not to make your users seasick.

Conclusion

In this article, we have seen some very important concepts that can be used within our apps to make them more beautiful and improve the user experience. A package that I can recommend and that can give you a big hand in implementing many customizations of your layouts is Pawan Kumar's VelocityX of which I wrote an article a few months ago. So with everything we learned today let's make our Flutter apps beautiful!

Bye, Alberto.

Links

• The little things: Becoming the mythical designer-developer
• White space
• Design Principle: Alignment
• Typography crash course
• Color theory crash course
• Iconography crash course
• Introduction to animations

With google _mobile_ads package you can choose from these ads format:

• Banner: rectangular ads that appear in a fixed position on the screen, usually at the top or bottom, and stays on the screen while the user interacts with your app. Usually is the first banner to try out but with this ad, you lose a portion of your screen;
• Interstitial: a full-screen banner that appears on top of your app and stays there until the user closes it. It's the perfect announcement to show in your app when there is a pause or when the user has just completed an action, such as a level in a game;
• Native Ads: ads that have the same style as your app and you can choose where to place them to interfere as little as possible with the use of your app, often found within lists or content grids;
• Rewarded: ads that reward users for watching it, are often used to give credits or small prizes that can be used within the app.

Before releasing this plugin for all developers the Flutter team carried out a private beta program with some customers to test new features, such as Sua Musica (largest Latin American music platform for independent artists with more than 15k verified artists and 10M MAU), and it was seen that there was an increase in Impressions, in the CTR and in the eCPM.

Implementing this new package in your Flutter app is very very simple and with the codelabs you can try out various configurations and use ads that best fit your app. I think this new addition fills a gap that was present until now and allows us, developers, to have an extra monetization possibility.

Bye, Alberto

Links

• Ads support for Flutter
• google_mobile_ads
• Monetizing apps with Flutter
• Mobile Ads SDK (Flutter) Beta
• Adding an AdMob banner and native inline ads to a Flutter app
• Adding AdMob ads to a Flutter app

In this article, we will look at the navigation patterns present in foldable devices and how these are supported by Flutter.

Dual-screen app patterns

Dual-screen devices offer developers new ways to build their own apps to make the most of the screen space available. Depending on the type of experience we want to give to our users, patterns have been defined for the arrangement of the contents on the screen:

• Extended canvas: this is the simplest way to take advantage of all the space available to us as our app is extended on both screens, this use is recommended for all those applications that have "free" content to show, in which the user can easily navigate it in its entirety such as a map or a canvas for drawing;
• List - Detail: this is another fairly common pattern to exploit and affects all those applications that have a detail-list concept for their content such as messaging or email applications. In this case, the contents of the list (mail, chat, notes) are placed on the left screen and the details of the content are displayed on the right screen;
• Two Page: this pattern is very common and recommended in all those applications that simulate the experience of a book or which by their nature have content that is already paginated or similar to that of a document. In this way it is possible, with a naturally already divided content, to place it on the two screens.

• Dual View: this pattern is very interesting when you want to create applications that have the same type of content with two different views, allow the comparison of two similar objects to view the differences or make comparisons. Think for example of an e-commerce application that compares two similar objects or an app for searching for commercial activities that on one screen shows the map with the activities and on the other screen shows the list of information about shops or restaurants;
• Companion Pane: this pattern allows you to take advantage of the additional space made available by the second screen to add complementary information that could not be seen using only a single screen. Very useful for example in all applications that allow users to interact with content by separating the interactive part such as video or images in games or editing applications from the controls like timelines and buttons.

Orientation

A fundamental role is also given by the orientation of the device which can be used both in portrait mode (left and right screen) and in landscape (screen above and below). In these cases, the simplest way to manage the change of orientation is left <-> above and right <-> below, but depending on the type of application, content, or user, it may be necessary to revise this choice.

Flutter support for Foldables

Microsoft is actively working with the Flutter team to allow applications to take full advantage of the new form factor and allow applications to be used in both single screen or extended mode across two screens. Several new features have been introduced regarding MediaQuery, Hinge, display features, and the TwoPane widget. Let's give a description:

• MediaQuery: class on the Flutter SDK that gives you information about the device screen size, display density, text scaling so you can rearrange your app's content based on that;
• Hinge: is the physical separator between two displays on the device, Surface Duo has a vertical hinge between the two displays, however, the Galaxy Fold has a 0 height horizontal "hinge".
• Display features: lets you query properties of the display that can be non-functional or obstructed, for example, it gives you information about the hinge, fold, cutout, and the state of the devices like halfOpened, flat, flipped;

• TwoPane widget: layout that has two child widgets, which can be shown side-by-side, above-and-below, the relative size of the two widgets can be adjusted proportionally; and on dual-screen devices, the boundary snaps to the hinge area.

Conclusion

I think that these collaborations between companies on a specific product or technology have the positive effect of making Flutter grows in other aspects as well, one above all the Cross-Platform, as the additions or improvements that seem their own for the Surface Duo can be used to develop better apps for other devices as well.

Bye, Alberto

Links

• Announcing Flutter support for foldable devices
• About Surface Duo
• Introduction to dual-screen devices
• Get started with Flutter for Surface Duo
• Flutter MediaQuery for Surface Duo
• MediaQuery class
• Flutter TwoPane widget

To solve this problem the team of Flutter and Dart have introduced the concept of Sound Null Safety which means that types in your code are non-nullable by default and null-dereference errors are no longer "discovered" at runtime but during code writing and this makes your code more secure and less prone to errors at runtime. To better understand how to take advantage of this functionality, let's first introduce some concepts, and then we will move on to the best practices and tools that Flutter provides to make our life easier to make our applications perform better.

Definitions

The first thing to keep in mind is that types are non-nullable by default unless you explicitly tell Dart that a variable can be null. If you tell Dart that a variable isn’t null, then that thing can NEVER be null and the compiler can make optimizations on your code (because it no longer has to check every time it is used that it is not NULL or "hope" that it is not) and benefits are fewer bugs, smaller binaries, and faster execution. Another important benefit is that you can incrementally migrate your code to null safety, you can mixing null-safe and non-null-safe code in the same project so you can test each part of your app separately until you reach the full migration to null safety.

Now I introduce you to three syntactic operators that help us write safer code or tell the compiler how it should handle a variable: ? ! and late.

The ? operator tells Dart that a variable can have a null value and it doesn’t have to worry because, as good programmers, we add all the code necessary to verify, when we have to use it, that that value is not null

//I declare and assign a variable that can be null
int? iKnowThisVariableWillNoLongerBeNull = null;

/*
* Some code that maybe assign a non-null value
*/

//Check if the variable is not null
if( iKnowThisVariableWillNoLongerBeNull == null ){
    return;
}

//I can use iKnowThisVariableWillNoLongerBeNull 
//    because is not null and I'm a good programmer ;-)
//    so I don't have a runtime error

The ! operator overrides what Dart compiler thinks of a variable because if you are 100% sure that a variable will be not null until it's used and the compiler doesn't have to worry about its value you can add the ! operator

//Now I declare and assign a variable that can be null
String? firstVariable = "Alberto";

/*
* Some code
*/

//I'm 100% sure that my variable is not null 
//    because I assign its value when I declare it
//    and I override what Dart thinks
String myName = firstVariable!;

Another way to tell Dart that a non-nullable variable will be initialized to a non-null value before it’s used is with the late keyword

int randomNumber(){
    //I define a "maybe" null variable but I tell Dart 
    //    that somewhere in my code I will assign 
    //    a non-null value
    late int randomNumber;
    int returnedRandomNumber;

    //I have fulfilled my promise to assign 
    //    a non-null value to the variable
    randomNumber = 4;
    returnedRandomNumber = randomNumber;

    return returnedRandomNumber;
}
print(randomNumber()); //This string prints the random number 4

Tips & Tools

If you want to migrate your app to null safety the Flutter team provides you some useful tools to make this migration easy. First of all, check that you have Dart 2.12 or later installed with Flutter > 2.x.x, you can check it with

$ dart --version

Dart SDK version: 2.12.0 (stable) (Thu Feb 25 19:50:53 2021 +0100) on "linux_x64"

After that, you have to keep in mind that before migrating your actual code you should wait until all packages your app depends on have been migrated to null safety, to check it run

dart pub outdated --mode=null-safety

This is a simple output and if in the Resolvable column all the packages have a green checkmarked version all of your dependencies are already migrated to null safety and you can upgrade

If any of your package’s dependencies don’t yet support null safety, you can reach out to the package owner and tell if a null-safety release of the package is in work and you can help with something. If all is green you can upgrade all of your dependencies, and update the pubspec.yaml file, with

$ dart pub upgrade --null-safety
$ dart pub get

The last step is to migrate your actual code with

$ dart migrate

If all it's ok and your app is ready to migrate, then you should see an output like this

View the migration suggestions by visiting:

  http://127.0.0.1:60278/Users/you/project/mypkg.console-simple?authToken=Xfz0jvpyeMI%3D

Going in that webpage you will see what changes Dart proposes for your code and you can apply all the changes in one shot, apply changes only to certain parts of your app, or review them and apply by hand. The Flutter team suggests applying changes only to one part of your app at a time and test them until you reach the full migration.

If you start from scratch with a brand new app and you want to have null safety from day 0 you have to create your project with

 $ dart create -t console-full my_brand_new_app
 $ cd my_brand_new_app
 $ dart migrate --apply-changes

Conclusion

I think that Sound Null Safety is a wonderful addition to Dart and Flutter because it forces us to think more about our code and to write it better, it makes our apps faster and with fewer bugs. If you want to experiment with Null Safety in Dart before diving in to introduce it in your apps you can use the DartPad with null safety.

Bye, Alberto

Links

• Understanding null safety
• Migrating to null safety
• Null safety feature tour
• Sound null safety
• Null safety: frequently asked questions
• Null safety example: A CLI app for calculating lix