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…
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…
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…
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…
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…
In the previous blog post, we showed how to query a GraphQL Endpoint in Flutter. One of the downsides from this approach was that it is easy to make mistakes when defining the query as a String in the application. Another problem is that there is no typing and if you added typing you would have to keep it in sync with the GraphQL Endpoint. In this blog post, we will show you how to generate models and queries with…
GraphQL is gaining more popularity and this will probably only increase in the future. If you need some data storage, there is an increasing chance that you are going to connect to a GraphQL API. For this blog, we are going to assume this endpoint is already there. The endpoint we are going to use is the following. The endpoint returns information about the standing in Formula 1. In the previous blog post, we showed how to draw a line…
We are going to show how to query a GraphQL API using the Apollo GraphQL Android Client. It is not Android only and can be used by any Java/Kotlin project. We are going to use this client with Kotlin to show how to get started! For this, we are going to use a popular GraphQL endpoint that is publicly available, namely the Github API. Configuring the project Before we can start, we are going to set up a project with…
In this blog post, we described how to use animations to animate a bar chart. In this blog post were are going to add another possible way to animate the bar chart. We are going to use Flutter Hooks to extract the disposing and setup of the animation controller into the hook. This means we do not have to do this for each animation we want to create in our application. Configuring the project Before we can start with coding,…
We are going to show how to draw and animate a line chart in Flutter. There are two different animations we would like to show, but first, we are going to show how to draw the static line chart. We are going to use the formula one standing after each race for the top three. First, we will draw the outline of the chart. Afterward, we will add the points and the lines, and finally, we will animate the chart!…