DEV Community: Bart van Wezel

Pragmatic Programmer or Clean Coder?

Bart van Wezel — Mon, 06 Feb 2023 17:44:13 +0000

In many lists of the best books for programmers, you can find both “The Pragmatic Programmer” by Andrew Hunt and David Thomas and “The Clean Coder: A Code of Conduct for Professional Programmers” by Robert Martin. Both are great books and worthy of that spot on the list. If you have the time to read both, I would totally recommend that! However, time is limited so let’s look at some of the similarities and differences between those two books!

Similarities

The Pragmatic Programmer and The Clean Coder are both books aimed at improving software development practices and promoting professionalism in the field. The two books share some common themes and similarities:

Emphasis on quality: Both books place a strong emphasis on the importance of writing high-quality code that is maintainable, reliable, and effective. They both emphasize the importance of testing and debugging to ensure code works as expected.
Focus on process: Both books emphasize the importance of having a well-defined process for software development, including practices such as continuous integration, code review, and testing.
Attention to detail: Both books stress the importance of paying close attention to details, such as naming conventions, documentation, and error handling, in order to write better software.
Professionalism: Both books emphasize the importance of being a professional programmer, and they both stress the importance of ethics, integrity, and professionalism in software development.
Embracing change: Both books acknowledge that software development is a rapidly changing field, and they encourage programmers to stay up-to-date with new technologies, best practices, and development methodologies.

So, they share many of the same goals and themes, including a focus on quality, process, attention to detail, professionalism, and embracing change. They both provide valuable guidance for software developers looking to improve their practices and advance their careers.

Differences

Despite some similarities, there are also some differences between the two books:

Scope: “The Pragmatic Programmer” provides a broader range of topics, covering software development practices, tools, and best practices. On the other hand, “The Clean Coder” focuses specifically on the ethics and responsibilities of a professional software developer.
Approach: “The Pragmatic Programmer” takes a more practical, hands-on approach to software development, with a focus on tips, tricks, and techniques for writing better code. “The Clean Coder,” on the other hand, takes a more philosophical approach, exploring the values and principles that underlie professional software development.
Tone: “The Pragmatic Programmer” has a more lighthearted and informal tone, while “The Clean Coder” is written in a more serious and reflective tone.
Topics covered: “The Pragmatic Programmer” covers a wide range of topics, including design patterns, debugging, testing, and code organization, while “The Clean Coder” focuses specifically on ethical issues, such as managing deadlines, communicating with clients, and maintaining professional standards.

In conclusion, while both The Pragmatic Programmer and The Clean Coder are aimed at improving software development practices, they differ in scope, approach, tone, and the specific topics they cover. “The Pragmatic Programmer” is a more comprehensive guide to software development, while “The Clean Coder” is a more focused guide to professional ethics and responsibility.

Flutter – Using Google Cloud Functions with parameters

Bart van Wezel — Mon, 18 Apr 2022 15:42:06 +0000

In the previous blog post, I describe how to call a Google Cloud Function without Firebase. However, the only option was to invoke the function. Most of the time, more complex functions are necessary. This blog post will describe how to pass information to your Google Cloud Function. This can be done in multiple ways.

Creating the Google Cloud Function

First, let’s update the Google Cloud Function. This function should handle the variables. There are two easy ways to take these variables. The values can be passed through the query parameters or the body of the HTTP Call. Of course, when passing the information through the body of the HTTP call, the call should become a POST call instead of a GET call.

    // Check URL parameters for "name" field
    // "world" is the default value
    String name = request.getFirstQueryParameter("name").orElse("world");

You can use the getFirstQueryParameter to retrieve the query parameters of the request. To read the body, you need to get the writer of the request. One way to parse this is by using the Google GSON library. If you are planning on using the same way, you should add the following dependency:

    <dependency>
      <groupId>com.google.code.gson</groupId>
      <artifactId>gson</artifactId>
      <version>2.8.8</version>
    </dependency>

Now you can parse the body of the request and access the variables there:

package com.example;

import com.google.cloud.functions.HttpFunction;
import com.google.cloud.functions.HttpRequest;
import com.google.cloud.functions.HttpResponse;
import com.google.gson.Gson;
import com.google.gson.JsonElement;
import com.google.gson.JsonObject;
import com.google.gson.JsonParseException;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.logging.Logger;

public class Example implements HttpFunction {
  private static final Logger logger = Logger.getLogger(Example.class.getName());

  private static final Gson gson = new Gson();

  @Override
  public void service(HttpRequest request, HttpResponse response)
      throws IOException {
    String name = request.getFirstQueryParameter("name").orElse("world");

    try {
      JsonElement requestParsed = gson.fromJson(request.getReader(), JsonElement.class);
      JsonObject requestJson = null;

      if (requestParsed != null && requestParsed.isJsonObject()) {
        requestJson = requestParsed.getAsJsonObject();
      }

      if (requestJson != null && requestJson.has("name")) {
        name = requestJson.get("name").getAsString();
      }
    } catch (JsonParseException e) {
      logger.severe("Error parsing JSON: " + e.getMessage());
    }

    var writer = new PrintWriter(response.getWriter());
    writer.printf("Hello %s!", name);
  }
}

You can follow the instructions here if you want a complete description of deploying this function on the Google Cloud Platform.

Updating the Flutter Application

This explanation starts with the Flutter Application of the previous blog post. The blog post explains how to call the Google Cloud function with the HTTP package. The application works with a Future; thus, the result is only shown when the HTTP call is done. This is the HTTP call:

import 'package:http/http.dart' as http;

Future<String> callCloudFunction() async {
  final response = await http
      .get(Uri.parse('insert-url-of-your-cloud-fuction'));
  if (response.statusCode == 200) {
    return response.body;
  } else {
    throw Exception('Failed to execute function');
  }
}

To call the function with the query parameters, you can add those variables to the GET request URL.

import 'package:http/http.dart' as http;

Future<String> callCloudFunction() async {
  final response = await http
      .get(Uri.parse('insert-url-of-your-cloud-fuction?name=Bart'));
  if (response.statusCode == 200) {
    return response.body;
  } else {
    throw Exception('Failed to execute function');
  }
}

The Google Cloud Function also looks in the body of the request. To include a body in your HTTP call, you should convert the GET method to a POST method. Now, you can send the body the function expects in the following way:

import 'dart:convert';
import 'package:http/http.dart' as http;

Future<String> callCloudFunction() async {
  final response = await http.post(Uri.parse('insert your url here'),
      body: jsonEncode(<String, String>{
        'name': 'Bart',
      }));
  if (response.statusCode == 200) {
    return response.body;
  } else {
    throw Exception('Failed to execute function');
  }
}

These steps are all that is necessary to call your cloud function with variables! The code of this example is available here on Github. If you still have any questions, comments, suggestions, or remarks, please let me know!

The post Flutter – Using Google Cloud Functions with parameters appeared first on Barttje.

Flutter – Calling a Google Cloud Function

Bart van Wezel — Tue, 29 Mar 2022 18:05:20 +0000

Most examples of calling a cloud function are using Firebase. With Firebase it is easy to write and maintain your cloud functions. Especially if you are using other functionalities that Firebase offers. However, there is a limitation on the languages you can use to write your cloud functions. With Firebase it is only possible to write your functions in Javascript or Typescript. Luckily it is not that hard to call the cloud functions directly.

Creating the Google Cloud Function

For this example, I will use a simple cloud function. This cloud function returns ‘Hello world!’. In the next blog post, I will go into more extensive use cases for cloud functions.

package com.example;

import com.google.cloud.functions.HttpFunction;
import com.google.cloud.functions.HttpRequest;
import com.google.cloud.functions.HttpResponse;
import java.io.BufferedWriter;

public class Example implements HttpFunction {
  @Override
  public void service(HttpRequest request, HttpResponse response) throws Exception {
    BufferedWriter writer = response.getWriter();
    writer.write("Hello world!");
  }
}

If you want a full description of how to deploy this function on the Google Cloud Platform, you can follow the instructions here. There is also an option to guide you while on the console. That shows you the current progress in deploying the cloud function.

Creating the Flutter Application

Now that I have a cloud function let’s call the function. Since the function can be accessed through a HTTP call, I have to install the HTTP package.

flutter pub add http

Now that the HTTP package is installed, I can call the function by using the get method of the HTTP package.

