My Hexaville
Spead the Word
flutter tic tac toe

Flutter Tic Tac Toe pt 1 Single Mode With AI


Some of you might’ve heard about the Flutter framework by Google for cross-platform mobile development, It was officially introduced a year or two ago. At that time I didn’t believe in cross-platform apps. Until now

What is Flutter

Flutter is a framework for cross-platform mobile development in Dart programing language. This language is developed by Google as well, so they have the full control over the stack here. Flutter is compiled to native bytecode, so it’s not web view based. It has a native look and feel

If you don’t have it installed, I’m not going to go through that, there’s an official documentation about that and it’s as good as it can get, no sense to create duplicates

Also, I’m not going to explain every little detail about what’s different about Flutter, documentation explains everything. Nobody would use Flutter otherwise, duh!

But what we’re going to do now is to create a Tic Tac Toe application, something similar to what I have in this series of posts with native Android Tic Tac Toe. What you can expect from Flutter Tic Tac Toe series – the same, single mode with AI and a multiplayer using Firebase

But let’s get down from the fanboy hype, here’re few things I found annoying about Flutter/Dart. Let’s go through them

Dart

It’s somewhat close to Java in syntax, though it was developed by web developers, so it was closer to JavaScript initially. Now, fortunately, it gets default strong types with version 2. The first version has optional typing, but if you use Android Studio, it enables them and you’re good to go

The only thing that pisses me off are those stupid _ in the beginning of variable names to declare them private. Dart doesn’t have visibility keywords, by default all field variables are public like in Kotlin and adding _ in the beginning makes them private

How stupid is that? Why don’t we just go back to the 70’s or 80’s when programmers declared types in variable names as well?

Yeah, just awesome! They just don’t know what to come up next with and go in circles taking features from the ancient times

Other than that, Dart is pretty OK, something in between Java/JavaScript and a bit of other languages. Unfortunately, no Kotlin.

Yeah, buddy, no Kotlin for you! Get over it!

Flutter

Now the framework is very different from Android one. First of all, there’s no XML. Layouts and logic is all in one file. Hence it’s not forced by the framework to have a clean architecture, it’s up to you to figure out how to make it clean and extract stuff to separate files

Layout building sucks. For example to give padding to a Text (TextView in Android) you need to wrap it in a Container. Text is also not clickable (you can’t set onClickListener), so for it handle clicks, you need to wrap it in other Widget (View in Android)

Here’s more. On Android you’d simply use layout_attriburte, an attribute handled by the layout. In Flutter you don’t have them and you need to wrap that Widget (View) in a Widget that’s called after that attribute. For example, there are widgets like AspectRatio, Expand,  (match_parent), Center and many other ridiculous things

So it’s nesting, nesting, nesting, unreadable layouts. Here’s what it would look like

Sure, I’m overexaggerating for the purpose of expressing how annoying that is. And some of those widgets do not exist

They have default 2 tab indents in the code style to compensate that. Duh, like it solves the problem!

But it all doesn’t matter because it’s one of the few cross-platform native mobile development frameworks and it’s not in JavaScript! Let’s get to coding!

Tic Tac Toe Single Mode

I think we should start with layouts because I had the hardest time with it. Implementing logic in Dart is easy because the syntax is almost like Java. I actually copied all the Java logic from Android Tic Tac Toe and it required very little syntax changes

Without further ado, let me show you what it would look like when complete

What I have is three overlaying layers, going in the following order:

  • Grid (2 horizontal and two vertical lines)
  • Field (9 Text WIdgets)
  • Canvas for drawing victory lines

All of them have the same square size

Since there’s no layout_gravity attribute, you need to wrap your widgets in Center to be centered

Grid

Let’s start with a grid

AspectRatio widget to give it a square size. Then comes Stack, it’s the same as FrameLayout.

Columns are equivalent of LinearLayout with vertical orientation and Rows – with horizontal.

I use Container for creating lines. Containers are something like your regular View. In Flutter many widgets don’t even have margin/padding/backgroundColor etc attributes, so you need to wrap them in Container

Field

Next, let’s get to the field

Very similar, but what you’ll see here is Expanded widget. Since there’s no match_parent for width/height option in Flutter, you need to wrap widgets in Expanded

Cells are MaterialButtons, because Text widgets don’t have on touch listeners, you need to wrap them as well to be clickable

Victory line

This one was actually the most pleasant experience. I draw lines with Canvas and its API is identical or very similar to Android’s one. So with no extra effort or reading much documentation, I could figure out how to draw them

Paint function is called each time I call setState(), which happens after each turn. Victory field is just a basic POJO, which is updated after each turn using VictoryChecker class, which I don’t want to include here, it’s just a bunch of if statements. VictoryLine class is dependent on that field

AI

I don’t want to include AI code because it’s just a bunch of if statements as well and since Dart syntax is so similar to Java or Kotlin

Just one little note to take from here is that in Flutter instead of Android’s

you’d use

 

 

And that’s it. If you’re an Android developer, the biggest struggle for you is going to be layout building. I don’t like it at all, but hell, it’s a cross-platform framework. So whatever, I can manage that!

If you want to try it out, the source code is here. For setting up you’ll need Flutter SDK, Android SDK/Xcode for iOS builds. Have fun and in the next post, we’re going to build a multiplayer using Firebase!

 


About the Author Ihor Klimov

Formerly an Android developer, lately picked up some Flutter. This blog is everything that I find exciting about Android and Flutter development. Stay tuned and hope to see you again!

>