Bit Masking: Control Movement

Move widgets bit by bit

Constantin Stan
4 min readJul 15, 2020
Photo by Euwen on Unsplash

This example is provided as a FlutterPen and I won’t detail how to create a Flutter app. Instead, I will explain the code that manages the state as a decimal value using bitwise operators like AND, OR, or NOT.

Control movement

We’ll alter a state using the WASD keys (or the equivalent arrow keys ⇧⇦⇩⇨) and use that state to move an object on the screen.

That object will be a logo and its default position will be centered on the screen. The AnimatedPositioned widget will help us to move a bit more fluid, but the example would also work with a simple Positioned widget.

The state is kept in an integer and its default state equals 0. The binary representation where we need to store all 4 possible movement directions is 4 bit long: 0000

The mask values that we’ll use are as follows: