Forem: Giuseppe Vetri

Cloudbuild with Android - Using Encrypted Environment Variables

Giuseppe Vetri — Thu, 30 Apr 2020 18:48:02 +0000

Hi there! At my current work, we had a problem with our CI/CD, and we started to look for alternatives. We checked out various platforms like CircleCI, Bitrise, and others. Still, the process to ask the upper-level management to add this as providers was a bit slow and tedious so, since we already had GCP as a provider, we decided to try GCP Cloudbuild.

Cloudbuild is an infrastructure that allows you to run builds for your projects. The price was reasonable, so we decided to start investing time on it to move our Android CI/CD all to cloudbuild.

As first we started looking for some previous experience on the internet and found two excellent articles about it, those articles will be linked below. Nevertheless, those articles required a certain knowledge of Docker, CloudBuild, and other technologies that I didn't have.

So I started learning about it to understand these articles better. What I wanted to achieve first was to read an encrypted environment variable. With this goal in mind, I started my quest.

Note: Articles in which this post is based.

https://ryanharter.com/blog/cloud-build/

https://medium.com/dailymotion/run-your-android-ci-in-google-cloud-build-2487c8b70ccf

First, let's enable GCP KMS

What we need to do first is go to the GCP console, create our new project, and enable the KMS. You must go to Security → Cryptographic Keys.

Note: KMS stands for Key Management Service.

Creating a Keyring and a Criptokey

A Keyring can hold various CryptoKeys. To create a Keyring, you need to use the following command:

"yourkeyringname" is the name of your Keyring, and you should replace it for your what suits best for you, and the flag --location=global means that this Keyring is available in all regions of your project.

Now that we already created a Keyring, let's create our new CryptoKey, for that we're going to use the next command.

"KEYNAME" is the name of the key you want to create, and the--keyring flag is to indicate to which Keyring it's going to belong since we're using as an example "yourkeyringname" it will belong to it.

Encrypting the variable

To encrypt our variable, we must store it in a plain text file and then create a ciphertext file from that one. For that, we're going to use the next command.

What this does for you is to encrypt your my_variable.txt file and convert it to my_variable_encrypted.txt using your Keyring and your cryptokey. After that, you need to create a base64 from your encrypted variable, and that can be achieved using the next command:

If you're using macOS you can use:

In Linux, the command is:

The result of this process is going to be something like this:

Note: This is an example. Your base64 is not going to be the same.

Now let's store this base64 until we finish the next step.

Creating our AndroidBuilder

In this step, we're going to create our new Docker Image and pass to it our secret as a Build Argument. If you never created a Dockerfile before, probably you want to learn about it before continuing with this topic.

What we do in this Dockerfile is:

Obtain the javac builder from GCR (Google Container Registry).
Update the system.
Download the dependencies.
Set our "build arg" with the name SECRET.
Set the ANDROID_HOME as an environment variable.
Copy our gradle-build script(This is a little script that helps us to store the gradle cache so the subsequent builds can be faster).
Download the android sdk tools, set our tools as an environment variable, and finally install the Android SDK.

This is the gradle-build script that is mentioned in the Dockerfile.

Note: This Dockerfile and gradle-build script are based on this article that helped me a lot. I only added a few instructions, the latest android platform, build-tools, platform-tools, and the ARG SECRET line.

If you're a more advanced user of Docker and GCP, you can use the community cloud builder, which can be found here. I wanted a simpler proof of concept, so the previous one was the one that fit best for me.

As the last part of this step, we're going to create a cloudbuild.yaml, which is going to build our container and upload it to the Google Container Registry. In this cloudbuild.yaml file, we're going to execute a command which builds the container. There is where we're going to run our Android project. In this cloudbuild.yaml, we pass our secret and use the base64 that we generated before, here's how it's going to look.

In this file, we're building a Docker container and passing our secret as build arg. You can see that we're using a double dollar sign to escape the cloudbuild substitutions, which are, for example, the $PROJECT_ID, then we're declaring that we're going to use the secret at the end of our cloudbuild.yaml. Remember to replace "yourprojectname," "yourkeyring," "yourcryptokey" and your base64 in the previous file.

Finally, we use the following command to build it and send it to the Container Registry.

Important: If you're getting an error because the Container Registry doesn't have permission to decrypt you must go to your GCP console, Select Cloudbuild, go to configuration and copy your service account email, go to Security → Cryptographic keys → Select your key → Click the add member button in the right panel, add it as a member and select the role of decrypt cryptographic keys.

The cloudbuild file in our android project

Now that we created our container to run our Android project, what we're going to do is to create the cloudbuild file of our Android Project.

First, we're going to create a couple of GCP Storage Bucket, and the Storage Buckets are object storages provided by the Google Cloud Platform. In other words, it helps us to store things. In our case, it will be helpful for our Gradle cache and apks.

To create it, we're going to open up the terminal and type the next command.

In our cloudbuild.yaml we're going to describe the following steps:

Copy our cache into our GCP Storage Bucket using the gsutil image from Google Container Registry. The GCP provides this image, so we don't have to build our own.
Run a KtLintCheck task on our previously created AndroidBuilder.
Run a detekt task in our AndroidBuilder.
Run our unit test always on our AndroidBuilder.
Assemble our Apk.
Store the cache.
Store our apks in a storage bucket.
Finally, we set the timeout for the build to 1200 seconds.

Note: Ktlint is a linting tool for Kotlin, and you can read more about it in this awesome article by Nate Ebel. On the other hand, detekt is a static code analysis tool for Kotlin, and you can read more about it here.

Set up the triggers.

Now we want to set-up the build triggers, so each time we push a branch, we can run our build to verify that everything is fine. To do this, we need to go to console.google.com, select our project, go to the navigation menu, select cloud build, triggers, connect our repository if you haven't already, and then click the create trigger option. It looks like this.

This is a trigger that we want to run when a new feature branch is pushed to the repo. To test it, you need to push a new branch to the repo and check the GCP console history. If everything went well, you're going to see something like this.

You can also try your builds locally using cloud-build-local.

Test your build locally

Pushing to GitHub to trigger the build can be annoying and a slow process. If you want to test your build, you can test it in your computer using cloudbuild local and running the following command:

Note: You need to install first cloud-build-local with the following commands.

You can read more about it here.

Where do we go from here

This was a proof of concept that I used to learn new things and to propose it to the DevOps team, in my job, I wanted to help them to help our Android team as I mentioned before this can be hugely improved so feel free to improve it or to use the community cloudbuilder if that fits your needs.

Ryan Harter has a series in which he talks about how to increment the build numbers and how to store the build cache. If you want to go even further, play around with the community builders.

What you can take away from this

If you're looking for an alternative to circleCI, bitrise, or others, and you're not afraid of a terminal and learning new things (Assuming you're like me and didn't know anything about cloudbuild) cloudbuild is cool. Surely it doesn't have the beautiful UI/UX of one Continuous Integration provider. But it does very well the job. So it depends on your needs.

That's it

If you have any questions, suggestions, or improvements, please leave a comment 😄. You can also reach me via Twitter @gvetri18.

📸 Taking a picture and selecting from gallery in Flutter

Giuseppe Vetri — Thu, 05 Mar 2020 20:29:29 +0000

Hi there! I've been working in an App that requires to take a picture from the app or pick it from the gallery. And here's what I learned about it. There are many ways to take a photo using the camera. This time we're going to use the ImagePicker plugin.

Let's start with the dependencies.

As the first step, we need to add new plugins to our dependencies. In our pubspec.yaml we're going to add the next plugins:

Camera which helps us to work with the device's cameras.
path_provider gives us the correct path to store images in our devices.
image_picker helps us with the photo selected from the gallery.

After we add it to our pubspec.yaml, it's going to look like this.

name: fluttercamera
description: A Flutter project that takes a picture and shows the preview.
version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  camera:
  path_provider:
  path:
  image_picker:

  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:

  uses-material-design: true

Adding a min Android SDK.

The Flutter camera plugin only works with an sdk 21 or higher in Android. So we need to open our build.gradle file located at android/app/build.gradle and search for the line minSdkVersion. Lastly, we need to upgrade our min sdk version from 16 to 21. If you don't know anything about android development, this made the app available only from Android OS Lollipop or later.

This is how it should look like after doing that change.

Let's create our first screen!

Let's create our PhotoPreviewScreen, which is a StatefulWidget. In the beginning, it should look like this.

class PhotoPreviewScreen extends StatefulWidget {
  @override
  _PhotoPreviewScreenState createState() => _PhotoPreviewScreenState();
}

class _PhotoPreviewScreenState extends State<PhotoPreviewScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(

    );
  }
}

Now we're going to create a Scaffold with a centered column that is going to show our image preview after we pick it from the gallery or take a picture from the camera. As of the last step, we're going to add a floatingActionButton, which is going to show the selection dialog.

class PhotoPreviewScreen extends StatefulWidget {
  @override
  _PhotoPreviewScreenState createState() => _PhotoPreviewScreenState();
}

class _PhotoPreviewScreenState extends State<PhotoPreviewScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _setImageView()
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _showSelectionDialog(context);
        },
        child: Icon(Icons.camera_alt),
      ),
    );
  }

