Kangabru logo Kangabru logo text
Blog Articles Projects About

Zero to hero - Part 1 - How I built my game with Flutter in 1 month.

Looking to make your app with Flutter? In this series I'll show how I built my game, without prior experience, in less than 1 month.
Post banner
May 2020

Contents


Hey bru. Last week I launched my first app Icing Addict - one of 12 start-up projects I’m building this year. This series will be a deep dive into how I built it.

In this first post will be talking about Flutter itself. What is it you ask? I’ll tell you all about it so you can start using it today!

To see my game or a summary of its features check out these links.


So what is Flutter?

Want to build a cross platform mobile application? Flutter can do that. It sports some cool features like:

What do I think of it?

👌 Overall I’ve been very impressed. I was initially concerned that it wouldn’t be suitable for games, however that notion was quickly proven wrong. It’s handled everything I’ve thrown at it so far.

Critical features like on-the-fly processing as the user draws, intimate manipulation of SVGs, and overall rendering speed were easily achieved. The comprehensive widget library and animation support made Flutter even sweeter to use.

Getting started

Want to get started? Check out these links:

Tooling

Tooling is fantastic too. There are a few options but I recommend developing with VSCode. As a development experience this is what you can expect:

Consider using these VSCode extensions:

Some Flutter packages to consider using would be:

Overall Google have done a fantastic job to making it easy to developer for the platform. You really can beautiful apps quickly and easily.



VSCode goodies

The Flutter extension come full of nice little touches.

Matching brackets of nested widgets can be tricky to find. Good thing the Flutter extension tags them automatically.
Use Ctrl . on a nested widget for some useful operations. Note that 'Remove' removes the outer widget but keeps in children. Much faster than doing it manually.
Icons and colours show up in the sidebar. Hovering on them brings up more info too.

Show me the code!

Ok so what’s it like to actually use? Well Dart is the language of choice here. It feels somewhat like coding in Typescript, React, with a sprinkle of C# perhaps. I think it combines the better elements of all of them.

If you’re comfortable with async usage, stateful components, and inline functions then you’ll feel right at home. Your knowledge of OO programming concepts will come in handy too.

I highly recommend you simply run through the Dart language features to see how common thing are done. One thing to note is that constructors are quite unique in Dart and need to be learned.

Everything is a widget

And I mean everything. Things like padding, aligning widgets, and even animation are done by wrapping widgets in other widgets.

// An example of how padding is applied
Padding(
    padding: EdgeInsets.only(top: 20),
    child: MyWidget(...),
),

Cool operators

Useful operators like null conditional ?. and null coalescing ?? ship out of the box.

Inline functions work similar to Javascript.

// Assign a variable with an arrow function
setImage((Image image) => _image = image);

// Assign a variable with an inline function
setImage((Image image) {
    _image = image;
});

Dart also has cool operators like .. which allows you to chain object references everywhere.

// Creates an object and assigns variables without
// traditional().method().chaining()
var paint = Paint()
    ..strokeCap = StrokeCap.round
    ..strokeJoin = StrokeJoin.round;

Or use use the ~/ to divide and return an integer.

var var1 = 100 / 33; // 3.0303....
var var2 = 100 ~/ 33; // 3 (int)

Use set and get variables within a class.

bool _isValid;
bool get isValid => _isValid;
bool set isValid(bool isValid) {
    _isValid = isValid;
    updateStuff();
}

Mixins are awesome

A mixin can be used to encapsulate logic that is reusable. I use these all the time for animations, timer logic etc. which come in handy all over the place. A simple mixin to handle timers safely and easily might look like:

/// A mixin to safely handle timers in stateful widgets
mixin EasyTimer<T extends StatefulWidget> on State<T> {

  // Internal timers hidden from parent class
  List<Timer> _timers = [];

  // A public accessor used by parent widgets
  setTimer(Timer timer) => _timers.add(timer);

  // Make use of parent methods and variables
  @override
  void dispose() {
    super.dispose();

    // Safely stop timers when the widget closes
    _timers.forEach((t) => t.cancel());
  }
}
// Use the mixin like this
class _MyWidgetState extends State<MyWidget> with EasyTimer {
    ...
    setTimer(...);
    ...
}

Now all of your timers are managed safely in the background! Mixins are great for these types of patterns.

Extend your classes

Use extension methods to extend shit.

// Add a method directly to all strings
extension NumberParsing on String {
  int parseInt() => int.parse(this);
}

// Use it like this
var myNum = "12345".parseInt();

Use logic directly in lists

Throw control logic directly in lists as you make them.

var widgets = [
    MyWidget(),
    ...otherWidgets, // spread em
    if (something) MyWidget(), // if em
    for (var item in items) MyWidget(), // for em
];

Language quirks

Most math operations are methods on the numbers themselves.

100.floor();
100.abs();
100.toInt();
100.clamp(0, 10);

Typing is generally good but watch out when using number types!

// This compiles but throws an error
num myInt = 1; // Uses a generic num type
double myDouble = myInt; // Throws type error

// You have to force the type instead
double myDouble = myInt.toDouble(); // 👍

Hopefully you can see there are some really cool features when developing Flutter apps. The whole platform has been a pleasure to use and it’s made app creation fun again for me.

In summary

This was a quick overview of Flutter and where you can go to start using it. I hope you have now a better idea on what you can expect. To conclude here are couple more advanced resources I found very helpful to get inspired and get started.

Coming up…

In my next post I’ll be going over how I use Flutter in my game specifically. Some topics I’ll be covering will be:

I’ll be posting weekly so be sure to subscribe via the links below!

Quarantine Update

This week marks 3 months since I arrived to Guatemala - 2 of those during the pandemic. Things are generally good still and I’ve been enjoying working on my app. I’m quite busy though since I’ve got a second app to release this month!

Here’s a view of Volcán de Fuego erupting which I can see from my bedroom. Pretty cool huh?