import 'package:http/http.dart' as http;

Future<String> callCloudFunction() async {
  final response = await http
      .get(Uri.parse('insert-url-of-your-cloud-fuction'));
  if (response.statusCode == 200) {
    return response.body;
  } else {
    throw Exception('Failed to execute function');
  }
}

That is all that is necessary. Now I can call this method in the initState of a Widget. This will then show the result of the cloud function in a Text Widget.

class BasicGoogleCloudFunctionExample extends StatefulWidget {
  const BasicGoogleCloudFunctionExample({Key? key}) : super(key: key);

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

class _BasicGoogleCloudFunctionExampleState extends State<BasicGoogleCloudFunctionExample> {
  late Future<String> futureAlbum;

  @override
  void initState() {
    super.initState();
    futureAlbum = callCloudFunction();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Google Cloud Function - basic',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Google Cloud Function - basic'),
        ),
        body: Center(
          child: FutureBuilder<String>(
            future: futureAlbum,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Text(snapshot.data!);
              } else if (snapshot.hasError) {
                return Text('${snapshot.error}');
              }
              return const CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}

These steps are all that is necessary to call your cloud function! The code of this example is available here on Github. If you still have any questions, comments, suggestions, remarks, please let me know!

The post Flutter – Calling a Google Cloud Function appeared first on Barttje.

Toggling the flash modus on a Flutter camera

Bart van Wezel — Thu, 17 Mar 2022 19:46:41 +0000

In the last blog post, I show how to take a picture in Flutter using the camera package. In this blog post, I will dive deeper into the camera by explaining how to turn the flash modus on and off!

I will start this example with the result of the previous blog post. In that blog post, I describe all steps necessary to show the camera’s preview and take a picture. One of the steps is to initialize the controller with the first camera. This controller has the following method to change the flash mode:

cameraController.setFlashMode(FlashMode.always);

There are different options to provide here. Besides on, and off there is also an option to set the flash mode to auto or torch. For my own example, I will toggle between the off and always modus.

/// The possible flash modes that can be set for a camera
enum FlashMode {
  /// Do not use the flash when taking a picture.
  off,

  /// Let the device decide whether to flash the camera when taking a picture.
  auto,

  /// Always use the flash when taking a picture.
  always,

  /// Turns on the flash light and keeps it on until switched off.
  torch,
}

So I know which method to call. Since I also want to change the icon, I will make the Widget a StatefulWidget. This way, I can change the icon after pressing the button. I provide the Widget with the controller directly, but it is also possible to provide the Widget with a Callback function.

The Widget is simply a button, and when the user presses the button I call the method to change the modus of the flash. Furthermore, I change the local variable to switch to a different icon. I did not find a way (yet) to extract the current flash modus from the controller. Otherwise, you could listen to the result of the setFlashMode before calling the setState method.

class CameraFlashWidget extends StatefulWidget {
  final CameraController cameraController;

  const CameraFlashWidget({Key? key, required this.cameraController}) : super(key: key);

  @override
  State<CameraFlashWidget> createState() => _CameraFlashWidgetState();
}

class _CameraFlashWidgetState extends State<CameraFlashWidget> {
  FlashMode flashMode = FlashMode.off;
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: FloatingActionButton(onPressed: () {
                setState(() {
                  if (flashMode == FlashMode.off) {
                    widget.cameraController.setFlashMode(FlashMode.always);
                    flashMode = FlashMode.always;
                  } else {
                    widget.cameraController.setFlashMode(FlashMode.off);
                    flashMode = FlashMode.off;
                  }
                });
              }, child: flashMode == FlashMode.off ? const Icon(Icons.flashlight_off) : const Icon(Icons.flashlight_on)),
            ),
          ],
        ),
      ],
    );
  }
}

Finally, all I need to do is to add the Widget in a Stacked Widget to make sure the button is visible above the preview. Another option is to make the preview smaller and change the placements of the buttons yourself.

Stack(
    children: [
      SizedBox(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: CameraPreview(controller!),
      ),
      CameraFlashWidget(
        cameraController: controller,
      ),
    ],
  )

These steps are all that is necessary to change the flash modus of the camera! All of is this is possible thanks to the work of a lot of people on the camera package! The code of this example is available here on Github. If you still have any questions, comments, suggestions, remarks, please let me know!

The post Toggling the flash modus on a Flutter camera appeared first on Barttje.

Switching camera’s in Flutter

Bart van Wezel — Sun, 06 Mar 2022 15:55:38 +0000

In the last blog post, I show how to take a picture in Flutter using the camera package. In this blog post, I will dive deeper into the camera by explaining how to switch between the different cameras on the phone.

I will start this example with the result of the previous blog post. In that blog post, I describe all steps necessary to show the camera’s preview and take a picture. One of the steps is to initialize the controller with the first camera. Next, the app looks up all available cameras on the phone during the start-up with the following line of code:

  cameras = await availableCameras();

I always use the same camera description to initialize the controller. Unfortunately, this means the user cannot interact with the other cameras. So let’s change that! The first step is to add a button for each camera. You might use another approach with the increasing number of cameras new devices have, but you can use the same idea.

class CameraSelectionWidget extends StatelessWidget {
  final CameraDescription selectedCamera;

  const CameraSelectionWidget({Key? key, required this.selectedCamera}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final List<Widget> toggles = [];
    for (final CameraDescription cameraDescription in cameras) {
      toggles.add(
        Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            Container(
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Radio<CameraDescription>(
                    groupValue: selectedCamera,
                    value: cameraDescription,
                    onChanged: (value) {
                      //
                    },
                  ),
                  Icon(
                    getCameraLensIcon(cameraDescription.lensDirection, context),
                  ),
                ],
              ),
            )
          ],
        ),
      );
    }
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: toggles,
      ),
    );
  }
}

IconData getCameraLensIcon(CameraLensDirection direction, BuildContext context) {
  switch (direction) {
    case CameraLensDirection.back:
      return Icons.camera_rear;
    case CameraLensDirection.front:
      return Icons.camera_front;
    case CameraLensDirection.external:
      return Icons.camera;
  }
}

This Widget will show all available cameras with a radio button next to them. When the camera is in use, the radio button is active. Furthermore, I determine the icon based on the direction of the camera. However, selecting another camera does not change anything yet. For this, I need to provide a callback to update the controller.

  void updateController(CameraDescription description) {
    controller?.dispose().then((value) {
      setState(() {});
      controller = CameraController(description, ResolutionPreset.max);
      controller!.initialize().then((_) {
        setState(() {});
      });
    });
  }

Here I initialize the controller again and update the Widget when the camera is initialized. To call this method from the camera selection Widget, I need to provide the method to the Camera Selection Widget. I also wrap the preview with a Stack. This makes it possible to draw the camera selection above the preview.

Stack(
    children: [
      SizedBox(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: CameraPreview(controller!),
      ),
      CameraSelectionWidget(
        selectedCamera: controller!.description,
        onChanged: updateController,
      ),
    ],
    )

To handle the function, I need to add it to the constructor method, and then I can call the method when the onchanged of the radio button is triggered.

class CameraSelectionWidget extends StatelessWidget {
  final CameraDescription selectedCamera;
  final Function(CameraDescription) onChanged;

  const CameraSelectionWidget({Key? key, required this.selectedCamera, required this.onChanged}) : super(key: key);

// and the change in the radio button:

  Radio<CameraDescription>(
    groupValue: selectedCamera,
    value: cameraDescription,
    onChanged: (value) {
      onChanged(value!);
    },
  ),

These steps are all that is necessary to switch between cameras in a Flutter application! All of is this is possible thanks to the work of a lot of people on the camera package! The code of this example is available here on Github. If you still have any questions, comments, suggestions, remarks, please let me know!

The post Switching camera’s in Flutter appeared first on Barttje.

Taking pictures with Flutter

Bart van Wezel — Mon, 28 Feb 2022 18:51:08 +0000

In this blog post, I will show you how to use the camera package to take a picture in Flutter. Furthermore, I will provide an example of how to deal with the result file. In this example, I will open another page to display the picture. Please note that even though most of the features of the camera package are working, the plugin is still under development and some of the APIs might change.

Setup the project

Before we can start with coding, we are going to add the camera package to the project.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  camera: ^0.9.4+14

Do not forget to install the dependency, running the following command:

flutter pub get

This is also a good time to make sure your settings for Android and IOs are correct. For Android, you have to make sure the minSdkVersion in the android/app/build.gradle file is at least 21. For IOs, you only have to make a change if you compile for a version below 10.0. The instructions with those changes are listed here.

Preview of the camera

Before I can show the preview of the camera, I need to initialize the cameras. I do this by calling the availableCameras method. This method is provided by the camera package. This method returns the available cameras on the device running the application. Since the method is asynchronous I delay the startup of the application till they are loaded.

List<CameraDescription> cameras = [];

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  cameras = await availableCameras();
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: CameraApp(),
    ),
  );
}