Great! Now you're probably asking what the _setImageView() and the _showSelectionDialog(context) do. The _setImageView() is a method that returns a Widget in case the Image we pick from the gallery or take from the camera is null. We're returning a Text Widget that has the following text "Please select a picture."

The*_showSelectionDialog(context)* is going to show a dialog with two options, take an image from the gallery or the camera. Let's start creating this one. This method should use the function showDialog() and pass to it the context and a builder who is going to create an AlertDialog with a title and two options.

In the AlertDialog constructor, we're going to pass as content a SingleChildScrollView which is a Widget that helps us to scroll the list, as a child of this Widget we're going to pass a ListBody with two children, those children must be a GestureDetector to detect when the user touches the text.

Each GestureDetector child is going to be a Text Widget with the "Gallery" text and "Camera" text, respectively, and each onTap() method is going to be _openGallery() and _openCamera(). Methods that we're going to create in a while. Your _showSelectionDialog(context) should look like this.

Future<void> _showSelectionDialog(BuildContext context) {
    return showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
              title: Text("From where do you want to take the photo?"),
              content: SingleChildScrollView(
                child: ListBody(
                  children: <Widget>[
                    GestureDetector(
                      child: Text("Gallery"),
                      onTap: () {
                        _openGallery(context);
                      },
                    ),
                    Padding(padding: EdgeInsets.all(8.0)),
                    GestureDetector(
                      child: Text("Camera"),
                      onTap: () {
                        _openCamera(context);
                      },
                    )
                  ],
                ),
              ));
        });
  }

Now your app should show a Dialog like this one.

Let's use that plugin.

Now let's add the logic to our _openGallery(context) method. What we're going to do first is create a field called imageFile, which is going to be a File object in our _LandingScreenState class. After creating that, we're going to use the ImagePicker function ImagePicker.pickImage() passing to it the enum*ImageSource.gallery* This function is asynchronous, so we're going to add the reserved keywords async and await, later we're going to save that variable and assign it to our property. As our last step, we're going to call the setState() method to notify that the state has changed.

The function _openGallery(context) should look like this.

void _openGallery(BuildContext context) async {
    var picture = await ImagePicker.pickImage(source: ImageSource.gallery);
    this.setState(() {
      imageFile = picture;
    });
    Navigator.of(context).pop();
  }

The _openCamera(context) function it's almost the same. The only thing we need to change is the source, instead of ImageSource.gallery we're going to use ImageSource.camera. This simplicity is what I most liked from this plugin, that was so simple.

Showing the preview

Remember the _setImageView() that was at the beginning? Well, we're going to verify that the field imageField is not null to return an Image Widget. If the image field is null, we're going to return a Text Widget.

This is the result.

Widget _setImageView() {
    if (imageFile != null) {
      return Image.file(imageFile, width: 500, height: 500);
    } else {
      return Text("Please select an image");
    }
  }

This is how your app should look after you select a image from the gallery.

That's it

I hope you liked it! If you're interested in more Flutter/Dart articles, you can follow me on social and say hello!.

Instagram.

Twitter.

😄 Click here to join the newsletter

📸 Como tomar una foto con Flutter o elegir una foto de la galería.

Giuseppe Vetri — Thu, 05 Mar 2020 20:28:51 +0000

¡Hola! Ultimamente he estado trabajando en una app que requiere tomar una foto desde la app o de la galeria y mostrarla al usuario. He aprendido un par de cosas implementando esta feature y he querido compartirlo por acá. Existen varias formas de tomar una foto utilizando la cámara pero en esta oportunidad vamos a utilizar el imagePicker plugin.

Empecemos por las dependencias.

Como primer paso, vamos a agregar los plugins a nuestras dependencias. Abrimos nuestro pubspec.yaml y agregamos los siguientes plugins:

camera: Este plugin nos ayudará a trabajar con las cámaras de los dispositivos.
path_provider: Este plugin nos proporciona el path correcto para saber donde almacenar las imagenes en nuestro dispositivo, ya que cambian entre una plataforma y otra.
image_picker este nos ayuda a seleccionar una foto de la galería.

Despues de agregar estos plugins nuestro pubspec.yaml debería verse así.

name: fluttercamera
description: A Flutter project that takes a picture and shows the preview.
version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  camera:
  path_provider:
  path:
  image_picker:

  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:

  uses-material-design: true

Aumentamos la versión minima de Android

El plugin de camera en Flutter solo funciona con sdk 21 en adelante en Android, lo que quiere decir que solo dispositivos Android con sistema operativo Lollipop o superior pueden utilizar una app con este plugin.

Para esto vamos a abrir el archivo build.gradle ubicado en android/app/build.gradle y buscar la linea que dice "minSdkVerrsion". Finalmente cambiamos la versión de 16 a 21.

Luego de cambiar la versión debería verse así

¡Creemos nuestro primer Screen!

Para empezar vamos a crear un StatefulWidget llamado PhotoPreviewScreen. Debería verse de esta manera.

class PhotoPreviewScreen extends StatefulWidget {
  @override
  _PhotoPreviewScreenState createState() => _PhotoPreviewScreenState();
}

class _PhotoPreviewScreenState extends State<PhotoPreviewScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(

    );
  }
}

Ahora, vamos a crear un Scaffold con un widget Column centrado el cual va a mostrar una vista previa de nuestra imagen después que tomemos una foto o la seleccionemos de la galería. Y como paso final vamos a agregar un floatingActionButton, que al tocar nos mostrará un dialogo con las opciones para elegir una foto de la galería o desde la cámara.

class PhotoPreviewScreen extends StatefulWidget {
  @override
  _PhotoPreviewScreenState createState() => _PhotoPreviewScreenState();
}

class _PhotoPreviewScreenState extends State<PhotoPreviewScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _setImageView()
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _showSelectionDialog(context);
        },
        child: Icon(Icons.camera_alt),
      ),
    );
  }

¡Genial! Ahora seguramente te estés preguntando qué hace el _setImageView() y el _showSelectionDialog(Context).

El _setImageView() es un método que devuelve un Image Widget en caso de que la imagen obtenida no sea nula, de lo contrarío devolverá un Text Widget con un mensaje de Error. El método _showSelectionDialog(Context) muestra un dialogo con dos opciones, seleccionar una imagen de galería o de la cámara.

Empecemos creando el último, este método debe usar la función showDialog() y pasarle el Context y un Builder el cual va crear un AlertDialog con un titulo y dos opciones.

En el constructor del AlertDialog, vamos a pasar como contenido un SingleChildScrollView el cual es un Widget que nos ayudará a hacer scroll en la lista, y como child de este Widget vamos a pasarle un ListBody con dos GestureDetector como hijos para detectar cuándo el usuario ha tocado el texto.

Cada GestureDetector va a tener un Text Widget con el texto "Galería" y "Cámara" respectivamente. Y cada Text widget tambíen tendrá como parámetro de su función onTap el método _openGallery() y openCamera() segun corresponda. Estos métodos los crearemos más adelante. Al terminar el método _showSelectionDialog(context) estará así.

Future<void> _showSelectionDialog(BuildContext context) {
    return showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
              title: Text("From where do you want to take the photo?"),
              content: SingleChildScrollView(
                child: ListBody(
                  children: <Widget>[
                    GestureDetector(
                      child: Text("Gallery"),
                      onTap: () {
                        _openGallery(context);
                      },
                    ),
                    Padding(padding: EdgeInsets.all(8.0)),
                    GestureDetector(
                      child: Text("Camera"),
                      onTap: () {
                        _openCamera(context);
                      },
                    )
                  ],
                ),
              ));
        });
  }

Ahora al tocar nuestro FloatingActionButton debería mostrar un Dialog como este.

Ahora a utilizar el plugin ImagePicker

Ahora vamos a agregarle la lógica a nuestro método _openGallery(context). Lo primero que vamos a hacer es crear un Field llamado imageFile, el cual va a ser una variable de tipo File en nuestro _LandingScreenState. Luego vamos a utilizar la función del ImagePicker, llamada pickImage() y le vamos a pasar como parámetro el enum ImageSource.gallery. Esta función es asíncrona así que vamos a tener que utilizar las palabras reservadas async y await. Luego vamos a almacenar esta variable y asignarla a nuestra variable imageFile. Como paso final, vamos a llamar al método setState() para notificar que el State ha cambiado. Y nuestra función deberá verse así.

void _openGallery(BuildContext context) async {
    var picture = await ImagePicker.pickImage(source: ImageSource.gallery);
    this.setState(() {
      imageFile = picture;
    });
    Navigator.of(context).pop();
  }

La función _openCamera(Context) es casi igual, la unica diferencía que tiene al respecto es que esta utiliza el enum imageSource.camera en lugar de gallery. Al realizar este cambio tu función de _openCamera() deberá verse así.

void _openCamera(BuildContext context) async {
    var picture = await ImagePicker.pickImage(source: ImageSource.camera);
    this.setState(() {
      imageFile = picture;
    });
    Navigator.of(context).pop();
  }

Previsualización

¿Recuerdas aquella función que mencionamos al principio llamada _setImageView()? Pues no podemos olvidarnos de ella. Para ello vamos a verificar si nuestra variable imageFile es distinta de null. Si lo es, devolvemos un Image Widget con la variable que teniamos almacenada y si aún es nula pues devolvemos un texto que diga que debemos seleccionar una imagen.

