Pokémon and Flutter

A battle system unfinished

Pokémon battle with Flutter

I was wondering if creating a game in Flutter would be possible, and Pokémon directly came to mind because it seemed like the most fun game to make. The battle system is far from being finished, but I wanted to write about what I have experienced so far.

Half of the battle works

State management

The state system offered by Flutter makes it easy to manage how the screen refreshes. It is even easier to create a logic in a service that refreshes the screen with the Provider library.

Interface

Creating the interface was easy using Columns and Rows like we would do in HTML/CSS with FlexBox. Nevertheless, I didn’t try to create a responsive design interface, but I think it must be feasible. For anyone that may want to try the application I created, using the iPhone XR emulator would give the best experience.

Audio

About the music, I downloaded the battle theme of Pokémon and played it in the loop thanks to the audioplayers library.

Animation

The animation part was the hardest part for me, and I’m still unsatisfied with it. It is easy to animate the life bar decreasing when receiving damage thanks to the AnimatedContainer. But the thundershock animation looks peculiar. To make the thundershock animation, I used Nima from 2dimensions, the same that created Flare. This technology makes it very easy to create animations and display them with Flutter. I struggled with its implementation in a Stack which I believe I’m doing wrong; otherwise, it is straightforward to use.