Now I have a list of cameras. Let’s use this to create a new CameraController. To create a new camera controller I need a camera and a resolution. In this example, I will use the maximum resolution and the first camera. To update the view with the preview of the camera, I have to wait till the controller is initialized, to call the setState method. After this method, the Widget will update and show the current preview of the camera.

To show the current view of the camera controller, I can use the CameraPreview Widget. This Widget shows the current result of the camera. I use the SizedBox to make the CameraPreview occupy the full screen.

class CameraApp extends StatefulWidget {
  const CameraApp({Key? key}) : super(key: key);

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

class _CameraAppState extends State<CameraApp> {
  late CameraController controller;

  @override
  void initState() {
    super.initState();
    controller = CameraController(cameras[0], ResolutionPreset.max);
    controller.initialize().then((_) {
      setState(() {});
    });
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (!controller.value.isInitialized) {
      return Container();
    }
    return Scaffold(
      body: SizedBox(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: CameraPreview(controller),
      ),
    );
  }
}

Taking a picture

Now that the application shows the current result of the view of the camera. Let’s take a picture. Before I take a picture, let’s first add a button to the Widget.

return Scaffold(
  body: SizedBox(
    width: MediaQuery.of(context).size.width,
    height: MediaQuery.of(context).size.height,
    child: CameraPreview(controller),
  ),
  floatingActionButton: FloatingActionButton(
    child: const Icon(Icons.camera),
    onPressed: () {
        // todo
    },
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);

On the pressing of the button, I can take a picture. I can take a picture by calling the corresponding method on the controller. This method returns a file. This file can be used for different methods, but I provide the file to the display widget to show the result of the camera.

controller.takePicture().then((value) {
  Navigator.of(context).push(
    MaterialPageRoute(
      builder: (context) => ImageDisplayWidget(
        imagePath: value.path,
      ),
    ),
  );
});

The ImageDisplayWidget simply shows the image by displaying the file in the Image Widget.

class ImageDisplayWidget extends StatelessWidget {
  final String imagePath;

  const ImageDisplayWidget({Key? key, required this.imagePath}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Image.file(File(imagePath))),
    );
  }
}

This is all that is necessary to take a picture in a Flutter application! The code of this example can be found here on Github. If you still have any questions, comments, suggestions or other remarks feel free to let me know!

The post Taking pictures with Flutter appeared first on Barttje.

Cat and Mice – Part 1: CI/CD

Bart van Wezel — Thu, 01 Jul 2021 16:00:02 +0000

In this weekly blog series about Cat and Mice, I will discuss the whole process, from design to implementation, from publishing to artificial intelligence. Cat and Mice is a game that is played on a checkers board. One player plays the cat and has only one piece. The piece of this player starts at one side of the checker’s board. On the other side are four pieces of the mice. The goal for the cat is to reach the other side of the checker’s board. The goal for the mice is to prevent this. This first article will discuss setting up the CI/CD and creating a beta release in the Google Play Store.

About this blog series

This blog series will follow me along in the making of a simple game with Flutter. Not just the technical parts but also everything that happens around the implementation. Here are the links to the previous blog posts:

Part 0: The Goal

Setting up CI/CD

Before I start with the implementation, I will first set up the CI/CD. There are three services mentioned in the Flutter documentation that provide an all-in-one solution.

I have decided to try Codemagic for this project, but I am pretty sure the other two options are just as easy to set up. It is also possible to integrate the delivery with your current workflows. For example, in the Flutter documentation, they explain how to integrate Fastlane to make this work.

Before I get started with Codemagic, there are few things to be done. First, I have to sign the App for with my key in a Keystore. This way, I can sign the release to let Google know that the same developers created the App. Next, I followed the steps here to generate a new Keystore and adjust the build.gradle. Finally, I made sure that I could build a new release and uploaded it as a new app on the Play Console.

Configuring the signing is simple in Codemagic. In the signing step, you can upload the key store and the passwords. Setting up the automatic deployment was a little bit more difficult, but nothing to be afraid of. You can follow the steps here to configure the publishing part of the pipeline. Finally, you can upload the downloaded credentials in Codemagic, and all should be ready.

Mistakes during configuration

Unfortunately, not everything went according to plan. Luckily those were minor mistakes, but they still take some time to figure out. I will include the details to show nobody is perfect and hopefully prevent you from making the same mistakes.

Made some big mistakes with my first builds

The first mistake was foolish. The error message says the key was not the same as the key in the first version I uploaded to the Play Console. Unfortunately, this meant the play Store could not detect my signing. So I uploaded my key store again. Then, I double-checked the keys in the error message with the key in the key store. When making a new build locally, I finally realized that I did not commit my changes to Github.

Publishing failed :| Google Play failed to upload artefacts. The Android App Bundle was signed with the wrong key. Found: xx, expected: yy: { "error": { "code": 403, "message": "The Android App Bundle was signed with the wrong key. Found: SHA1: xx, expected: yy", "status": "PERMISSION_DENIED" } }

The second error was a pretty obvious one. The version is already used. This should be an easy fix by committing a new version. However, I struggled with the version. I forgot about how the version properties are used and tried to update the version wrongly. The version before the + is used as the version name, and the version behind the + is used as version code. I updated the version name but not the code. Perhaps I should have included the build versioning by Codemagic.

Publishing failed :| Google Play failed to upload artefacts. APK specifies a version code that has already been used.: { "error": { "code": 403, "message": "APK specifies a version code that has already been used.", "status": "PERMISSION_DENIED" } }

Wrong way to update the version

Draft version, cannot upload new version now, will show result later 🙂

Publishing failed :| Google Play failed to upload artefacts. Only releases with status draft may be created on draft app.: { "error": { "code": 400, "message": "Only releases with status draft may be created on draft app.", "status": "INVALID_ARGUMENT" } }

Create a logo

I made a start with the design and created a few simple logos with Squarespace. Then, I used Squarespace to look at some of the icons available that match the App’s theme. I have found three icons that are a pretty good match. The logos look pretty good for now, but they will probably need an upgrade later.

Checkers board with some checkers

Checkers board with ‘correct’ colors of the squares

Reversed color checkers board

Inspire ideas

I have also spent some time looking at other checkers’ games. When looking, I was a bit amazed by how many checkers games there are. Luckily my game is a variation I have not found yet, but I also think it will be hard for people to find it. Anyway, that is is a problem for later. So first, let’s take a look at some exciting checkers’ games. The first is this game here! I like the main menu, as the options for games are clear. The settings and the shop are less visible and will probably be used less. I also like the settings menu, but I probably do not need as many settings as the rules are clear for my game.

The second one that I liked was All-In-One Checker. Here the option for a one or two-player game is in the new game menu. It is also possible to set the difficulty of the AI here. Some of the settings here might be useful to implement later, such as highlighting possible moves and keeping the screen on.

This is a screenshot from the last game that I liked. I liked that you can give the player names, which might be useful to know which turn it is. The slider for the difficulty might be useful to depend on how the AI is going to work. Furthermore, it has more games options. This might be useful to improve the popularity of other games.

After looking at the other checker’s games, I have realized two things. First, there are many ways to design the menu and the game. Second, there are a lot of checker’s games in the Play Store. In the next post, I will discuss the architecture of the application. If you want to follow along, I will publish my updates on Twitter. In addition, you can see my progress on the code on Github.

The post Cat and Mice – Part 1: CI/CD appeared first on Barttje.

Flutter Drag and Drop – State Management

Bart van Wezel — Thu, 17 Jun 2021 18:06:13 +0000