Así se vería la función terminada.

Widget _setImageView() {
    if (imageFile != null) {
      return Image.file(imageFile, width: 500, height: 500);
    } else {
      return Text("Please select an image");
    }
  }

Así es como se vería la app al final, luego de seleccionar una imagen de la galería.

Eso es todo

Espero que te haya gustado este artículo. Si te interesan mas contenido sobre Flutter o Dart puedes seguirme en las redes sociales.

Instagram.

Twitter.

🤓Adémas no te pierdas ningun artículo uniendote a mi newsletter

Puedes registrarte haciendo click acá debajo 👇.

😄 Haz click aquí para unirte a la newsletter

Que es un unit test (Prueba unitaria)

Giuseppe Vetri — Tue, 21 Jan 2020 20:11:32 +0000

Hola! Probablemente hayas visto en ofertas de trabajo la siguiente frase, "Experiencia con pruebas unitarias y TDD." Pero si eres como yo y no tienes idea sobre tests, has oído de ellos, sabes que existen y sabes que las buenas compañías lo usan. Pero, ¿qué son y cómo funcionan?

🤔 Empecemos con un test

Cuando alguien de QA (Quality assurance, aquellos que prueban tu app y encuentran fallos que tu no conocías) se acerca a mi y me pregunta si estoy seguro sobre lo que hace mi código, mi respuesta siempre es no, y no es porque no confié en mis habilidades de programación, es porque soy humano y como todo ser humano cometemos errores. Es por esto que empece a aprender sobre testing ya que los test pueden ayudarte a conseguir los errores que vas a introducir en el futuro.

Un test ayuda a probar algo, en nuestro caso, que nuestro código vaya como lo hemos planeado. Con mis simples palabras podría decir que un test es código que tu escribes para verificar que el código que vas a tener en producción funciona y hace lo que esperas que haga.

👩‍💼👨‍💼Unidad

Una unidad es algo individual, digamos que un elemento, muchos elementos pueden crear algo mas grande que ellos. En nuestro caso, una unidad puede ser una clase o una función la cual junto con otras clases u otras funciones pueden crear una app mas compleja.

Al hacer pruebas de cada una de las unidades estamos haciendo pruebas unitarias.

👩‍💼👨‍💼 La prueba unitaria

Digamos que vamos a crear una nueva, nunca hecha, disruptiva app llamada calculadora. En esta app tendremos una función llamada sum(), la cual realiza la suma de dos números. Si lo hacemos en Kotlin, sería:

fun sum(int a,int b) : Int {
    return a+a;
}

Luego nos vamos a crear nuestra UI (Interfaz de usuario) la cual es fantástica y amamos hacer para que quede todo super lindo, pero cundo corremos la app y empezamos a probarla, nos damos cuenta de que la función de suma no funciona. ¿Por qué no funciona? Si los parámetros los he declarado bien y la suma va bien. Créeme, esto ocurre mucho mas de lo que imaginas.

Y es un problema si tus build times toman cierto tiempo. Ejecutar una compilación que tarde mucho puede romper el estado de concentración en el que te encontrabas, y espero que no seas como yo quien se distrae fácilmente y pierde el foco de que estaba haciendo. Por suerte, las pruebas unitarias pueden ayudarnos a solucionar estos dos problemas ya que los tests se encargan de verificar que el código haga lo que supone que debe hacer y como las pruebas unitarias son mas rápidas que compilar toda la app y probar cada cosa manualmente nos vienen de maravilla. Así que para empezar, vamos a crear nuestro primer test.

Casi todos los lenguajes tienen un framework para tests. Puedes revisar cual es el framework para test disponibles para tu lenguaje **aquí.** En nuestro caso como estoy usando Kotlin, vamos a usar JUnit.

Una prueba unitaria se parece a esto y por defecto está en la carpeta de tests del proyecto.

    @Test
    fun calculator_sum_shouldReturnTheSumBetweenTwoParameters() {
        //Given
        val calculator = Calculator()
        //When
        val result = calculator.sum(2, 1)
        //Then
        assertEquals(3,result)
    }

Analicemos un poco qué contiene este Test.

La anotación @Test que indica que es un Test.
El nombre de la función que indica [Unidad_NombreDeLoQueEstamosProbando_ResultadoEsperado], esto en ingles se hace de la siguiente forma: [Unit_WhatWeAreTesting_ExpectedBehavior].
El contenido del test.

Nuestro test debe seguir el patrón Arrange-Act-Assert (Organizar, actuar y afirmar) o el Given- When-Then (Dado que, cuando, entonces). A mi me gusta el patrón given, when, then debido a que me recuerda mucho a lo que suelo ver en las historias de usuario. Además, si te distraes puedes seguir los pasos y recordar el paso que te falta. Hablemos un poco sobre este patrón.

Given: En esta parte del patrón, los objetos que vas a necesitar son creados.
When: En este paso, llamamos a la función que queremos probar.
Then: Finalmente, en la ultima sección, hacemos la comprobación para evaluar el resultado.

Veamos un ejemplo:

En mi caso estoy usando Intellij Idea, en este IDE tengo un botón de play cerca de mi test y al hacerle click podremos ver en la siguiente imagen cómo el test falla.

Nuestro test ha fallado porque nuestra función está sumando dos veces el primer parámetro 🤦‍♂. Ahora que ya sabemos qué ocurre podremos cambiar nuestra función y ejecutar de nuevo el test para ver cómo pasa.

fun sum(int a,int b) : Int {
    return a+b;
}

Increíble. Tengo que admitir que ahora el verde se ha vuelto uno de mis colores favoritos ya que es el color de los tests al pasar.

Nota de Kotlin: En Kotlin, podemos utilizar las comillas invertidas como nombre de la función y hacer nuestro Test mas legible!

@Test

    fun calculator sum should Return The Sum Between Two Parameters() {

        //Given

        val calculator = Calculator()

        //When

        val result = calculator.sum(2, 1)

        //Then

        assertEquals(3,result)

    }

🔺 La pirámide del testing

Hemos hablado sobre qué es un unit test, pero hay más tipos de test.

Unit Test, se encargan de probar una unidad en especifico.
Test de integración, verifica que dos o más unidades estén funcionando juntas correctamente como deberían.
End to End tests, verifican que todas las unidades están funcionando correctamente. En el caso de android esto incluye probar la UI.

Visto que tenemos varios tipos de test, debemos dividirlos razonablemente. No todos los tests pueden ser End to End o test de integración. Por suerte, hay una imagen que explica muy bien cómo debemos distribuir los tests y se llama la pirámide del testing.

La pirámide del testing fue creada por Mike Cohn en su libro, Succeeding with Agile. Y en este, comenta que los unit test deberían ser la base de la pirámide seguidos por los test de integración y finalmente los End to End.

🤓 Otros beneficios del testing

Tener una test suite te puede hacer de malla protectora y ayudarte a detectar bugs que creas cuando estés programando una nueva funcionalidad o cuando estés haciendo un refactor. Además, tus tests pueden ayudar a futuros desarrolladores a entender mas el código que has creado ya que un test es la mejor documentación que hay.

¡Eso es todo por ahora! Espero que te haya gustado este post. Si te ha gustado, compártelo con tus amigos y compañeros de trabajo así todos podemos aprender un poco mas de testing.

Quieres saber más

Si te ha gustado este artículo y quieres saber sobre otros temas que te interesen puedes dejar un comentario o escribirme a cualquiera de mis redes sociales.

🐦 Twitter

📘 Facebook

📷 Instagram

What is a unit test

Giuseppe Vetri — Tue, 21 Jan 2020 19:32:34 +0000

What is a unit test

You probably seen in those job offers, "Experience with Tests and TDD." But if you're like me you probably have no idea about tests, you heard about them, and you know that the good developers are using it. But, what are they? how they work?

🤔 Let's start with the test

When a QA comes to me and asks me if I'm confident about what my code is supposed to do, I always answer no, and that's because I know I could mess it up. It's not because I don't trust my coding skills. It's because I'm human, and we made mistakes. That's why I started learning about testing because an excellent test suite can help you to catch the bugs that you're going to introduce.

A test determines something; in our case, we want that our code goes as we planned. In my vague words, a test is a code that you write to verify that the "production" code you wrote is doing what is supposed to do.

👩‍💼👨‍💼The unit

An individual thing or person regarded as single and complete but which can also form an individual component of a larger or more complex whole.

Taken from lexico.

In our case, a unit can be a class or a function which can group to create an App. We can test our units to be sure that each unit does what it's supposed to do, and if we do that, we're doing unit testing.

👩‍💼👨‍💼 Testing the unit

Let's say we are building a shiny, never made before, unique app called calculator. In this app, we have a function called sum(), which realizes an addition of two numbers. In Kotlin, it will be.

fun sum(int a,int b) : Int {
    return a+a;
}

Then we jump into making our UI because the UI is fantastic, and I love to make the UI, and when we run the app and start testing it, we are surprised because the sum isn't working. Why isn't this working? The parameters are a and b. Trust me, this thing happens.

