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!…
I was working on a simple form in React that needed a checkbox before being allowed to submit. You have to accept the terms and conditions or privacy policy. I used the Ant Design for the React components and since I struggled with adding this ‘simple’ condition, I decided to share my solution. Let’s start by creating a simple form. This form contains one Input field and one checkbox. import React from 'react'; import {Form, Input, Button, Checkbox} from 'antd';…
In the last post, we showed how to create Tic Tac Toe in Flutter. We used the CustomPainter to draw the different elements in Tic Tac Toe. The main reason for that was to make it easier to add animations. This is exactly what we are going to do now. First, we are going to draw the crosses and animate the lines one by one. After that we are going to add the animation for the circle and finally we…
In this blog, we are going to create a simple tic tac toe app. Since we are not the first to do this, we are going to focus mostly on the drawing of the parts. This is because we are going to describe how to animate different parts in the next blog. We are going to use the CustomPainter to draw the element of the game. This might complicate things a bit now, but this does make it easier to…
In this blog, we are going to show you how to animate the bars of a bar chart. First, we will show you how to draw some basic bar chart. After that we will show you how to animate the following bar chart with three animations: Creating a basic bar chart Since the main goal of this post to show the animation of the charts, we will keep the drawing of the chart simple. We are going to use a…
After describing in the last post how to detect which CustomPaint widgets are clicked, the next step is me was to change the widgets. First, I’m going to show how to do this with a simple example that contains three different CustomPainter widgets. After that, I will show you how to do the same for the List of CustomPaint Widgets. Changing the state of CustomPaint widget So let’s get back to the example with three circles. Create a StatefulWidget Since…