We have showed how to implement a simple drag and drop application in Flutter. However the state management in the blog post was very simplistic and probably only useful for the most basic use cases. Of course, you can still learn about drag and drop and integrate it with your own state management solution. In this blog post, we will show how to integrate the drag and drop with the Riverpod state management solution. However, there are more excellent state management solutions with which you can do exactly the same.

Setup the project

Before we can start with coding, we are going to add some dependencies to the project. First, we will need Flutter Hooks and Hooks Riverpod for the state management. Then, for the hash method, we are going to use the quiver package.

dependencies:
  flutter:
    sdk: flutter
  flutter_hooks: ^0.17.0
  hooks_riverpod: ^0.14.0+4
  quiver: ^3.0.1

Do not forget to install the dependency, running the following command:

flutter pub get

That is it! We can now start with rewriting the example

Create the models

In this example we will use two different checkers. Black and white checkers. We assume this might be used for a turn based gym where one player may move the white checkers and another player the black checkers.

enum PlayerType {
  BLACK,
  WHITE,
}

We will also need a coordinate. The coordinate references a place on the grid. Each square on the grid has a position. The top left corner is 0,0 and the bottom right corner will be 8,8. We are going to override the equals operator so that we can compare the coordinates without having to compare the x and y of the coordinate. This means we also have to override the hashCode. Here we will use the hash2 method provided by the quiver package to create a hash from the x and y values.

import 'package:quiver/core.dart';

class Coordinate {
  final int x;
  final int y;

  Coordinate(this.x, this.y);

  @override
  bool operator ==(Object o) => o is Coordinate && o.y == y && o.x == x;

  @override
  int get hashCode => hash2(x, y);
}

Each square will have a coordinate. This is just a wrapper class, for when we might need to retain more information about squares.

import 'package:drag_drop_state_management/app/model/coordinate.dart';

class Square {
  final Coordinate coordinate;

  Square(this.coordinate);
}

Finally, the checker. Each checker has an id, so that we can easily compare checkers. Furthermore, we have a player type, to define whether it is a black or white checker. The checkers have a coordinate, that references on which square it is placed. The dragging boolean defines whether the checkers is currently dragged. We will need this for removing the display of the checker on the current square.

class Checker {
  final int id;
  final PlayerType type;
  final bool isDragging;
  final Coordinate coordinate;

  Checker(this.id, this.type, this.coordinate, {this.isDragging = false});

  Checker copyWith({bool? isDragging, Coordinate? coordinate}) {
    print('hello');
    return Checker(this.id, type, coordinate ?? this.coordinate,
        isDragging: isDragging ?? this.isDragging);
  }

  @override
  bool operator ==(Object o) => o is Checker && o.id == id;

  @override
  int get hashCode => id;
}

Setup the ViewModel

We are going to create a simple provider for the current player. For this, we use a simple provider and state provider. You can find more details in this blog post with a Riverpod State Management Example. The state provider will manage the current player. Here black is the starting player. The provider makes this value accessible in the Widgets.

final _currentPlayer = StateProvider((ref) => PlayerType.BLACK);
final currentPlayer = Provider((ref) => ref.watch(_currentPlayer).state);

Here things get a little bit more interesting! We are going to create another provider which will keep track of the information about the checkers. We are going to provide some methods to help the Widgets change the state of the current checkers. The first method will start the dragging of a checker. That means we have to reset the state and adjust the dragging variable of the checker. Then, we can apply the same trick to cancel the drag. Finally, the finishing drag method. We will call this method from the square with the new position. We adjust the coordinate of that checker. Furthermore, we use the watch function we supplied to the provider to set the current player’s new state.

final checkers = StateNotifierProvider>(
    (ref) => CheckerNotifier(ref.read));

class CheckerNotifier extends StateNotifier> {
  Reader read;
  CheckerNotifier(this.read)
      : super([
          Checker(1, PlayerType.BLACK, new Coordinate(0, 0)),
          Checker(2, PlayerType.WHITE, new Coordinate(0, 1))
        ]);

  void add(Checker checker) {
    state = [...state, checker];
  }

  void startDrag(Checker selectedChecker) {
    state = [
      for (final checker in state)
        if (checker == selectedChecker)
          checker.copyWith(isDragging: true)
        else
          checker,
    ];
  }

  void cancelDrag(Checker selectedChecker) {
    state = [
      for (final checker in state)
        if (checker == selectedChecker)
          checker.copyWith(isDragging: false)
        else
          checker,
    ];
  }

  void finishDrag(Checker selectedChecker, Coordinate coordinate) {
    state = [
      for (final checker in state)
        if (checker == selectedChecker)
          checker.copyWith(isDragging: false, coordinate: coordinate)
        else
          checker
    ];
    read(_currentPlayer.notifier).state =
        read(_currentPlayer.notifier).state == PlayerType.BLACK
            ? PlayerType.WHITE
            : PlayerType.BLACK;
  }
}

Displaying the data

Before we start with the Widgets, we should wrap the main app with the provider scope. This makes sure we can use the providers in our Widgets.

void main() => runApp(ProviderScope(child: DragAndDropExample()));

class DragAndDropExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.green,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("Drag and Drop Example"),
        ),
        body: BoardPage(),
      ),
    );
  }
}

Just like in the previous drag and drop blog post, we will create a grid with the GridView. This will create an eight by eight grid of square widgets. On this grid we will draw the DragTargets as SquareWidgets. The SquareWidgets will contain the checkers which we can start dragging around.

class BoardPage extends StatelessWidget {
  final List squares = SquareInitializer.squares();
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      physics: new NeverScrollableScrollPhysics(),
      padding: const EdgeInsets.all(4),
      crossAxisCount: 8,
      children: squares.map((square) => SquareWidget(square)).toList(),
    );
  }
}

class SquareInitializer {
  static List squares() {
    List squares = [];
    for (var y = 0; y < 8; y++) {
      for (var x = 0; x < 8; x++) {
        squares.add(Square(Coordinate(x, y)));
      }
    }
    return squares;
  }
}

Implementing the SquareWidget

Before we start with the square Widget, let's take a small look at how we can access the current checkers. We can use the useProvider method from Riverpod Hooks to watch the state of the checkers. Using this method makes sure that our Widget does update when the state is changed. We can access the state to check if any checker matches our current position. Caution: the firstWhereOrNull method is provided by the collection package, which you will have to import.

List checking = useProvider(checkers);
Checker? checkerOnSquare = checking
    .firstWhereOrNull((element) => element.coordinate == square.coordinate);

Another piece of code we will use in the Widget is the context.read method. Here we can access the functions we provided in our StateNotifier. We have to read the notifier to access the methods provided.

context.read(checkers.notifier).finishDrag(data, square.coordinate);

To use those methods, we are going to create a HookWidget. In the HookWidget, we can use the hook method to access the state. Then, we use another hook to change the square when a checker is above the square. For this, we can use the useState hook to determine whether it is possible to drop the checker there. If it is possible, we are going to change the color of the square. The most important part here is the child of the Container. This is the CheckerWidget if the checker exists and is not currently being dragged.

class SquareWidget extends HookWidget {
  final Square square;

  SquareWidget(this.square);

  Color getColor(bool willAccept) {
    if (willAccept) {
      return Colors.brown[300]!;
    }

    if (square.coordinate.x % 2 == square.coordinate.y % 2) {
      return Colors.brown[500]!;
    }
    return Colors.brown[100]!;
  }

  @override
  Widget build(BuildContext context) {
    final willAccept = useState(false);
    List checking = useProvider(checkers);
    Checker? checkerOnSquare = checking
        .firstWhereOrNull((element) => element.coordinate == square.coordinate);
    return DragTarget(
      builder: (BuildContext context, List candidateData, List rejectedData) {
        return Container(
            child: checkerOnSquare != null && !checkerOnSquare.isDragging
                ? CheckerWidget(checkerOnSquare)
                : Container(),
            color: getColor(willAccept.value));
      },
      onWillAccept: (data) {
        willAccept.value = true;
        return true;
      },
      onLeave: (data) {
        willAccept.value = false;
      },
      onAccept: (Checker data) {
        willAccept.value = false;
        context.read(checkers.notifier).finishDrag(data, square.coordinate);
      },
    );
  }
}

Implementing the CheckerWidget

We only have one job left. To implement the CheckerWidget. Here we display the checker. We access the current player and only allow the checker to move if it matches the current player. The type of checker determines the color and the context.read we can access the state provider to cancel the movement.