There's a problem if your build times take some time. You probably know that a full compilation time can break your productivity flow. I hope you're not like me who get distracted easily and forget what I was doing. Unit testing can help us to solve these two problems because the tests verify that the code is doing what it's supposed to do. Unit tests run faster than compiling the app and manually testing it, so let's create our first test.

Almost every language has its unit testing frameworks. You can check your language unit testing framework here. In this case, I'm using Kotlin, so we're going to use JUnit.

A unit test looks like this and, by default, lives in your test folder.

    @Test
    fun calculator_sum_shouldReturnTheSumBetweenTwoParameters() {
        //Given
        val calculator = Calculator()
        //When
        val result = calculator.sum(2, 1)
        //Then
        assertEquals(3,result)
    }

Analyzing the anatomy of these tests, we can observe the next things:

The @Test annotation which indicates that is a Test.
The name of the function which indicates [Unit_WhatWeAreTesting_ExpectedBehavior].
The body of the test.

The test should follow the Arrange-Act-Assert or the Given-When-Then Pattern. I like the given, when, then pattern because it reminds me of the user stories. And when you can get easily distracted it helps you well! Let's talk about that pattern!

Given: In this section, the objects which we're going to need are created.
When: Here, we call the method to test.
Then: Finally, in the last section, we do the assertions.

I'm using Intellij Idea, so there's a play button close to that test, we click on it, and there's a message indicating that the test failed.

Our test failed because our function is returning the sum between our first parameter 🤦‍♂. Now we can change our function to the following and it will pass!

fun sum(int a,int b) : Int {
    return a+b;
}

Amazing. I must admit now the green has become one of my favorite colors since it's the color that the tests show when it passes!

Kotlin Note: In Kotlin, we can use backticks to wrap the name of the test so it can be more readable!

@Test

    fun calculator sum should Return The Sum Between Two Parameters() {

        //Given

        val calculator = Calculator()

        //When

        val result = calculator.sum(2, 1)

        //Then

        assertEquals(3,result)

    }

🔺 The pyramid of testing

We already saw what a unit test is, but there are more types:

Unit Test, as we mentioned before this test only the subject.
Integration Test verifies that two or more units are working together as they should.
End to End Test verifies that all the units are working together as they should. The end to end test in the case of Android includes UI testing.

Since we have three types of testing, we need to split them reasonably. All can't be End to End Test of Integration Tests. And fortunately, there's an image which explains very well how we should distribute our testing, and it's called the pyramid of testing.

The pyramid of testing was created by Mike Cohn in his book, Succeeding with Agile. He states that the unit tests should be the base, then the Integration Tests, and finally the End to End Tests.

🤓 More benefits of testing

When you have a test suite, it works like a fallback network that can help you to avoid introducing new bugs when you are creating a new feature or refactoring the code. Also, your tests can help future developers who came after you to understand more what a feature is doing because the test is the best documentation.

That's all for now! I hope you enjoyed this post. If you like it, don't forget to share it with your friends and coworkers so they can know more about testing.

Get in touch

Chat with me on:

🐦 Twitter

📘 Facebook

📷 Instagram

Guardar en base de datos con Flutter

Giuseppe Vetri — Wed, 08 Jan 2020 20:48:13 +0000

Guardar en base de datos con Flutter

Photo by Tim Evans on Unsplash.

Almacenar texto en la base de datos es junto a las llamadas a red, una de las operaciones que como desarrolladores más tenemos que realizar. Algunas veces, necesitamos guardar la información de los servidores en nuestra app para que los usuarios puedan abrir la app y ver información previamente guardada antes de que se actualice con nuevo contenido, o podemos también tener que implementar un modo offline.

En este artículo, vamos a hablar sobre cómo almacenar información en una app con Flutter. Nuestra app será una aplicación que almacenará unas Tareas por realizar (Todo's), las cuales podremos consultar luego.

Una lista de las cosas que vamos a necesitar:

Una clase de Tareas por realizar (De ahora en adelante las llamaremos Todo).
Una Screen, la cual es un Widget que nos mostrará unos campos donde podremos crear nuestro Todo.
Agregar las dependencias de los paquetes que utilizaremos. Un paquete es lo que en otros lenguajes puede conocerse como librería, nosotros utilizaremos sqflite.
Una clase DatabaseHelper la cual se encargará de gestionar la base de datos.

Primero, vamos a crear nuestra clase Todo.

class Todo {
  final int id;
  final String content;
  final String title;
  static const String TABLENAME = "todos";

  Todo({this.id, this.content, this.title});

  Map<String, dynamic> toMap() {
    return {'id': id, 'content': content, 'title': title};
  }
}

Esta es la clase Todo la cual contiene un id, el contenido del Todo y el título. Además, agregamos una constante que incluye el nombre de la tabla de Todos, así como también una función toMap que utilizaremos más adelante.

Con la clase Todo creada, vamos a agregar nuestra dependencia de la siguiente forma en el archivo pubspec.yml.

dependencies:
  flutter:
    sdk: flutter
  sqflite:
  path:

Ahora tenemos que crear nuestra clase DatabaseHelper, la cual tiene la función de tratar con la base de datos.

class DatabaseHelper {
  //Create a private constructor
  DatabaseHelper._();

  static const databaseName = 'todos_database.db';
  static final DatabaseHelper instance = DatabaseHelper._();
  static Database _database;

  Future<Database> get database async {
    if (_database == null) {
      return await initializeDatabase();
    }
    return _database;
  }

  initializeDatabase() async {
    return await openDatabase(join(await getDatabasesPath(), databaseName),
        version: 1, onCreate: (Database db, int version) async {
      await db.execute(
          "CREATE TABLE todos(id INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL, title TEXT, content TEXT)");
    });
  }
}

Tenemos varias cosas de las que hablar sobre esta clase. Para empezar, acceder a una base de datos es una operación asíncrona, lo que significa que debemos utilizar Futures para inicializar la propiedad database.

En la función initializeDatabase vamos a inicializar una base de datos siempre y cuando no tengamos una ya creada previamente, para inicializarla vamos a llamar la función initializeDatabase y dentro de ella llamaremos a la función openDatabase de la librería de sqflite.

La función openDatabase necesita los siguientes parámetros:

Un String que sería el Path de la base de datos. Para esto, debido a que tratamos con sistemas operativos diversos, hay que utilizar la función join() que se encargará de unir los path que vamos a obtener con la función getDatabasesPath().
Una función anónima que será ejecutada cuando la base de datos sea creada. En nuestro caso, una función anónima con una query creará una tabla dentro de la base de datos.

La función insertTodo() toma como parámetro un objeto Todo. Obtiene la base de datos que habíamos creado previamente y utiliza la función de la librería sqflite execute() para insertar los datos en nuestra base de datos. A esta función le vamos a pasar los siguientes parámetros.

El nombre de la tabla en la cual vamos a insertar la información. En nuestro caso tenemos el nombre declarado como una constante en nuestra clase de Todo.
Un map que incluye la información que queremos insertar. Para esto hemos creado la función toMap de nuestra clase Todo que convierte nuestro objeto Todo a un Map.
Y una constante definida por la librería que especificará qué acción tomar cuando se encuentre un conflicto. Nosotros vamos a tomar la acción de reemplazar siempre que tenga un conflicto.

Finalmente, podemos crear nuestra Screen la cual nos servirá para crear nuestro Todo object. Dado que los campos serán editables necesitaremos utilizar un StatefulWidget con su respectivo State. Los widgets que vamos a utilizar son Textfields y FloatingActionButton para guardar el Todo.

class CreateTodoScreen extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return _CreateTodoState();
  }
}

class CreateTodoScreen extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return _CreateTodoState();
  }
}

class _CreateTodoState extends State<CreateTodoScreen> {
  final descriptionTextController = TextEditingController();
  final titleTextController = TextEditingController();

  @override
  void dispose() {
    super.dispose();
    descriptionTextController.dispose();
    titleTextController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Retrieve Text Input'),
      ),
      body: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              decoration: InputDecoration(
                  border: OutlineInputBorder(), labelText: "Title"),
              maxLines: 1,
              controller: titleTextController,
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              decoration: InputDecoration(
                  border: OutlineInputBorder(), labelText: "Description"),
              maxLines: 10,
              controller: descriptionTextController,
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
          child: Icon(Icons.check),
          onPressed: () {
            DatabaseHelper.instance.insertTodo(Todo(
              title: titleTextController.text,
              content: descriptionTextController.text));
            Navigator.pop(context, "Your todo has been saved.");
          }),
    );
  }
}

Luego de crear nuestro State necesitamos utilizar un TextEditingController para cada uno de nuestros TextFields, estos los declaramos al principio de nuestro Widget y hacemos un override de la función dispose() para llamar a la respectiva función dispose de cada TextEditingController.

Al momento de crear nuestros TextFields, le pasamos a cada TextField su respectivo controller. Finalmente, para llamar al DatabaseHelper e indicarle que llame a la función insertTodo debemos pasarle a la propiedad onPressed del floatingActionButton una función anónima con un Todo creado usando el texto obtenido de los TextEditingController.

Actualizando nuestros Todo's

Para actualizar nuestros Todo's necesitamos hacer ciertas modificaciones. Primero, vamos a agregar esta nueva función a nuestro DatabaseHelper.

