Wooo after a long time that I didn’t write, this was because I was busy at work, making videos on the YouTube channel (The Dart Side), helping on StackOverflow (Spanish version)and adding new examples to my flutter samples repo.

Have you ever seen widgets with headers that can be stretched when scrolling? this is called the Stretchy widget.

stretchy_header package

A long time ago I made a package that helped to solve that problem, this one is called stretchy_header, it allows placing a widget which can be expanded with blur(optional) when scrolling, I also added a trigger that works similar to the…


In Flutter to create a toolbar we use the well-known AppBar widget, and when we want a dynamic toolbar that when we slide it shows us content, we use the great widget called SliverAppBar.

These Widgets allow us to add a touch of beauty to our application, and without a doubt, doing it in Flutter is very simple.

I have seen many questions in StackOverflow and Facebook groups about how we can modify the AppBar and SliverAppBar, modify in the sense of changing the behaviour or design a bit.

Let’s see these 2 cases.

Case 1

We want to create an AppBar


Este artículo es una traducción al español de la que escribí originalmente y lo puedes encontrar en el siguiente enlace.

He visto muchas veces esta pregunta en StackOverflow y en otros foros/redes sociales, cuando empezamos con Flutter, tenemos la duda de cómo podemos comunicarnos entre widgets, es decir de Widget padre a Widget hijo y viceversa.

Tenemos muchas formas y maneras de poder comunicar Widgets entre ellos.
Vamos a repasar cada una de estas, desde la más sencilla, hasta la más óptima.

Escenario

Como escenario vamos a tener 2 tabs y 2 widgets hijos.

Los 3 widgets los creamos Stateful ya…


I have seen this question many times in StackOverflow and in other forums / social networks, when we started with Flutter, we have the question of how we can communicate between widgets, that is, from parent Widget to child Widget and vice versa.

We have many ways of communicating between widgets.
We will review each of the ways, from the simplest to the most optimal.

Scenario

As a scenario we will have 2 tabs and 2 child widgets.

We created the 3 widgets as Stateful since we are going to update the content, part of the code would be like this.


I have created this new section named App Clone, in which I will try to clone the screens of some known apps, as the first example I will show you how to imitate the main screen of the application Messages of Android.

Don’t you know the app? This is how it looks like

Android Messages App

The curious thing about this screen is that it brings an interesting animation, when the user scrolls up or down the Fab button changes according to the direction.

How to do it in Flutter?

Well, very simple, for that we will use the NotificationListener widget, for those who didn’t read my previous post…


In the majority of the apps we do, we have at least one Scrollable Widget.

In some cases we want to extend the use of our elements within a scroll, for example:

1- When we want to know if we reach at the beginning or end of a list. (Either vertical or horizontal).
2- When we want to move between elements of a list programmatically.
3- When we want to know if the scroll of our List started, is in progress or it ended.

We are going to review these 3 cases in detail.

If the list reached the minimum or maximum scroll

We start by building a simple…


I have read many questions about how we can obtain the dimensions or positions of the widgets that we have on screen.

In some cases we find ourselves in situations in which we want to achieve that for any reason.

The widget doesn’t have position or size by itself, in order to achieve this it’s necessary that we obtain the RenderBox associated with the context of our Widget.

But how do we do this?

Let’s start building a demo app which has 3 panels of different colors, Red, Purple and Green inside a Column and we have two buttons at…


I’m going to tell you about my experience using Firebase Dynamic Link into a Flutter project.

For those who don’t know about Firebase Dynamic Link, here is a video.

As you can see, it’s a tool that has many advantages, in our case, we were very interested in receiving dynamic links.

Our requirement

After a user is invited to our application, an e-mail is sent with a link, which when selected should follow this flow

Scenario 1

The guest user doesn’t have the app installed.

The link should redirect to the app store that corresponds App Store/Play Store.

Scenario 2

The user does not open the link from the mobile.

The link should redirect to a page with links to download the application.

Scenario 3

The invited user has the app installed.


As Android developers, most of us have seen the Shared Element Transition, if we have not seen it, I will explain what it is.

Shared Element transition are the animations that are shown for certain elements that go from one screen to another, the clearest example is when we have a list of elements with thumbnail images, then we go into the detail of that element, and we see how it is shown an animation from the initial screen, towards the destination screen, moving the image while the transition continues


The Collapsing Toolbar is UI component widely used in our applications today. It consists of displaying an image or background in the upper part of the screen, occupying a fixed space, so that later, by scrolling upwards, the content changes and becomes a navigation bar in iOS or toolbar in the case of Android.
Here I show you a visual example of how an interface looks using Collapsing Toolbar

In Android the CollapsingToolbar UI component is available within the design-support library, while in iOS there is no official UI component, but there are libraries that help us to do the…

Diego Velasquez

Google Developer Expert in Dart and Flutter https://www.diegoveloper.com

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