class CheckerWidget extends HookWidget {
  final Checker checker;

  int allowMove(PlayerType playerType) {
    if (playerType == checker.type) {
      return 1;
    }
    return 0;
  }

  getColor() {
    if (PlayerType.WHITE == checker.type) {
      return Colors.white;
    }
    return Colors.black;
  }

  const CheckerWidget(this.checker);

  @override
  Widget build(BuildContext context) {
    final current = useProvider(currentPlayer);

    return Draggable(
      data: checker,
      maxSimultaneousDrags: allowMove(current),
      onDragStarted: () {
        context.read(checkers.notifier).startDrag(checker);
      },
      onDraggableCanceled: (a, b) {
        context.read(checkers.notifier).cancelDrag(checker);
      },
      feedback: Container(
        child: Icon(
          Icons.circle,
          color: getColor(),
          size: 35,
        ),
      ),
      child: Container(
        child: Icon(
          Icons.circle,
          color: getColor(),
          size: 35,
        ),
      ),
    );
  }
}

Now, when we run the application we can see the checkerboard. We can also drag around the checkers, but only the checker of the current player.

Drag and drop in Flutter with state management

Questions

The last blog post about drag and drop, had some questions. Those questions can be easily solved with the new state management in place.

If I want to swap the checkers, how do I do that?

I assume that the swap will happen when a checker is placed on a square with another checker. We would have to adjust the SquareWidget. Currently, the onWillAccept only returns true if there is no checker placed there. We can adjust that to:

onWillAccept: (data) {
   willAccept.value = true;
   return true;
},

Now we only have to change to finishDrag method. We can look if there is a checker on the destination. If there is a checker on the destination, we can replace the coordinates of that checker with that of the selected checker. This is all we need to do, to swap two checkers.

  void finishDrag(Checker selectedChecker, Coordinate coordinate) {
    Checker? checkerOnDestination =
        state.firstWhereOrNull((checker) => checker.coordinate == coordinate);
    Coordinate origin = selectedChecker.coordinate;
    state = [
      for (final checker in state)
        if (checker == selectedChecker)
          checker.copyWith(isDragging: false, coordinate: coordinate)
        else if (checker == checkerOnDestination)
          checker.copyWith(coordinate: origin)
        else
          checker
    ];
    read(_currentPlayer.notifier).state =
        read(_currentPlayer.notifier).state == PlayerType.BLACK
            ? PlayerType.WHITE
            : PlayerType.BLACK;
  }

If I want to count every movement(when a checker is dropped in the table)?

We are going to add another StateProvider, just like the provider for the current player.

final count = StateProvider((ref) => 0);

This provider can be adjust in the finishDrag method. We can increase the count by one each time a drag is finished. This way we counted every movement.

  void finishDrag(Checker selectedChecker, Coordinate coordinate) {
    Checker? checkerOnDestination =
        state.firstWhereOrNull((checker) => checker.coordinate == coordinate);
    Coordinate origin = selectedChecker.coordinate;
    state = [
      for (final checker in state)
        if (checker == selectedChecker)
          checker.copyWith(isDragging: false, coordinate: coordinate)
        else if (checker == checkerOnDestination)
          checker.copyWith(coordinate: origin)
        else
          checker
    ];
    read(count.notifier).state = read(count.notifier).state + 1;
    read(_currentPlayer.notifier).state =
        read(_currentPlayer.notifier).state == PlayerType.BLACK
            ? PlayerType.WHITE
            : PlayerType.BLACK;
  }

My game will allow the value of a checker to be added with another(in the same line). How could I sum an Element of the square with another using your approach?

Since I am not totally sure what is meant here, I will provide a general approach. I assume each checker has a value. This means we have to adjust the model of the checker. If we want to be able to adjust the value of the checker we should also make the value an input variable for the copyWith method. This value can be accessed on the finish drag method or even from a button. We can also find the other checkers in the column or row by selecting the values from the state:

List checkers = state.where((element) => element.coordinate.y == coordinate.y).toList();

The code of this blog post can be found here on Github. If you are looking for the code provided in the answers to the questions, you should look at the questions branch. Thank you for reading. If you are looking for a more detailed description of the drag and drop, I would suggest reading the original blog post. If you want to know more about testing with Riverpod, you might be interested in reading this blog post. Thank you for reading, and if you have any questions, do not be afraid to ask them.

The post Flutter Drag and Drop – State Management appeared first on Barttje.

Flutter GetX Example – Category Selection

Bart van Wezel — Sat, 12 Jun 2021 18:54:47 +0000

In the latest blog posts, I wrote about Flutter Hooks, Provider, and Riverpod to simplify state management in Flutter. We described how to streamline an interactive category selection application. The user can select categories in one Widget and access those categories in another Widget. With the state management solutions, this is a lot easier to reason about, write and maintain the code. There are multiple solutions, such as GetX and Riverpod, which have different approaches. In this blog post, we will explain how to create an example Flutter application with GetX.

Add GetX to your Flutter Project

Before we can start with coding, we are going to add the GetX dependency to the project first.

dependencies:
  flutter:
    sdk: flutter
  get: ^4.1.4

Do not forget to install the dependency, running the following command:

flutter pub get

That is it! We can now start with the example. The example we are going to build is a list of selectable categories. Underneath the checkboxes is a list that displays the currently selected values. This means that two Widgets need access to the list of categories and the currently selected values.

Before we look at the GetX state management, I will first explain the data we will display. The category has a name and a color. For this, we use a simple CategoryWidget such that we display the category the same everywhere.

class Category {
  final String name;
  final Color color;

  Category(this.name, this.color);
}

class CategoryWidget extends StatelessWidget {
  final Category category;

  const CategoryWidget({Key? key, required this.category}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      category.name,
      style: TextStyle(color: category.color),
    );
  }
}

Creating a GetxController

Now we will create a controller that manages the categories that are available for selection. The controller also manages the currently selected categories. For this, we can use a simple map from

class Controller extends GetxController {
  var _categories = {
    Category("Apple", Colors.red): false,
    Category("Orange", Colors.orange): false,
    Category("Banana", Colors.yellow): false,
  };

  void toggle(Category item) {
    _categories[item] = !(_categories[item] ?? true);
    update();
  }

  get selectedCategories =>
      _categories.entries.where((e) => e.value).map((e) => e.key).toList();

  get categories => _categories.entries.map((e) => e.key).toList();
}

With GetX we can make the categories an observable. This means that we do not have to trigger updates on changes on the current value.

class Controller extends GetxController {
  var _categories = {
    Category("Apple", Colors.red): false,
    Category("Orange", Colors.orange): false,
    Category("Banana", Colors.yellow): false,
  }.obs;

  void toggle(Category item) {
    _categories[item] = !(_categories[item] ?? true);
  }

  get selectedCategories =>
      _categories.entries.where((e) => e.value).map((e) => e.key).toList();

  get categories => _categories.entries.map((e) => e.key).toList();
}

Using the GetXController

Let’s take a look at how to access this controller. We can use the helper function Get.put into creating the Controller for us. With the controller, we can access the public function we created at the controller.

class CategoryFilter extends StatelessWidget {
  final controller = Get.put(Controller());

  @override
  Widget build(BuildContext context) {
    return Flexible(
      child: Obx(
        () => ListView.builder(
          itemCount: controller.categories.length,
          itemBuilder: (BuildContext context, int index) {
            return CheckboxListTile(
              value: controller.selectedCategories
                  .contains(controller.categories[index]),
              onChanged: (bool? selected) =>
                  controller.toggle(controller.categories[index]),
              title: CategoryWidget(category: controller.categories[index]),
            );
          },
        ),
      ),
    );
  }
}

The controller is great, but we also want to access the controller in another Widget. This is possible with the helper function Get.find , GetX will find the Controller for us. When we found the controller, we can again access the controller to display the currently selected categories.

class SelectedCategories extends StatelessWidget {
  final Controller controller = Get.find();

  @override
  Widget build(BuildContext context) {
    return Flexible(
      child: Obx(
        () => ListView.builder(
          itemCount: controller.selectedCategories.length,
          itemBuilder: (BuildContext context, int index) {
            return Padding(
              padding: const EdgeInsets.all(8.0),
              child: CategoryWidget(
                category: controller.selectedCategories[index],
              ),
            );
          },
        ),
      ),
    );
  }
}