updateTodo(Todo todo) async {
    final db = await database;

    await db.update(Todo.TABLENAME, todo.toMap(),
        where: 'id = ?',
        whereArgs: [todo.id],
        conflictAlgorithm: ConflictAlgorithm.replace);
  }

En esta función obtenemos el objeto database y luego llamamos a la función update() de la librería y le pasamos los siguientes parámetros.

El nombre de la tabla que hemos declarado previamente en nuestro objeto Todo.
El objeto Todo convertido a un map usando la función toMap.
La cláusula where la cual aplicará cambios en cualquier fila que cumpla con esa condición
El parámetro whereArgs que sustituirá el signo de interrogación en nuestra cláusula where.
Y finalmente, una constante que especifica el tipo de algoritmo a usar en caso de que haya un conflicto.

Ahora debemos actualizar nuestra UI. Primero, vamos a modificar nuestra DetailTodoScreen para poder editar nuestro Todo. Necesitaremos agregar nuestro Todo como un parámetro opcional en el constructor del DetailTodoScreen, luego crear una property Todo en nuestro Widget y debido a que es un StatefulWidget debemos pasarle este Todo al State.

class DetailTodoScreen extends StatefulWidget {
    final Todo todo;

  const DetailTodoScreen({Key key, this.todo}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _CreateTodoState(todo);
}

En nuestro State necesitamos agregar también nuestro Todo al constructor, crear la property Todo y sobrescribir la función initState de nuestro Widget para que podamos asignar el Título y la descripción de nuestro Todo a los respectivos TextField.

class _CreateTodoState extends State<DetailTodoScreen> {
  Todo todo;
  final descriptionTextController = TextEditingController();
  final titleTextController = TextEditingController();

  _CreateTodoState(this.todo);

  @override
  void initState() {
    super.initState();
    if (todo != null) {
      descriptionTextController.text = todo.content;
      titleTextController.text = todo.title;
    }
  }

Finalmente, en la función anónima que le pasamos como parámetro onPressed vamos a llamar a otra función llamada saveTodo, la cual se encargará de insertar un nuevo Todo en caso de que no tengamos ningún Todo para editar o de modificar un Todo existente que hayamos pasado como parámetro a nuestro State. Al final debemos llamar también a la función setState.

Así es como se verá nuestro State luego de esas modificaciones.

class _CreateTodoState extends State<DetailTodoScreen> {
  Todo todo;
  final descriptionTextController = TextEditingController();
  final titleTextController = TextEditingController();

  _CreateTodoState(this.todo);

  @override
  void initState() {
    super.initState();
    if (todo != null) {
      descriptionTextController.text = todo.content;
      titleTextController.text = todo.title;
    }
  }

  @override
  void dispose() {
    super.dispose();
    descriptionTextController.dispose();
    titleTextController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Retrieve Text Input'),
      ),
      body: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              decoration: InputDecoration(
                  border: OutlineInputBorder(), labelText: "Title"),
              maxLines: 1,
              controller: titleTextController,
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              decoration: InputDecoration(
                  border: OutlineInputBorder(), labelText: "Description"),
              maxLines: 10,
              controller: descriptionTextController,
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
          child: Icon(Icons.check),
          onPressed: () async {
            _saveTodo(titleTextController.text, descriptionTextController.text);
            setState(() {});
          }),
    );
  }

  _saveTodo(String title, String content) async {
    if (todo == null) {
      DatabaseHelper.instance.insertTodo(Todo(
          title: titleTextController.text,
          content: descriptionTextController.text));
      Navigator.pop(context, "Your todo has been saved.");
    } else {
      await DatabaseHelper.instance
          .updateTodo(Todo(id: todo.id, title: title, content: content));
      Navigator.pop(context);
    }
  }
}

Deleting a Todo

Para borrar un Todo necesitamos comenzar por borrar una función de nuestra clase DatabaseHelper.

deleteTodo(int id) async {
    var db = await database;
    db.delete(Todo.TABLENAME, where: 'id = ?', whereArgs: [id]);
  }

Esta función llama a la función delete de la librería Sqflite a la cual le pasamos el nombre de la tabla la cláusula where y el id del Todo a eliminar.

Luego, para agregar una función de borrado en nuestra lista de todos vamos a necesitar realizar los siguientes pasos. Primero, en nuestro ListTile widget vamos a necesitar a utilizar un parámetro opcional llamado trailing, en este parámetro vamos a pasarle un IconButton, dentro de ese parámetro onPressed vamos a pasarle una función anónima que llamará a la función del DatabaseHelper encargada de borrar el Todo.

class  ReadTodoScreen extends StatefulWidget {
  @override
  _ReadTodoScreenState createState() => _ReadTodoScreenState();
}

class _ReadTodoScreenState extends State<ReadTodoScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Saved Todos'),
      ),
      body: FutureBuilder<List<Todo>>(
        future: DatabaseHelper.instance.retrieveTodos(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                  title: Text(snapshot.data[index].title),
                  leading: Text(snapshot.data[index].id.toString()),
                  subtitle: Text(snapshot.data[index].content),
                  onTap: () => _navigateToDetail(context, snapshot.data[index]),
                  trailing: IconButton(
                      alignment: Alignment.center,
                      icon: Icon(Icons.delete),
                      onPressed: () async {
                        _deleteTodo(snapshot.data[index]);
                        setState(() {});
                      }),
                );
              },
            );
          } else if (snapshot.hasError) {
            return Text("Oops!");
          }
          return Center(child: CircularProgressIndicator());
        },
      ),
    );
  }
}

_deleteTodo(Todo todo) {
  DatabaseHelper.instance.deleteTodo(todo.id);
}

_navigateToDetail(BuildContext context, Todo todo) async {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => DetailTodoScreen(todo: todo)),
  );
}

¡Y eso es todo! Ahora tenemos un app que puede almacenar un Todo, leerlo desde base de datos, actualizarlo y borrarlo.

El código está disponible aquí. Si quieres leer más artículos como estos o tienes alguna duda, puedes encontrarme en las siguientes redes sociales.

Instagram: www.instagram.com/codingpizza
Twitter: www.twitter.com/coding__pizza
Facebook: www.facebook.com/codingpizza
Site: www.codingpizza.com

Storing in database with Flutter

Giuseppe Vetri — Wed, 08 Jan 2020 20:26:18 +0000

Storing text in the Database is one of the most current operations that we, as developers, are going to do. Sometimes we need to save the data from the server so the users can open the app and if there's data already stored we can show that first, or if we want to implement an have an offline mode.

Today we're going to see how to store data in Flutter. Our app is going to be a Todo app, where we store these todos to watch them later.

What we're going to need:

A Todo Class.
A Screen, which let us create the Todo.
Add the dependency for Sqflite.
A DatabaseHelper which is a class that contains the logic of the Database.

First, we're going to create our Todo class:

class Todo {
  final int id;
  final String content;
  final String title;
  static const String TABLENAME = "todos";

  Todo({this.id, this.content, this.title});

  Map<String, dynamic> toMap() {
    return {'id': id, 'content': content, 'title': title};
  }
}

This is the Todo Class which has a content and a title as properties.

Before creating our DatabaseHelper, we're going to add our dependencies to the pubspec.yml to do that we need to add the following lines below the flutter dependency.

dependencies:
  flutter:
    sdk: flutter
  sqflite:
  path:

Now we're going to create our DatabaseHelper, which is going to manage the Database for us.

class DatabaseHelper {
  //Create a private constructor
  DatabaseHelper._();

  static const databaseName = 'todos_database.db';
  static final DatabaseHelper instance = DatabaseHelper._();
  static Database _database;

  Future<Database> get database async {
    if (_database == null) {
      return await initializeDatabase();
    }
    return _database;
  }

  initializeDatabase() async {
    return await openDatabase(join(await getDatabasesPath(), databaseName),
        version: 1, onCreate: (Database db, int version) async {
      await db.execute(
          "CREATE TABLE todos(id INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL, title TEXT, content TEXT)");
    });
  }
}

There's a lot of things going on there. Let's explain them. Accessing a database is an asynchronous operation, which means we must use Futures to initialize the database property. In the function InitializeDatabase, we're going to create a database using the openDatabase function from the Sqlite library we added before, and we must pass the following parameters.

A join function with the databasesPath(), which is the path of the Database in their respective OS (Android, iOS) and the database name, which is a constant we already defined.
An anonymous function that is going to be executed when the onCreate status is reached and inside of that function a query to be executed. In this example a query to create a Table.

The insertTodo() function is a function that takes a Todo as a parameter and retrieves our previously created Database.

Then we call the insert() function, which takes three parameters:

The name of the table in which it's going to insert that data, in our case is already defined in our Todo class.
A map, which is the data we want to insert. For this, we have our toMap function, which converts our Todo object to a Map.
A constant to decide which algorithm to use when the Database found the same Todo twice, in our case, we're going to use the replace one.

Finally, we can create our Screen to fill our Todo object. Since the fields are editable, the Widget must be a StatefulWidget, so we create our StatefulWidget with its respective State. The widgets that we're going to use are the TextFields and a FloatingActionButton to save the Todo.

class CreateTodoScreen extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return _CreateTodoState();
  }
}

class CreateTodoScreen extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return _CreateTodoState();
  }
}

