Flutter Institute

Simple games with Flutter Web: hangman

The Technical Preview of Flutter Web was just announced at Google I/O 2019. To celebrate, I've ported the hangman app from our previous tutorial from Flutter to Flutter Web. We had to move things around a little bit, but it was actually quite

Flare: Looping the end of an animation

A lot of people are asking how to loop just the end X seconds of a flare animation. It's an easy problem to solve once you know where to look, but it's not totally straight forward. In this article we're going to discuss two

flutter

Sharing Data in Flutter: InheritedModel vs InheritedWidget

An InheritedModel is a way of sharing data across your whole app. The subscribing widget has some control over when it updates, and can be intelligently notified of those updates only when data it cares about has been changed.

intermediate

Sharing Location using Inherited Widget

Sometimes you need to use a location from multiple routes/widgets within your app. Instead of having to set up and manage the location plugin in all these various places, we can instead set it up once and share that data between many widgets

beginner

Tracking your Battery

Occasionally you need to know what the battery level is the device. This is pretty simple with the battery package from the flutter plugins. Download Visit the GitHub repository to clone the source for this application. This code was tested with Flutter 0.5.

beginner

Simple Games with Flutter: Hangman

To illustrate the separation of concerns concept made by our friends over at Dart Academy in Web Games with Dart: Hangman, we are going to re-implement their user interface (UI)

flutter

Firebase Firestore

Getting Started We're going to update our TodoMVC app that we augmented with Firebase Signin in Part 2 to integrate it with Firestore as our storage engine. Download Visit the [GitHub repository] to clone the source. This is highly recommended so you can play

Flutter with Dart 2

Dart 2 is in pre-release, and you can now test your flutter apps against it. It's pretty simple. Simply add the --preview-dart-2 flag as follows: flutter run --preview-dart-2 (The --strong argument can also be quite useful) Also, make sure to run a flutter upgrade

snippet

Run async operation on widget creation

I often see people trying to execute an asyncronous operation in the render method of a widget. This doesn't work, but is also bad because it gets called every time the state or properties get updated. It can lead to a lot of unneccessary

todomvc

Firebase Authentication

Getting Started We're going to augment our TodoMVC app that we tested in Part 1 to add basic Firebase authentication using Google Sign In to the app. I'm going to be directing you to visit some of the Google code labs for the Firebase

snippet

Hiding "Slow Mode" banner

Want to be able to show up your app in an emulator (or get screenshots) without the Slow Mode banner in the upper-right corner? Just set debugShowCheckedModeBanner: false on your MaterialApp. Done! An example from our TodoMVC app: class TodoApp extends StatelessWidget { @override Widget

firebase

FlutterFire Compile Errors

I was recently setting up an app to use firebase_auth and got the following gradle compile errors: google-services plugin could not detect any version for com.google.android.gms

flutter

Simple JSON with Flutter

Json handling in Flutter is the same as JSON handling in dart. For a more detailed description of some of the possibilities, see Using Dart with JSON Web Services. Imports A single import is required to get the native Dart JSON handling. Simply add

todomvc

Flutter and Widget Tests

Getting Started Unit tests are critical if you want to make sure that you don't accidentally break your app with an innocuous code change. In this post, we're going to discuss the basics of widget testing (unit testing widgets) using flutter. We'll be using

octal clock

Octal Clock - Clock Faces in-depth

As promised in Part 2, here's is a more in-depth discussion of how the digital and analog clock faces were created for our Octal Clock app. If this is your first encounter with the Octal Clock, you can start at Part 1 for the

octal clock

Creating your first flutter app - Part 3

Getting Started We're going to pick up right where Part 2 left off. If you haven't already been through Part 1 and Part 2, you should check them out before

octal clock

Creating your first flutter app - Part 2

This is obviously not going to be a good clock app without supporting multiple clock faces. We implemented a "Text" clock face in Part 1, but we also want to add Digital and Analog clock faces.

tutorials

Creating your first flutter app - Part 1

Flutter is a new mobile app SDK to help developers and designers build modern mobile apps for iOS and Android. Flutter takes the approach of having a single code base

Subscribe to Flutter Institute