With GetX is really simple to extract your state away from the views. GetX is useful for state management and has useful utilities for route management, dependency injection, which we will discuss in the next blog posts. You can find the full code of this example here on Github. If you still have any questions, remarks, or suggestions, do not hesitate to leave a comment or send a message!

The post Flutter GetX Example – Category Selection appeared first on Barttje.

Creating a Cat Voting App with Flutter

Bart van Wezel — Tue, 25 May 2021 21:00:06 +0000

Recently, I discovered The Cat API. This API returns an image of a cat on which we can vote. Their front page shows a great example. As an owner of two adorable cats, I immediately knew that I had to create a simple app for this. Luckily with Flutter, this is a pretty simple thing to build! So what are we going to develop? First, we will display an image of a cat. Then, the user can swipe it to the right to like the image or swipe it to the left to downvote the image. While doing this, we will explain a few standard tasks, such as calling the API, displaying the image, caching the image, and dragging the image.

Setup the Project

Before we can start with coding, we are going to add some dependencies to the project. First, we will need Flutter Hooks and Hooks Riverpod for the state management. Then, for the rest calls, we will need the HTTP package. At last, we are going to add the transparent image package, which we use to show a loading circle while the image is loading.

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3
  flutter_hooks: ^0.17.0
  hooks_riverpod: ^0.14.0
  transparent_image: ^2.0.0

Do not forget to install the dependency, running the following command:

flutter pub get

Drag and drop

Let’s start with the drag and drop of the container. Afterward, we can connect this to the Cat API. Luckily, drag and drop is pretty simple to create in Flutter. We discuss drag and drop in more detail here. But, for now, all we need to know is that we need a Draggable Widget. The Draggable Widget is a Widget that we can drag around, which we need for our App.

class CatPage extends HookWidget {
  @override
  Widget build(BuildContext context) {
    return new LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
      return Center(
        child: Draggable(
          child: Container(
            width: constraints.maxWidth - 10,
            height: constraints.maxHeight - 200,
            child: Card(
              color: Colors.green,
              child: Icon(Icons.downloading),
            ),
          ),
          feedback: Center(
            child: Container(
              width: constraints.maxWidth - 10,
              height: constraints.maxHeight - 200,
              child: Card(
                color: Colors.grey,
                child: Icon(Icons.downloading),
              ),
            ),
          ),
        ),
      );
    });
  }
}

We can now run our app, and we should see a container that we can drag around. As we supplied the child of the Draggable, which is what we see displayed when nothing happens. We also have the feedback parameter. Finally, the Widget that we return is displayed while dragging around the container. This should result in the following app when run:

The child value is displayed before dragging around. The feedback is the Widget that is dragged around.

So now we have a Draggable Widget. But nothing happens when we drop the container on the left or right side. For this, we can override the onDragEnd method. This method provides us with DraggableDetails The DraggableDetails contains information about where the user dropped the Widget. We can use this information to determine whether the user dropped the Widget to the left or right.

        child: Draggable(
          onDragEnd: (details) {
            if (details.offset.dx > 20) {
              print("Is dropped to the right");
            } else if (details.offset.dx < -20) {
              print("Is dropped to the left");
            }
          }

Here the value twenty is a variable that determines how sensitive the App is. You should play around with the value a bit to see what sensitivity bests suit your app. For now, we only print whether the user ended the drag and drop to the left or the right. Since we have no calls to the API yet, let's come back later to replace the logging with the actual implementation!

Placing the image

We can now drag the Widget and detect whether the Widget is slid to the left or right. This means the basis is ready, and we can start by calling the API. If you want to use the API too, you can register for a free API key here. We will call the search API for our app, which will return the information about the image. The search API returns the following information:

[
    {
        "breeds": [],
        "id": "19n",
        "url": "https://cdn2.thecatapi.com/images/19n.gif",
        "width": 499,
        "height": 367
    }
]

For now, we only need the URL, but we will also need the id to vote on the picture. Let's create an object, so we can deserialise the body of the call into our object.

class Cat {
  final String id;
  final String url;
  Cat({
    this.id,
    this.url,
  });

  factory Cat.fromJson(Map json) {
    return Cat(
      id: json['id'],
      url: json['url'],
    );
  }
}

We now have an object, so let's call the API. We can perform a GET call to the endpoint with the HTTP package, we added earlier. Since we have an async method, the result value of the function will be a Future. This means that we can already call this method, and show it is loading till the call is finished.

class CatRepository {
  Future fetchCat() async {
    final response = await http.get(
      Uri.parse('https://api.thecatapi.com/v1/images/search'),
      headers: {"x-api-key": "api-key", "Content-Type": "application/json"},
    );
    if (response.statusCode == 200) {
      return Cat.fromJson(jsonDecode(response.body)[0]);
    } else {
      throw Exception('Failed to load Cat');
    }
  }
}

We will create a FutureProvider to provide us with a Cat. The FutureProvider comes from the Riverpod package. We discuss the Riverpod FututerProvider in more detail in this blog post.

final cat = FutureProvider.autoDispose((ref) async {
  return ref.watch(catRepository).fetchCat();
});

We can retrieve the information about the picture of the cat with the useProvider method. Do not forget to make sure the Widget extends the HookWidget to make use of hooks. Since the provider provides us with a Future, we can implement the when method of this future. Here we can return a different Widget for each scenario. The data scenario is for when the API returns the cat. The loading is when we are still waiting for a result and the error for when the call has failed.

class CatPage extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final currentCat = useProvider(cat);
    return currentCat.when(
        data: (catData) {
          return new LayoutBuilder(
              builder: (BuildContext context, BoxConstraints constraints) {
            return Center(
              child: Draggable(
                onDragEnd: (details) {
                  if (details.offset.dx > 20) {
                    print("Is dropped to the right");
                  } else if (details.offset.dx < -20) {
                    print("Is dropped to the left");
                  }
                },
                child: Container(
                  width: constraints.maxWidth - 10,
                  height: constraints.maxHeight - 200,
                  child: Card(
                    child: Stack(children: [
                      Loading(),
                      Center(child: CatImage(url: catData.url))
                    ]),
                  ),
                ),
                feedback: Center(
                  child: Container(
                    width: constraints.maxWidth - 10,
                    height: constraints.maxHeight - 200,
                    child: Stack(children: [
                      Loading(),
                      Center(child: CatImage(url: catData.url))
                    ]),
                  ),
                ),
              ),
            );
          });
        },
        loading: () => Loading(),
        error: (e, s) => ErrorWidget(s));
  }
}

Here the CatImage is a simple Widget to display the content of an URL.

class CatImage extends StatelessWidget {
  const CatImage({Key key, this.url,}) : super(key: key);

  final String url;

  @override
  Widget build(BuildContext context) {
    return FadeInImage.memoryNetwork(
      placeholder: kTransparentImage,
      image: url,
    );
  }
}

If we run the app, we can now see a cat:

Our first cat in the app, would you give it a thumbs up or a thumbs down?

Rating the image

Now that we have displayed a picture of the cat through the API, it is time to vote on it! For this we can post the following body to the API:

{
  "image_id": "2gl",
  "value": 1
}

To do this, we create an object for serialization of this body.

class Vote {
  final String id;
  final int value;

  Vote(this.id, this.value);

  Map toJson() => {
        'image_id': id,
        'value': value,
      };
}

We can then use the jsonEncode to post this vote to the API.

  rateCat(Vote vote) {
    http.post(Uri.parse("https://api.thecatapi.com/v1/votes"),
        headers: {
          "x-api-key": "api-key",
          "Content-Type": "application/json"
        },
        body: jsonEncode(vote));
  }

Displaying the next image

Finally, we have to get the next image after rating the current cat picture. While doing this, we are going to implement some improvements. We will prefetch the next image while we are rating the current one. After that, we will also display the next image underneath the current one while dragging. For this, we can make great use of the Riverpod family call here. We can supply an ID that will be used to determine whether it will return an existing value or a new one. We can use this to retrieve a new cat picture each time we fetch a cat. This also means we can already make a call for the next cat, while we are retrieving the current cat.

final cat = FutureProvider.autoDispose.family((ref, id) async {
  return ref.watch(catRepository).fetchCat();
});