class _CreateTodoState extends State<CreateTodoScreen> {
  final descriptionTextController = TextEditingController();
  final titleTextController = TextEditingController();

  @override
  void dispose() {
    super.dispose();
    descriptionTextController.dispose();
    titleTextController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Retrieve Text Input'),
      ),
      body: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              decoration: InputDecoration(
                  border: OutlineInputBorder(), labelText: "Title"),
              maxLines: 1,
              controller: titleTextController,
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              decoration: InputDecoration(
                  border: OutlineInputBorder(), labelText: "Description"),
              maxLines: 10,
              controller: descriptionTextController,
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
          child: Icon(Icons.check),
          onPressed: () {
            DatabaseHelper().insertTodo(Todo(
                title: titleTextController.text,
                content: descriptionTextController.text));
            Navigator.pop(context, "Your todo has been saved.");
          }),
    );
  }
}

To retrieve the data from the TextField, we're going to use TextEditingControllers, which we initialize in the CreateTodoState after that we override the function dispose of the CreateTodoState and call the dispose function of each controller.

Lately, when we create our TextField, we pass their respective controller as a parameter. Finally, in the FloatingActionButton onPressed parameter, we pass an anonymous function, which calls our DatabaseHelper and inserts the Todo object.

Retrieving the Todo's from the database.

What we're going to do first is to add another Button to our HomeScreen. For that, let's create a new Widget called ReadTodoButton. This Widget returns a RaisedButtonWidget, which has an onPressed function that uses the Navigator to send us to the next screen, which is the ReadTodoScreen, we're going to create this screen in the future.

The ReadTodoButton Widget is going to look like this:

class ReadTodoButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: () {
        _navigateToReadTodoScreen(context);
      },
      child: Text("Read Todo"),
    );
  }

  _navigateToReadTodoScreen(BuildContext context) async {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => ReadTodoScreen()),
    );
  }
}

Then we're going to add it to the children's array of our HomeScreen Widget. And the result would be this:

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Create a todo'),
      ),
      body: Column(
        children: <Widget>[
          Center(child: CreateTodoButton()),
          Center(child: ReadTodoButton())
        ],
      ),
    );
  }
}

Now we're going to add a new function in our DatabaseHelper class, which is going to return the previously saved Todo's. First, we're going to create a function that returns a list of Todo items wrapped in a Future object, and since it returns a Future, that function should include the async reserved keyword in their signature.

Future<List<Todo>> retrieveTodos() async {
    // Logic we will add later
}

Then we will retrieve our Database object, and since it is an async operation, we're going to use the await keyword.

final Database db = await database;

The next step we're going to do is create a list of maps that have a key which is a String and a value that is going to be dynamic, we obtain that value from a query function of the database. It will look as follows.

final List<Map<String, dynamic>> maps = await db.query(Todo.TABLENAME);

In the database query function, we're going to pass the name of the table, which is defined in our Todo object.

In the last step we need to convert that List of maps into a List of Todos. To do that, we need to create a list using the generate function which takes two parameters, the size of the List and an anonymous function.

In the last step, we need to convert that list of maps into a List of Todos. For that we would need to create a list using the generate function which takes two parameters, the size of the list and an anonymous function.

For the size of the list we can use the maps.length, which gives us the length that we're going to need. For the anonymous function, we need to create a function that returns a Todo for each element of the list.

The code will look like this:

return List.generate(maps.length, (i) {
      return Todo(
        id: maps[i]['id'],
        title: maps[i]['title'],
        content: maps[i]['content'],
      );
    });

We take the id, title, and content from the maps variable, then we assign it to our new Todo object.

With that function, we finally have a function that returns our Todo's object. The only thing left is creating a new screen, which shows the Todo's.

To create our ReadTodoScreen, we're going to create a Stateless Widget, which has a List as a Body . But since we're going to retrieve the data from a Future, we need to wrap our list in a FutureBuilder.

A FutureBuilder is a widget that requires a generic which is declared inside angle brackets, and requires as a parameter a Future and the Builder.

We're going to pass as a Future the function of our Database Helper, and as a builder, an anonymous function that needs the context and a snapshot, and the anonymous function return a Widget.

Inside the anonymous function, we must check if the snapshot (The object which contains the Todo's) has data using the .hasData() function. If it has, we're going to return a new ListView widget, otherwise, we're going to show a text with a message that says, "Oops!".

We must also return a CircularProgressIndicator to show while the operation is ongoing.

The code of the screen is the following:

class ReadTodoScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Saved Todos'),
      ),
      body: FutureBuilder<List<Todo>>(
        future: DatabaseHelper().retrieveTodos(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                  title: Text(snapshot.data[index].title),
                  subtitle: Text(snapshot.data[index].content),
                );
              },
            );
          } else if (snapshot.hasError) {
            return Text("Oops!");
          }
          return CircularProgressIndicator();
        },
      ),
    );
  }
}

Note: The ListView.Builder function requires the size of the list that is going to be displayed and a Widget that is each tile of the list.

Updating the Todo's

To update our Todo's, we need to make certain modifications. First, we're going to add this new function to the DatabaseHelper.

updateTodo(Todo todo) async {
    final db = await database;

    await db.update(Todo.TABLENAME, todo.toMap(),
        where: 'id = ?',
        whereArgs: [todo.id],
        conflictAlgorithm: ConflictAlgorithm.replace);
  }

In this function, we obtain the Database, then we call the function update() from the Database, and we pass the next parameters.

The tablename we previously defined in our Todo object.
The Todo object converted into a map using the toMap function.
The where parameter. Which is the clause to apply the changes. In our case, we want to use the id.
The whereArgs parameter which is going to replace the "?" sign in the where clause.
And finally, a Constant that specifies the algorithm to use in case there is a conflict.

At this time, we need to update our UI. First, we're going to modify our DetailTodoScreen to allow us to edit our Todo. We need to add a Todo as an optional parameter in our DetailTodoScreen constructor, then create a final Todo property in our Widget, and since it is a StatefulWidget, pass it to the State.

class DetailTodoScreen extends StatefulWidget {
    final Todo todo;

  const DetailTodoScreen({Key key, this.todo}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _CreateTodoState(todo);
}

In our State we need to add the Todo as a parameter in the constructor, create the Todo property and override the initState in which we're going to set the title and the description if the Todo exists.

class _CreateTodoState extends State<DetailTodoScreen> {
  Todo todo;
  final descriptionTextController = TextEditingController();
  final titleTextController = TextEditingController();

  _CreateTodoState(this.todo);

  @override
  void initState() {
    super.initState();
    if (todo != null) {
      descriptionTextController.text = todo.content;
      titleTextController.text = todo.title;
    }
  }

Finally, in the onPressed anonymous function, we need to call a new function, which is saveTodo, that is going to call the DatabaseHelper updateTodo function if we passed a previously created Todo. Otherwise, it will insert a new Todo in our Database. Finally, in the same onPressed anonymous function, we're going to call the setState function.

This is how our State is going to look.

class _CreateTodoState extends State<DetailTodoScreen> {
  Todo todo;
  final descriptionTextController = TextEditingController();
  final titleTextController = TextEditingController();

  _CreateTodoState(this.todo);

  @override
  void initState() {
    super.initState();
    if (todo != null) {
      descriptionTextController.text = todo.content;
      titleTextController.text = todo.title;
    }
  }

  @override
  void dispose() {
    super.dispose();
    descriptionTextController.dispose();
    titleTextController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Retrieve Text Input'),
      ),
      body: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              decoration: InputDecoration(
                  border: OutlineInputBorder(), labelText: "Title"),
              maxLines: 1,
              controller: titleTextController,
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              decoration: InputDecoration(
                  border: OutlineInputBorder(), labelText: "Description"),
              maxLines: 10,
              controller: descriptionTextController,
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
          child: Icon(Icons.check),
          onPressed: () async {
            _saveTodo(titleTextController.text, descriptionTextController.text);
            setState(() {});
          }),
    );
  }

  _saveTodo(String title, String content) async {
    if (todo == null) {
      DatabaseHelper.instance.insertTodo(Todo(
          title: titleTextController.text,
          content: descriptionTextController.text));
      Navigator.pop(context, "Your todo has been saved.");
    } else {
      await DatabaseHelper.instance
          .updateTodo(Todo(id: todo.id, title: title, content: content));
      Navigator.pop(context);
    }
  }
}

Deleting a Todo

To delete a Todo, we need to add the delete function to our DatabaseHelper.

deleteTodo(int id) async {
    var db = await database;
    db.delete(Todo.TABLENAME, where: 'id = ?', whereArgs: [id]);
  }

This function calls the delete function from the Sqflite library in which we pass the table name, the where clause, and the id of the Todo.

Then in our UI, we're going to add a delete button in our Todo List. In our ListTile Widget, we're going to pass as a trailing parameter an IconButton Widget. Finally, in the onPressed parameter, we're going to add an anonymous function that calls the deleteTodo from the DatabaseHelper class.

class  ReadTodoScreen extends StatefulWidget {
  @override
  _ReadTodoScreenState createState() => _ReadTodoScreenState();
}

class _ReadTodoScreenState extends State<ReadTodoScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Saved Todos'),
      ),
      body: FutureBuilder<List<Todo>>(
        future: DatabaseHelper.instance.retrieveTodos(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                  title: Text(snapshot.data[index].title),
                  leading: Text(snapshot.data[index].id.toString()),
                  subtitle: Text(snapshot.data[index].content),
                  onTap: () => _navigateToDetail(context, snapshot.data[index]),
                  trailing: IconButton(
                      alignment: Alignment.center,
                      icon: Icon(Icons.delete),
                      onPressed: () async {
                        _deleteTodo(snapshot.data[index]);
                        setState(() {});
                      }),
                );
              },
            );
          } else if (snapshot.hasError) {
            return Text("Oops!");
          }
          return Center(child: CircularProgressIndicator());
        },
      ),
    );
  }
}

_deleteTodo(Todo todo) {
  DatabaseHelper.instance.deleteTodo(todo.id);
}

_navigateToDetail(BuildContext context, Todo todo) async {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => DetailTodoScreen(todo: todo)),
  );
}

That's it! We now have an app that can store a Todo, read it from the database, update it, and delete it.

The code is available here. Thanks for reading! If you don't want to miss any of this post, don't forget to follow me!

Instagram: www.instagram.com/codingpizza
Twitter: www.twitter.com/coding__pizza
Facebook: www.facebook.com/codingpizza
Site: www.codingpizza.com

The Ectasy of the gratitude

Giuseppe Vetri — Tue, 10 Dec 2019 19:43:19 +0000

Photo by Hello I'm Nik 🇬🇧 on Unsplash

I’m an Android developer from Venezuela who works and lives in Madrid. I’ve been in this city for two years, I love Madrid and Spanish food. I always wanted to start a blog where I could share my experiences and learnings as a developer. I started it, and I wrote a few blog posts about Android and other tech things. I even started a series about Dart, a programming language.

But this is not a post about tech

It’s about gratitude.

In the last months, I’ve been coming home after work and relaxed a bit playing some games. After 45–60 minutes, I started writing or learning something from the internet, I never stop learning. I’m a big fan of startups, programming, community management, and lately marketing so I’m always learning something new about one of these topics.

After writing or learning about some of these, I go to the gym because I have some back pain if I do not continuously exercise, and it also helps me to clear my mind. When I come back from the gym, I take a shower, cook dinner, and chat with my partner about how was our day.

A few weeks ago, I visited my grandma in Sicily and had a great time. Being so many days without wifi consumed all my data plan, just checking twitter to see what was happening in the Android Dev Summit, a big event in the Android community where a lot of awesome developers things are showed. The FOMO was real.

After I came back from Sicily, I got bloated about the many things I wanted to learn, and that collapsed me. I just got blocked mentally, and I could barely write three words about anything or sit in front of the computer to do some learning. I thought it was because of the trip, so I took some rest that week. That didn’t work.

It started to get worse at the point I could not even go to the gym to distract myself. The anxiety caused me to do anything, and doing anything caused me more anxiety. I was in a loop of anxiety.

I always read Twitter to keep myself informed about the latest news in the Android Community. But thanks to the feature of seeing what people like, fights appeared in my feed. If you have a Twitter account, you can see how much lack of empathy it’s on the platform. The sum of these events affected me indirectly.

The gratitude

I determined that I could not be feeling that way too much time, so I decided to start doing something, and I slowly started to learn and write again. Maybe there were just 15 minutes or less. But eventually, I got a result, I created another piece of content.

After publishing it, a person that consume my content send me a private message through Instagram and told me that he really liked my content and has been helpful to him. He even asked me how can I create content when he was always out of time. He made me remind two things, that I created a blog to provide value to at least one person, and the other thing is If you are sharing your knowledge even a little at a time, you are doing more than most people. This message reminded me of how much I like to learn and how much I like to share what I learn. It made me think deeply about how gratitude it’s the ecstasy of sharing.

Be grateful

I don’t know about you, but probably you have some content creators which content you really like. Maybe it’s a podcast, a publisher, or a YouTuber; whatever the platform is, take a minute or two to send them a tweet, leave a comment or send them a private message about how much you like their content. Maybe they’re passing through a hard time, and that message would make their day.

Have you ever feel this way? What is holding you for sharing your knowledge? Leave it in the comments, and let’s talk about it 🙌.

Classes en Dart

Giuseppe Vetri — Wed, 16 Oct 2019 17:12:52 +0000

Hola! Hemos estado aprendiendo sobre Dart por algunas semanas, si has seguido esta serie espero que hayas aprendido un montón. En este post vamos a hablar sobre cómo funcionan las Clases en Dart, las cuales son uno de los fundamentos básicos de la programación.

📘 Qué es una Clase

Una clase es un plano de un objeto. Dentro de la clase podemos encontrar las propiedades del objeto sus constructores y sus funciones. Ya hemos hablado de funciones en Dart así que no tocaremos ese tema en esta oportunidad.

Properties

Las propiedades de una clase son variables declaradas al interno de una clase. Por ejemplo, si tenemos una clase Car (Carro), el color del carro puede ser una variable String con el valor Blue (Azul).

Constructors

Los constructores nos ayudan a inicializar los valores de nuestros objetos. Cuando creamos una clase y pasamos como variable algún parámetro, estamos usando un constructor.

🤔 Cómo crear una clase en Dart

Para crear una Clase en Dart, necesitamos usar la palabra reservada Class y luego indicar el nombre de la clase. Por ejemplo:

class Dog {

}

Con esto podemos crear cualquier Dog(Perro) que queramos. Pero hay más, nuestro perro necesita un nombre, así que vamos a crear una variable que le asigne ese nombre.

class Dog {
  String name = "Rocky";
}

¡Genial! Ahora cada vez que creemos un nuevo Dog, va a tener Rocky como su nombre. Ahora necesitamos agregar la habilidad de ladrar a nuestro perro. Para eso, necesitamos crear una función.

class Dog {
  String name = "Rocky";

  void bark(){
    print("Woof Woof! 🐶");
  }
}

Ya hemos creado nuestro plano para un perro llamado Rocky el cual puede ladrar. Todo lo que necesitamos hacer es crear un objeto a partir de este plano, para ello hay que utilizar el constructor.

var MyDoggo = Dog();

En el ejemplo anterior se muestra cómo podemos crear un objeto Dog utilizando un constructor por defecto. Pero, ¿qué pasaría si necesitaramos crear otro perro con otro nombre? No todos los perros se llaman Rocky.

🐶 Creando perros únicos con constructores

Para asignar el nombre de nuestros perros necesitamos crear un constructor dentro de una clase, este constructor nos ayudará a inicializar nuestros objetos perros con su respectivo nombre.

class Dog {
  String name = "Rocky";

  Dog(this.name)

  void bark(){
    print("Woof Woof! 🐶");
  }
}

Ahora podemos crear otros perros de la siguiente forma.

var doggo = Dog("Sparky");
doggo.bark();

Existen otros tipos de constructores. Vamos a hablar de ellos en el siguiente post de CodingSlices Extended. Recuerda darle al follow para que no te pierdas los ultimos post.

🐕 Para terminar, dejo aquí este perrito.

Eso es todo

Espero que te haya gustado. Estoy creando nuevas CodingSlices sobre Flutter en Instagram, puedes seguirme en **@codingpizza** y en Twitter como @coding__pizza para aprender sobre Flutter.

Ahora es tu turno

Puedes probar estos conceptos en Entornos de desarrollo (IDE) como Intellij Idea Community, que es gratis e instalar el plugin de Dart, si te gusta Visual Studio Code tambien puedes probar estos conceptos en él y por último, si prefieres algo online puedes utilizar **Dartpad.**

¿Quieres saber más sobre Dart?

Si te ha gustado este post y estás interesado en aprender Dart, actualmente estoy escribiendo más artículos como este en un ebook, el cual es un curso básico de Dart que te ayudará a tener un buen conocimiento que luego podrás utilizar para empezar con Flutter ;). Puedes darte de alta **en este link** ya que el ebook será totalmente gratis.

Classes in Dart

Giuseppe Vetri — Wed, 16 Oct 2019 17:07:51 +0000

Hi! We've been learning about Dart for some weeks, if you've been following this series, you know we learned a lot of topics. In this post we're going to talk about Classes in Dart, the Classes are one of the basics of programming.

📘 What is a Class

A class is the object blueprint. Inside the class, we can find their properties, constructors, and functions. We already talked about functions in Dart, so we're going to skip that part.

Properties

The class properties are variables declared inside the class. For example, if we have a class named Car, the car color can be a string variable with the value "Blue."

Constructors

The constructors help us to initialize and set the values of our object. When we create a class and pass some variable as a parameter, we're using a constructor.

🤔 How to create a Class in Dart

To create a Class in Dart, we need to use the reserved keyword class and then the name of the Class. For example:

class Dog {

}

With this, we can create any Dog we want. But there's more our Dog needs a name, so let's create a variable that assigns that name.

class Dog {
  String name = "Rocky";
}

That's great! Now every time we create a new Dog, it's going to have Rocky as the name. Now we need to add our dog's ability to bark. For that, we need to create a function.

class Dog {
  String name = "Rocky";

  void bark(){
    print("Woof Woof! 🐶");
  }
}

