My Hexaville
Spead the Word
flutter google sign in

Flutter Tic Tac Toe pt 2


Hey, in this part we’re going to implement Google sign in, save user to Firebase database and finally fetch and display the list of all users

Setup Updates

I’ve switched to Dart 2

flutter google sign in

 

And currently using 0.2.11 version of Flutter. So if you want to use my code, make sure you have these things set up as well

Dart 2 makes new keyword optional and has few other features. Just removing new keywords cleaned up my code a lot. Hopefully, Google iterates with new features just as quickly as IntelliJ does with Kotlin

Declare Multiple Pages

In Android, you’d have a manifest file, where you declare all activities that your app has. Here’s how you do that in Flutter

I extracted this code as a separate file and called it application.dart, just to give more resemblance to Android architecture. Hate when people put multiple classes into a single file

Your home page is the one that’s opened initially and routes are the list of other pages. You can launch them with this code

Google Sign in

Since I set up my Firebase project in the previous post, Android setup didn’t require any extra work. Only these steps for iOS Google sign in setup from the official repo. I test iOS on every step, even though my platform of choice is Android. And recommend you do the same. Trust me, there are always some platform-specific bugs

flutter google sign in

Then I added these dependencies to pubspec.yaml

My Google sign in is pretty simple, there isn’t any dedicated button, in the launcher activity you have a Single mode or a Multiplayer mode choice. Choosing the second one opens Google account chooser right away

flutter google sign in

 

Async/Await is not a new concept in programming, if you know C# or latest Babel or any other languages where it’s used, it’s the same. Just to get rid of callbacks and make asynchronous code look synchronous and flat

In the code above I do these things:

  • Sign in with Google
  • Get FCM token
  • Save user to Firebase database
  • Open ‘userList’ page

 

Fetching List of Users

Now we’re in UserList page. I’m fetching the list of users in initState lifecycle function. It’s being called on every screen open. Not sure yet if it’s the recommended one to put your logic in, but it worked totally fine

Again asynchronous functions make your code much cleaner

You can see, the code isn’t as clean as it would be on Android. That’s because I haven’t figured out how to use built-in Map-to-POJO parser of Flutter Firebase, if there is currently. So I’m parsing it myself

Once function returns a Future<dynamic, dynamic>, which is converted to just Map<dynamic, dynamic> when used await keyword. Iterating through snapshots and populating local lists is very similar to what you’d have in other SDK’s

Also, in Dart’s map class there isn’t a get(key) function, so I don’t know yet how to retrieve a value other than by using that ugly loop. Once I learn how to do it in a better way, I’ll remove that parse function

One interesting thing: I have setState in a for loop, but there’s apparently some optimization under the hood because build function only called once (after all users are fetched)

Dart Constants

Tip: how to declare constants in Dart. In Java, you’d have your class with static variables and for you to not include ClassName.CONSTANT_VARIABLE every time there’s a static import

In Dart, there isn’t one, but you can just declare constants in a dart file without wrapping it in any class, like in Kotlin. Then to use any of these constatns you just need to add an import statement of the file and you can use any of its variables

Displaying in a list

flutter google sign in

At its root, there’s a ListView, same as a RecyclerView in Android, but much easier to implement. itemCount to let it know how many rows it needs to draw and an itemBuilder (ViewHolder in Android) for row layouts

I saw several examples where they used ink background and margin instead of padding. So your ink wouldn’t go the full width, like that

flutter google sign in

So lame, you need to use padding, dude!

That’s why my row layout isn’t as readable as I wanted (two Containers), just because of this padding. But I’m getting the hang of building Flutter layouts, not as bad overall

One interesting thing I found is that if I don’t wrap Text’s data argument in quotes but just pass it as a variable it gave me some weird bugs with empty rows

You can see me using both MaterialButton and InkWell to create clickable Texts. Both of them don’t have any backgrounds other than ink clickable one. The difference I found out between MaterialButton and InkWell is that InkWell doesn’t affect child’s Text style, whereas MaterialButton makes it bold and centered by default

Conclusion

ListView implementation is extremely simple, there isn’t any need to use item insertedIndex/Range/notifyDatasetChanges of RecyclerView. You can see, I call setState in a loop and build function is being called just once. Flutter seems to be very forgiving as simple in many ways

Ok, it wraps for this step. You can get the source code here, multiplayer branch. Once it’s complete, I’ll merge it to master. In the next step, I’m going to implement user invites/responds and a multiplayer itself. Stay tuned!

 


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!

follow me on: