Checkbox Form Validation with Ant Design

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';…

Read More

Tic Tac Toe with Animations

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…

Read More

Tic Tac Toe in Flutter

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…

Read More

Creating Bar Charts Animations with CustomPainter

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…

Read More

React to changes in CustomPaint Widgets

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…

Read More

Detecting Clicks On Overlapping CustomPaint Widgets

This post will describe how to detect on which figure is clicked when there are multiple overlapping figures. We are going to start by showing how to do this for three overlapping figures. After that, we are going to apply it to the hexagon grid from the previous post. Detecting clicks on three overlapping figures So instead of hexagons, let’s draw something else. We are going to draw three circles, so for this circle, we need a new CustomPainter. As…

Read More

Drawing a Hexagon Grid in Flutter

This post aims to show you how to extend the CustomPaint to draw your own figures. We will also draw multiple CustomPaint Widgets on the same canvas so that we can reuse our figure and draw it multiple times. This post uses a hexagon as an example, but it can be done with any figure. Drawing a hexagon The goal is to draw a hexagon. We can extend the CustomPaint to draw a hexagon. The CustomPaint widget expects a painter.…

Read More

Mutations on a GraphQL Endpoint with Flutter

In the previous blog post, we described how to query a GraphQL endpoint. Here we retrieved the information about Formula 1 standings. Of course, there are more races in this season, and (hopefully) this is not the last season. So in this blog post, we will describe how to execute mutations. This way we can insert new races that are coming! Setup of the project We are going to use the Graphql Flutter dependency. Installing new dependencies is easy in…

Read More
We use cookies to ensure that we give you the best experience on our website.