We already have a blueprint for a Dog named Rocky who can bark. All we need to do is create an object from this blueprint is use the constructor.

var MyDoggo = Dog();

The previous example shows us how we can create a Dog object using a default constructor. But what if we want to create another dog with another name? Not all dogs are named Rocky.

🐶 Creating uniques dogs with constructors

To assign the name of our Dogs, we need to create a Constructor inside the class, which can help us to initialize our Dog objects with their name.

class Dog {
  String name = "Rocky";

  Dog(this.name)

  void bark(){
    print("Woof Woof! 🐶");
  }
}

Now we can create our Dogs using the following code.

var doggo = Dog("Sparky");
doggo.bark();

There are more Constructors. We're going to talk about those in the next CodingSlices Extended. Remember to follow me, so you don't miss it.

🐕 Finally, here is a spooky dog .

That's it

I hope you liked it. Do you want to learn more? I'm also creating new CodingSlices about Flutter on Instagram, feel free to follow me in @codingpizza for more content.

I'm also writing an eBook, which is a basic course of Dart. It's about all you need to know to get started with Flutter. It's free, and you can sign-up here.

Now is your turn

You can try these concepts in IDE like Intellij idea community, which is free. All you need is to install the Dart plugin. Visual Studio Code or in some online editors like Dartpad.

Funciones increibles que debes conocer al trabajar con Dart

Giuseppe Vetri — Wed, 09 Oct 2019 18:25:01 +0000

Funciones increibles que debes conocer al trabajar con Dart

En los post anteriores sobre Dart, hablamos sobre las Collections. Hablamos sobre Lists,Maps y sets. Y en esta oportunidad vamos a hablar sobre funciones asombrosas y que nos pueden ayudar en muchos casos.

Nota:En este post usamos varios elementos que probablemente quieras repasar, como las funciones anónimas. Si es tu primera vez leyendo esta serie de artículos puedes aquí debajo te dejo el link para que leas sobre funciones en Dart.

Funciones en Dart

Map

The map function exists in many programming languages, and Dart is not an exception. This function creates a new list after transform every element of the previous list. This function takes as a parameter an anonymous function. Let's see an example.

var list = List.of({1,2,3,4});
var mappedList = list.map( (number) => number *2);
print(mappedList);

Esta función existe en muchos lenguajes de programación y dart no es la excepción. Esta función crea una nueva lista después de transformar cada elemento de la lista anterior. Esta función recibe como parámetro una función anónima. Veamos un ejemplo.

En este ejemplo, hemos creado una función anónima que tiene un número como parámetro y hemos multiplicado este número por dos. El resultado de la función es (2,4,6,8).

Sort

Muchas veces necesitamos recibir una lista desde el servidor y mostrarla al usuario. Pero ¿qué ocurre si necesitamos aplicar algunos filtros y ordenarla de forma ascendente? Esta función está aquí para ayudarnos con eso, veamos un ejemplo.

var randomNumbers = List.of({14, 51, 23, 45, 6, 3, 22, 1});
randomNumbers.sort();
print(randomNumbers);

El resultado es el siguiente.

[1, 3, 6, 14, 22, 23, 45, 51]

Generate

La función generate es genial cuando necesitas crear una lista de números para hacer una prueba rápida. Toma como parámetro un número el cual indica el tamaño de la lista y una función anónima.

var generatedList =
      List.generate(10, (number) => number * Random().nextInt(50));
  print(generatedList);

Dentro de la función anónima obtenemos un número y lo multiplicamos por un número aleatorio entre 0 y 50.

Take

Ya solo con su nombre en inglés te explica que hace esta función simplemente toma los primeros elementos de la lista. Puede ser útil cuando tengas una lista de competidores y quieras solo obtener el top tres de todos los competidores.

var list = List.from([1,2,3,4,5,6]);
var topThreeList = list.take(3);
print(topThreeList);

El resultado es: 1,2,3

Skip

Esta función es el opuesto de la función Take, está ignora la cantidad de elementos que se le indique. En caso de que se le indiquen 3 elementos obviara los primeros tres elementos de la lista.

var list = List.from([1,2,3,4,5,6]);
var skipList = list.skip(3);
print(skipList);

El resultado es: 4,5,6

Where

Esta función es una de mis favoritas ya que nos ayuda a crear una lista con los elementos que cumplan con el predicado que se le pasa como parámetro. Esto quiere decir que solo los elementos que cumplan con la condición dada se agregaran a la lista.

Digamos que tenemos una lista aleatoria de números en caso de que queramos una lista con solo numeros pares bastará realizar esa comprobación en la función anónima. Veamos el siguiente ejemplo.

var randomNumbers = List.of({14, 51, 23, 45, 6, 3, 22, 1});
var evenNumbers = randomNumbers.where((number => number.isEven));
print(evenNumbers);

El resultado del ejemplo anterior es el siguiente: 14,6,22.

Un buen tip

Estas funciones pueden combinarse para lograr una mejor solución. Puedes combinar la función where con la función sort para obtener los números pares ordenados de forma ascendente por ejemplo.

var randomNumbers = List.of({14, 51, 23, 45, 6, 3, 22, 1});
var evenNumbers = randomNumbers.where((number) => number.isEven);
evenNumbers = evenNumbers.toList()..sort();
print(evenNumbers);

En este ejemplo tomamos solamente los números pares de la lista randomNumberList, luego convertimos esos números a una Lista y finalmente usamos el operador de cascada .. para ordenar la lista de forma ascendente.

El resultado final es: [6, 14, 22]

Eso es todo

Espero que te haya gustado. Estoy creando nuevas CodingSlices sobre Flutter en Instagram, puedes seguirme en **@codingpizza** y en Twitter como @coding__pizza para aprender sobre Flutter.

Ahora es tu turno

¿Quieres saber más sobre Dart?

Post anterior

Si estás interesado en más post como este puedes revisar mis otros artículos sobre Dart.

Powerful list functions in Dart that you should know

Giuseppe Vetri — Wed, 09 Oct 2019 18:03:09 +0000

In the previous post about Dart, we talked about Collections in Dart. We spoke about List, Maps, and sets. And today, we're going to talk about some functions that are awesome and can help you in many cases.

Note: In this post we use in various cases the anonymous function, if you are not familiarized with it, you can check my other post about functions.

Map

var list = List.of({1,2,3,4});
var mappedList = list.map( (number) => number *2);
print(mappedList);

In this example, we create an anonymous function that has a number as a parameter, and we multiply that number per two. The result of this function is: (2,4,6,8)

Sort

Sometimes you receive a list from the server, and you need to show it to the user. But what if you need to apply some filter and sort it in an ascending way? Well, this function can help you.
Let's see an example.

var randomNumbers = List.of({14, 51, 23, 45, 6, 3, 22, 1});
randomNumbers.sort();
print(randomNumbers);

This is the result.

[1, 3, 6, 14, 22, 23, 45, 51]

Generate

This function is great when you need to create a list of numbers for a test. It takes as first parameter a number, which indicates the size of the list and an anonymous function which tells the generate() function how to create the numbers inside the list.

Here's an example.

var generatedList =
      List.generate(10, (number) => number * Random().nextInt(50));
  print(generatedList);

In the example we can see how we can generate a list of ten elements and multiply it by a random number from 0 to 50.

Take

The take function literally takes the first elements from the list. This can be useful when you have a list of winners and want to take the top 3. Here's how you can use it.

var list = List.from([1,2,3,4,5,6]);
var topThreeList = list.take(3);
print(topThreeList);

The result of this example is: 1,2,3

Skip

The skip function is the opposite of the take function. This function ignores the first elements and creates a list of the remaining ones. This example shows how you can use it.

var list = List.from([1,2,3,4,5,6]);
var skipList = list.skip(3);
print(skipList);

The result is: 4,5,6

Where

This function is one of my favorites. It helps us to create a list of elements that satisfy a predicate. That means that your element list is going to have only elements that meet your requirements. Let's say that you need to create a list of only even numbers.

var randomNumbers = List.of({14, 51, 23, 45, 6, 3, 22, 1});
var evenNumbers = randomNumbers.where((number => number.isEven));
print(evenNumbers);

The result of this example is 14,6,22.

An awesome tip

These function can be combined to achieve a greater solution. You can combine a where function with a sort function to get the even numbers sorted in ascending way.

var randomNumbers = List.of({14, 51, 23, 45, 6, 3, 22, 1});
var evenNumbers = randomNumbers.where((number) => number.isEven);
evenNumbers = evenNumbers.toList()..sort();
print(evenNumbers);

In this example we take only the even numbers from the randomNumbersList, then we convert these numbers to a List finally we use the cascade operator .. to sort() the list in an ascending way.

The final result is: [6, 14, 22]

That's it

I hope you liked it. Do you want to learn more? I'm also creating new CodingSlices about Flutter on Instagram, feel free to follow me in @codingpizza for more content.

I'm also writing an eBook, which is a basic course of Dart. It's about all you need to know to get started with Flutter. It's free, and you can sign-up here.

Now is your turn

You can try these concepts in IDE like Intellij idea community, which is free. All you need is to install the Dart plugin. Visual Studio Code or in some online editors like Dartpad.

If you're interested in more posts like this, you can check out my others post about Dart.