We can now supply an extra number to the useProvider method. Each time the number is different, another cat is retrieved. Combining this we an useState hook to maintain the count, we can retrieve another cat from the API each time we increase the number. Now after rating the cat, we can increment the count and this will get us another cat.

  @override
  Widget build(BuildContext context) {
    final counter = useState(0);
    final currentCat = useProvider(cat(counter.value));
    return currentCat.when(
        data: (catData) {
          return new LayoutBuilder(
              builder: (BuildContext context, BoxConstraints constraints) {
            return Center(
              child: Draggable(
                onDragEnd: (details) {
                  if (details.offset.dx > 20) {
                    rateCat(Vote(catData.id, 1));
                    counter.value++;
                  } else if (details.offset.dx < -20) {
                    rateCat(Vote(catData.id, 0));
                    counter.value++;
                  }
                },

We can already cache the image of the next cat by calling the _precacheImage _method.

    final nextCat = useProvider(cat(counter.value + 1));
    nextCat.when(
      data: (nextCat) {
        precacheImage(Image.network(nextCat.url).image, context);
      },
      loading: () {},
      error: (o, s) {},
    );

To display the next cat picture while we are dragging the current cat picture, we have to maintain a bit of state. We will use an useState for whether the image is being dragged or not. We can then use this state to determine whether the .. of the Draggable should be the current of the next cat.

class CatPage extends HookWidget {
  rateCat(Vote vote) {
    http.post(Uri.parse("https://api.thecatapi.com/v1/votes"),
        headers: {"x-api-key": "api-key", "Content-Type": "application/json"},
        body: jsonEncode(vote));
  }

  @override
  Widget build(BuildContext context) {
    final counter = useState(0);
    final currentCat = useProvider(cat(counter.value));
    final nextCat = useProvider(cat(counter.value + 1));
    final dragging = useState(false);

    nextCat.when(
      data: (nextCat) {
        precacheImage(Image.network(nextCat.url).image, context);
      },
      loading: () {},
      error: (o, s) {},
    );
    return currentCat.when(
        data: (catData) {
          return new LayoutBuilder(
              builder: (BuildContext context, BoxConstraints constraints) {
            return Center(
              child: Draggable(
                onDragEnd: (details) {
                  if (details.offset.dx > 20) {
                    rateCat(Vote(catData.id, 1));
                    counter.value++;
                  } else if (details.offset.dx < -20) {
                    rateCat(Vote(catData.id, 0));
                    counter.value++;
                  }
                  dragging.value = false;
                },
                onDragStarted: () {
                  dragging.value = true;
                },
                child: Container(
                  width: constraints.maxWidth - 10,
                  height: constraints.maxHeight - 200,
                  child: Card(
                    child: Stack(children: [
                      Loading(),
                      Center(
                        child: dragging.value == false
                            ? CatImage(url: catData.url)
                            : nextCat.when(
                                data: (nextCat) {
                                  return CatImage(url: nextCat.url);
                                },
                                loading: () {
                                  return Loading();
                                },
                                error: (Object error, StackTrace stackTrace) {
                                  return ErrorWidget(stackTrace);
                                },
                              ),
                      )
                    ]),
                  ),
                ),
                feedback: Center(
                  child: Container(
                    width: constraints.maxWidth - 10,
                    height: constraints.maxHeight - 200,
                    child: Card(
                      child: Stack(children: [
                        Loading(),
                        Center(child: CatImage(url: catData.url))
                      ]),
                    ),
                  ),
                ),
              ),
            );
          });
        },
        loading: () => Loading(),
        error: (e, s) => ErrorWidget(s));
  }
}

Thanks for reading this blog post. As a cat lover, I had a great time creating this small App for rating those cats. This is a great simple app to learn more about Flutter. It contains state management, calling an API, and dealing with loading states. You can find the full code of this project on Github.

The final result

The post Creating a Cat Voting App with Flutter appeared first on Barttje.

About those unfinished side projects

Bart van Wezel — Sat, 15 May 2021 18:58:37 +0000

About those unfinished side projects

If you are anything like me, you love to start a lot of side projects. As a software developer, it is easy to start with a lot of different projects. If you know how to program, your options for side projects are infinite. However, if you are even more like me, you left most of those projects on a graveyard. With COVID-19 around, the chance is that you have more time due to less travelling, no social meetings, no sports. More time to finally finish those side projects. Or probably start even more projects. I will discuss some tips that helped me finish some of my side projects.

Define your goals

Defining your goals is an important step. There are many great articles about setting your goals. However, if you are reading this, you probably have no trouble deciding the goals you want to reach. But, this is still an essential step in finishing your side projects. We discuss two pitfalls that can be prevented by setting your goals.

Staying on track

Having a goal for my side project helps me keep on track. Usually, when working on a side project, a lot of ideas or improvements kick in. For example, once, I was working on a simple game. During the work on it, the following thoughts popped up:

Multiplayer-modus
Matchmaking system
Ranking system

Sometimes it is even worse. All these ideas come up before I have even started. What started as a simple idea grew more complicated each time thinking about it. Suddenly before I even started the project, I was wholly overwhelmed. This swayed me from being super enthusiastic about a new project being so overwhelmed that I never began the project. Having a clear goal can help you stay on track and prevent you from feeling overwhelmed by all ideas for improvement.

Realize when you are done

One of my early side projects was to learn more about machine learning. The idea was to create a website where users could upload images of their beverage, and the algorithm would detect whether it was beer or wine. The project was fun, and I learned a lot about machine learning trying to make it work. But, unfortunately, the backend with the algorithm was not hosted anywhere and only running on my laptop. The project kept spooking through my mind because the project was not finished. But I already accomplished my goal; learning more about machine learning. I never explicitly stated a purpose for this project, so I did not know. Forthwith, it took me months to get it off my mind and many negative thoughts saying you should finish the project first.

Downsize your goals

After having defined your goals, it is time to downsize your goals! The author from the book, Finish: Give Yourself the Gift of Done advises cutting your goals in half. I think you might be wondering, is this cheating? This is also what I first thought when I read this advice. But looking at how we suck at estimating how much work something is, this is pretty logical.

_It always takes longer than you expect, even when you take into account Hofstadter’s Law. _

Hofstadter’s Law

I think every developer underestimates how much work how much a project is multiple times each month. So let’s cut our goal in half before we start. What if you really want to reach the original goal? This was also my first thought. But what is the worst that might happen? You do not have to stop working on your side project after reaching your first goal. And what if you really cannot cut your goal in two? Double the time frame you had initially set for yourself.

Stopping right before the finish line

Have you ever almost finished a project but never managed to take the last step? For example, I once created a simple web game. However, after finishing the game, I never hosted the game. I was afraid people would not like it. Fearful that there were still bugs. I even thought, what if thousands of people come to play the game? The site would crash. (seriously, if that would happen, I would consider the game a huge success).

This is a strange phenomenon that occurs mainly in creative processes. For example, I have never run 9.99 kilometers just to stop before reaching the 10 kilometers because others were faster. Likewise, I have never quit a workout when there is only one repetition left. But how can we deal with this? A few tips to overcome this:

Halfway through the project, when your motivation is still high and doubts have not kicked in yet, share your deadline with someone. You can post it online, share it with a friend; you can even leave a comment beneath this post.
Do not be scared to share your ‘unfinished’ project. You can already share it with family, friends, or colleagues. If you like to share it with strangers, consider a beta release. Having already published a finished version makes it easier to update it with the next version. Furthermore, you are already getting feedback and ideas for improvement.
Remember that your project does not have to be perfect. This does not mean you should publish an insecure bank application. However, in this case, your UI does not have to be perfect, and it does not matter if you cannot handle millions of transactions simultaneously.

Make it fun

Probably the most important advice I can give you is to make it fun and keep it fun. When things are fun, you will likely have more motivation to keep going and actually finish your work. Subsequently, don’t be afraid to stop a side project when it is no longer fun. It is okay to stop, and there is no need to feel guilty about it in the next three months.

Good luck with your side projects. Set your goal and get going! If you need someone to share your deadline, (un)finished side projects with, feedback. Feel free to leave a comment!

The post About those unfinished side projects appeared first on Barttje.

Flutter Riverpod Testing – Example

Bart van Wezel — Mon, 22 Feb 2021 07:15:39 +0000

Testing your Widget is important during Application Development. When it grows more complex, it becomes more work to manually test everything. Having tests for your widgets makes sure that the Widgets behave as we expect them to. This saves time when developing new features. In the last blog post, we already showed how to do this with Flutter Hooks. In this blog post, we are testing our Flutter Riverpod example.

Setup the project

Before we can start with coding, we are going to add a dependency to the project, namely Flutter Hooks and Flutter Riverpod. Furthermore, we make sure the Flutter Test SDK is added to the development dependencies. During the tests we are also going to use Mockito, which is the last dependency we will add.

dependencies:
  flutter:
    sdk: flutter
  flutter_hooks: ^0.15.0
  hooks_riverpod: ^0.12.1

dev_dependencies:
  flutter_test:
    sdk: flutter
  mockito: ^4.1.4

Do not forget to install the dependency, running the following command:

flutter pub get

Taking a look at the code

The code we are going to test is the category selector we describe in another blog post. We will go quickly through the code as we have made some changes. We have changed the string value to a category. Now we can add a color to each category.

CategoryList createCategoryList(List values) {
  final Map categories = Map();
  values.forEach((value) {
    categories.putIfAbsent(value, () => false);
  });
  return CategoryList(categories);
}

class Category {
  final String name;
  final Color color;

  Category(this.name, this.color);
}

class CategoryList extends StateNotifier> {
  CategoryList(Map state) : super(state);

  void toggle(Category item) {
    state[item] = !state[item];
    state = state;
  }
}

The providers have remained mostly the same. Except, we added a ScopedProvider, so that we can use the same CategoryWidget in both the SelectedCategories Widget as the CategoryFilter Widget.

final categoryListProvider = StateNotifierProvider((_) => createCategoryList([
      Category("Apple", Colors.red[700]),
      Category("Orange", Colors.orange[700]),
      Category("Banana", Colors.yellow[700])
    ]));

final selectedCategories = Provider((ref) => ref
    .watch(categoryListProvider.state)
    .entries
    .where((category) => category.value)
    .map((e) => e.key)
    .toList());

final allCategories =
    Provider((ref) => ref.watch(categoryListProvider.state).keys.toList());

final selectedCategory = ScopedProvider(null);

We have now created a CategoryWidget. Therefore we can display the categories in both Widgets identically. We can access the category through a provider. So we have to override the provider with the current category.

class SelectedCategories extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final categoryList = useProvider(selectedCategories);
    return Flexible(
      child: ListView.builder(
          itemCount: categoryList.length,
          itemBuilder: (BuildContext context, int index) {
            return Padding(
                padding: const EdgeInsets.all(8.0),
                child: ProviderScope(overrides: [
                  selectedCategory.overrideWithValue(categoryList[index])
                ], child: CategoryWidget()));
          }),
    );
  }
}

class CategoryWidget extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final category = useProvider(selectedCategory);
    return Text(
      category.name,
      style: TextStyle(color: category.color),
    );
  }
}

For displaying the categories in the filter in the same way, we apply the same trick. To toggle the categories, we use the context.read(categoryListProvider).toggle(categoryList[index]); to update the current state of the categories

class CategoryFilter extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final selectedCategoryList = useProvider(selectedCategories);
    final categoryList = useProvider(allCategories);

    return Flexible(
      child: ListView.builder(
          itemCount: categoryList.length,
          itemBuilder: (BuildContext context, int index) {
            return CheckboxListTile(
              value: selectedCategoryList.contains(categoryList[index]),
              onChanged: (bool selected) {
                context.read(categoryListProvider).toggle(categoryList[index]);
              },
              title: ProviderScope(overrides: [
                selectedCategory.overrideWithValue(categoryList[index])
              ], child: CategoryWidget()),
            );
          }),
    );
  }
}

Writing our first test

For our first test, we are going to test the interaction of the Widgets. First, to setup a Widget, we have to wrap it with the HookBuilder and the ProviderScope. Now we can simply test the Widget as it were a normal Widget. With the findWidgets, we can find the CategoryWidgets and validate the state. Afterwards, we click on one of the Widgets. The category is selected and visible in the SelectedCategories.

  testWidgets('Simple interaction test without mocking or overriding',
      (tester) async {
    await tester
        .pumpWidget(ProviderScope(child: HookBuilder(builder: (context) {
      return MaterialApp(home: MultipleCategorySelection());
    })));

    var categories = tester.widgetList(find.byType(CategoryWidget));
    expect(categories.length, 3);

    expect((tester.firstWidget(find.byType(Text)) as Text).style.color,
        Colors.red[700]);
    expect((tester.firstWidget(find.byType(Text)) as Text).data, "Apple");

    var checkboxes = tester.widgetList(find.byType(Checkbox));
    expect(checkboxes.length, 3);

    await tester.tap(find.byWidget(checkboxes.first));
    await tester.pump();

    categories = tester.widgetList(find.byType(CategoryWidget));
    expect(categories.length, 4);

    checkboxes = tester.widgetList(find.byType(Checkbox));
    expect(checkboxes.length, 3);

    await tester.tap(find.byWidget(checkboxes.first));
    await tester.pump();

    categories = tester.widgetList(find.byType(CategoryWidget));
    expect(categories.length, 3);
  });

Overriding the Current Scope

Sometimes, you might want to override the providers. For instance, when you want to test a specific category. In this case, we can override the ScopedProvider with a value. In the ProviderScope we can choose which provider to override and choose which value we want to override.

  testWidgets('Override the current scope', (tester) async {
    await tester.pumpWidget(ProviderScope(
        overrides: [
          selectedCategory.overrideWithValue(Category("Pear", Colors.green))
        ],
        child: HookBuilder(builder: (context) {
          return MaterialApp(home: CategoryWidget());
        })));

    expect((tester.firstWidget(find.byType(Text)) as Text).style.color,
        Colors.green);
    expect((tester.firstWidget(find.byType(Text)) as Text).data, "Pear");
  });

Mocking the Notifier and State

When your application becomes more complex, you might want to override the provider. For instance, when you application calls an endpoint to load the initial categories. Luckily we can override the provider. In this case, we must remember to also override the value for the state. Of course we can also mock the state in more complex situations. In our case, we can simply instantiate a map and put our desired values in there.

class MockStateNotifier extends Mock implements CategoryList {}  

testWidgets('Verify there are two category widgets', (tester) async {
    final mockStateNotifier = MockStateNotifier();
    final state = Map();
    state.putIfAbsent(Category("Pear", Colors.green), () => true);
    await tester.pumpWidget(ProviderScope(
        overrides: [
          categoryListProvider.overrideWithValue(mockStateNotifier),
          categoryListProvider.state.overrideWithValue(state),
        ],
        child: HookBuilder(builder: (context) {
          return MaterialApp(home: MultipleCategorySelection());
        })));

    expect((tester.firstWidget(find.byType(Checkbox)) as Checkbox).value, true);

    expect((tester.firstWidget(find.byType(Text)) as Text).style.color,
        Colors.green);
    expect((tester.firstWidget(find.byType(Text)) as Text).data, "Pear");

    var categories = tester.widgetList(find.byType(CategoryWidget));
    expect(categories.length, 2);
  });

We will verify the MockStateNotifier is indeed called, just like we would do with any mocked class. With verify(mockStateNotifier.toggle(category)).called(1); are going to validate the the method is called. The same method can be used to return values from the methods or to throw exceptions when methods of the StateNotifier are called.

  testWidgets( 'Verify toggle is called', (tester) async {
    final mockStateNotifier = MockStateNotifier();
    final state = Map();
    final category = Category("Pear", Colors.green);
    state.putIfAbsent(category, () => true);
    await tester.pumpWidget(ProviderScope(
        overrides: [
          categoryListProvider.overrideWithValue(mockStateNotifier),
          categoryListProvider.state.overrideWithValue(state),
        ],
        child: HookBuilder(builder: (context) {
          return MaterialApp(home: MultipleCategorySelection());
        })));

    var checkbox = tester.widgetList(find.byType(Checkbox));
    await tester.tap(find.byWidget(checkbox.first));
    await tester.pump();

    verify(mockStateNotifier.toggle(category)).called(1);
  });

As always, the code is shared on Github. Thank you for reading and if you have any suggestions, comments, or remarks. Feel free to leave a comment.

The post Flutter Riverpod Testing – Example appeared first on Barttje.