Flutter tutorials for beginners and advanced developers

Here you can find a list of varied Flutter tutorials, from smaller widgets to complete apps. The tutorials are designed to be understood by a broad audience by being written in a step-by-step manner using many explanatory images and code examples.

The idea is to provide tutorials that are interesting both for beginners and fore advanced Flutter developers.

How to create a number input

How to create a text field that only accepts numbers (with or without decimals) and shows an appropriate keyboard.

Styling parts of a TextField

Styling the whole TextField can be done via the InputDecoration. But how do we apply a special styling for only parts of the text? This tutorial explains.

Prevent back button from closing the app

Flutter apps exit by default once the user taps the back button on the first screen. Here’s how to override this behavior and show a confirm dialog.

Read shared preferences from native apps

Learn how to migrate the shared preferences from native Android and iOS apps to Flutter apps.

Pull to refresh

Learn how to implement the pull-to-refresh gesture in Flutter. Also describes how to use an alternative loading indicator.

Implementing a fortune wheel

Learn how to implement an animated fortune wheel that randomly chooses from a list of given options in Flutter.

Create a controller for a custom widget

This tutorial shows how to create a custom controller for a self-implemented widget to manage its state from the outside.

Implementing a lotto retrospective app

Learn how to implement an app that tells you how much money you would have won or lost if you had played lotto with you chosen numbers.

Creating a geo map quiz game

Tutorial on how to use the OSM (Overpass) API to fetch some geo data and embed a map into a Flutter app to create a quiz game!

Using BLoC pattern with service layer

A BLoC does often have external dependencies such as services or repositories. This tutorial shows how to properly create the connection.

Applying the BLoC pattern in practice

In this tutorial, we are going to apply the BLoC pattern to an existing app, making it maintainable and testable.

Smartphone movement speedometer

In this tutorial, we implement a speedometer that displays the accelerometer sensor value of the smartphone.

Widget Magnifier

This tutorial explains how to implement the possibility of magnifying an image or other widgets.

The Matrix effect (digital rain)

In this tutorial, we are going to implement the famous text effect from the movie The Matrix in Flutter.

Implementing edge detection in Flutter

In this tutorial, we are going to implement edge detection of a camera image using Flutter, Dart FFI and OpenCV.

Simulate an LED display

Let’s use Flutter to simulate the display type we know from trains, airports, stadiums etc. by accessing the pixel information of a text widget!

Audio player in retro design

Flutter tutorial on how to implement a fully working retro audio player that mimics the visuals of a good old audio cassette.

Burning paper effect

How to implement the effect of a sheet of paper burning from its center.

Calculator app

Beginner tutorial on how to write the first Flutter app, in this case a calculator with basic functionality. Zero prior knowledge required.

Beautiful, animated splash screen

Let’s animate a falling raindrop that removes the virtual surface covering the first screen of our app.

Create a sticky note in Flutter

In this beginner tutorial we will create a realistic sticky note using Flutter.