Flutter provide a wide range of widgets to customize your layout, most of which can be found here. However if you are like me and you don’t want to miss anything related to flutter you probably have seen a few interesting widget names. In this article I will be talking about one of these widgets,the flow widget.

What the Flow Widget is NOT?

This is just a quick note before we get started if you have a Java background you may have heard of the flow layout which usually arranges components in an LRT/RTL flow, much like lines of text in a paragraph. …

Most of the time when you’re in a rush to learn something, the best thing to do is practice. In the world of mobile development, a common way to practice is to try to replicate features and UI from popular apps.

In this series of article, I will be doing just that.

What we are trying to build today

We will try to re-create the Animated FAB in this page

Flutter’s animation library is really Awesome for creating really complex animations however there are times where you would want to use more subtle animation such as those which occur whenever the user does something in your app.

Today I will talk about one such animation, scrolling animation. I will be covering how to make smooth scrolling animations in Flutter along with a few real world examples.

Making sense of Scrolling Animation

There are two types of Scrolling Animation the first is a normal animation that occurs when the user scroll to a specific place and the second depends on the overall amount of scrolling; the…

Animated Switcher is one of the least known widgets in Flutter. The first time I heard about this widget was in a group meeting with Simon Lightfoot(The Flutter Whisperer). It was brought up in conversation and from that moment, I was couldn’t stop using it.

In this article, I am going to pass on what I have learnt and show some cool examples of AnimatedSwitcher.

When can this widget be used

  • When removing/inserting a widget from the tree.
  • When switching between widgets.
  • When values changes

Minimal example

Let’s start by a very simple example where we will hide/show a widget when the user clicks the FAB

NOTE: Always…

Persisting data is very important for users since it would be inconvenient for them to type their information every time or wait for the network to load the same data again. In situations like this, it would be better to save their data locally.

In this article, I will demonstrate this using SQLite in Flutter.

If you speak portuguese you can find the translated version here

Why SQLite?

SQLite is one of the most popular ways to store data locally. For this article, we will be using the package sqflite to connect with SQLite.

Some simple but powerful tips

After using Flutter for almost a year now the documentation is my second home.

Today I will share some very simple yet powerful tips and tricks to get the most out of Flutter’s documentation.

Documentation In Code

Designers love making responsive UIs but implementing them in real life is not that easy. As a Flutter developer you should’t say NO to your designers. so let’s make them happy again.


  • In responsive UI we don’t use hard-coded values for dimension and positions.
  • Use MediaQuery to get the real-time size of the window.
  • Use Flexible and Expanded widgets to get a flexible UI that works with percentage rather than hardcoded values.
  • Use LayoutBuilder to get the ConstraintBox of the parent widget.
  • You can get the orientation of the device using MediaQuery or OrientationBuilder.

What are the components of responsive design?

In responsive design apps…

In computer graphics the act of restricting the rendering to a particular area is called Clipping. A clip area is supplied to a Canvas so the rendering engine will only “paint” the pixels inside of the defined area. Nothing “painted” outside of that area will be rendered.

As developers we use clipping to create awesome looking, custom user interfaces with special effects. As the title says, here we’ll talk about how to do clipping in Flutter and have you creating jaw-dropping 😲 interfaces in no time.

Getting Started

Let’s start by creating a bare bones app, a simple 200x200 red rectangle in…

Raouf Rahiche

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store