Animations on Value Changed with Flutter & Riverpod

With Riverpod we can extract the state management from the Widgets. However, this also means that the Widget has no control over the value changes. When we want to start an animation when the value changes, we have to look for updates to handle the animation in the Widget. In this blog post, we will show you three different animations based on value changes. After writing about animations in Flutter, and about Riverpod it was about time to combine both!…

Read More

Flutter Riverpod Example – Category Selection

In the latest blog posts, I have been writing about Flutter Hooks and the Provider to simplify state management in Flutter. We described how to simplify the modal dialog selector of categories with Flutter Hooks and with the Provider. However, there is also an option to combine both. Riverpod is a Provider but different! Riverpod has multiple benefits such a support for multiple providers of the same type, combining asynchronous providers, and adding providers from anywhere. Furthermore, it provides a…

Read More

How to Process GraphQL Subscriptions in Flutter

In this blog post, we are going to explain how to work with GraphQL Subscriptions in Flutter. We are going to create a simple counter app that will increase the number by one each time we press a button. We will increase the button with an increment mutation to prevent race conditions between different users. Thus the app will not increment, but the GraphQL endpoint will. After the mutation, we will move on to the subscription to listen to changes.…

Read More

Flutter Drag and Drop Example

For a little game, I needed to drag and drop items. I have never seen it as easy as in Flutter. So in this blog post, we will describe how to implement the drag and drop of checkers on checkerboard in Flutter. The goal is to draw a checkerboard, add checkers, and make it possible for the checkers to be dragged around. For state management, we will use the provider. If this is completely new to you, the previous blog…

Read More

Flutter Provider Example Category Selector

In the latest blog posts, I have been writing about Flutter Hooks to simplify state management in Flutter. We described how to simplify the modal dialog selector of categories with Flutter Hooks. However, Flutter Hooks is not the only solution. Another option is to use a provider which is used in the simple app state management page of Flutter. We will rewrite the modal category dialog selector as an example, except that this time we will use the provider. A…

Read More

Writing Your Own Custom Flutter Hook

We are going to show how to create a custom hook with Flutter Hooks. As an example, we will rewrite a GraphQL query that retrieves race results for drivers in Formula 1. Why would you want to write your own Hook? Mateus discusses the benefits of hooks to React, the same benefits apply for Flutter. Luckily the creators of the Flutter Hooks library have made it really easy to write your own custom Hooks as we will show in this…

Read More

Flutter Hooks useState example

In the previous blog post, we described how to create a dialog for multiple category selection. To do this we had to create two stateful widgets. We also had to override the initState method of the dialog. In React this can be done more easily with Hooks. Luckily there are also Hooks in Flutter that can do the same. In this blog post, we will show you how to rewrite the dialog example with Hooks. Configuring the project Before we…

Read More

Using a modal dialog to choose a value in Flutter

We are going to describe how to show a modal dialog in Flutter. In this dialog, the user will be able to pick some values, that we will return to the original Widget. In the last blog post, we show how to select multiple categories from a list. We are going to work from there. There is a list of values from which we can pick multiple categories. In some cases, we do not want to keep the list visible…

Read More

How to implement a multi-category selector in Flutter

The goal of this blog post is to create a Widget that allows a user to select multiple categories from a list. We are going to use a list of Formula 1 drivers so that users can compare the results of those drivers. We already showed how to query multiple drivers from a GraphQL endpoint, but this was missing a selection of which drivers should be queried. In this blog post, we will show two approaches on how to do…

Read More

Generating Models with Artemis for GraphQL Mutations in Flutter

We are going to describe how to generate models with Artemis for mutations. In the previous blog post, we already showed you to insert a new object at a GraphQL endpoint with a mutation. One of the things that I disliked, coming from more typed based languages (Kotlin, Java) was the way we had to convert the Dart DateTime to a different format before we could insert it. In this blog post, we are going to describe how to generate…

Read More