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

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 RefreshIndicator widget.

But guess what ?, now Flutter already incorporates its own stretchy header inside the SliverAppBar, I’m going to show you how it works.

All we have to do is assign true to the stretch property which now brings the SliverAppBar and in flexibleSpace we use the FlexibleSpaceBar widget, which now also brings a new property called stretchModes which indicates the effects it will add when we scroll.

The modes are:

• StretchMode.zoomBackground -> The background widget will expand to fill the extra space.
• StretchMode.blurBackground -> The background will blur using a [ImageFilter.blur] effect.
• StretchMode.fadeTitle -> The title will fade away as the user over-scrolls.

Here the example using StretchMode.zoomBackground

Using StretchMode.zoomBackground and StretchMode.blurBackground,

Finally using all 3 modes at the same time.

Another interesting thing that it brings is that we can launch an action when we scroll our widget. The property we will use will be onStretchTrigger, where we can execute any action.

By default the trigger is called when the scroll exceeds 100.0 pixels but we can override that using the new stretchTriggerOffset property.

Playing around with this widget I was able to replicate a design that I found on the web, this is the result:

Conclusion

I hope it has helped you in case you want to add this widget in your project. As you can see the Flutter team is working hard implementing a large number of useful widgets but that many of us don’t know, you can review the last example in my repository

diegoveloper/flutter-samples

You can follow me on Twitter

Diego Velasquez

Flutter: SliverAppBar with Stretchy Header was originally published in Flutter Community on Medium, where people are continuing the conversation by highlighting and responding to this story.

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 that is not stuck at the top of the screen as we normally do. But we also want our screen to have a Drawer (side menu), and that our AppBar respond to the event of opening the Drawer. That is, we want to create our own AppBar, with the dimensions that we want.

The problem is that as we know, our AppBar widget has a default size, and we can not change it. Checking the source code, we see the parameter called appBar from the Scaffold, we see that it accepts a widget of type PreferredSizeWidget, now we review the source code of AppBar, and we find that it is only a StatefulWidget that implements PreferredSizeWidget.

We already have it, we will create our own Widget that implements PreferredSizeWidget.

What we want

How we do it so that when pressing the menu button of our AppBar the side menu opens.

We can do it in 2 ways:

Using the `AppBar` widget

With this the AppBar is responsible for opening the lateral menu if it is inside a Scaffold.

Using a Custom widget

With this we have more flexibility, to do it we can use GlobalKey of the type ScaffoldState or using the InheritedWidget of Scaffold, with that we have access to methods of the State with which we can open the Drawer.

Result

Simple, no? let’s see the second case with the SliverAppBar.

Case 2

We know that the SliverAppBar works in the following way:

But what we want is to put a Card embedded in our SliverAppBar as shown in the following image.

Wait, but the content that is inside the SliverAppBar is clipped so it can not exceed the constraints, and now what do we do?

Quiet, let’s see the source code of the SliverAppBar, oh surprise, it’s a StatefulWidget that uses a SliverPersistentHeader inside, that’s the secret.

We are going to create our own SliverPersistentHeaderDelegate in order to use the SliverPersistentHeader.

Result

Done, we already have our 2 cases resolved.

You can see the examples in the following repo.

diegoveloper/flutter-samples

Conclusion

Many times we get desperate when we do not find some Widget properties that Flutter provides, but it is always a good practice to check the source code of how the current Widgets are built to understand how Flutter works and the different options we have to create our own Widgets.

You can follow me on Twitter

Diego Velasquez

Flutter: Increase the power of your AppBar & SliverAppBar was originally published in Flutter Community on Medium, where people are continuing the conversation by highlighting and responding to this story.

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 que vamos a actualizar el contenido, parte del código sería así.

Parent

Child 1

Child 2

Resultado

Ahora, si ven la UI de nuestro ejemplo, hemos creado varios botones de acción, cada acción representa lo siguiente:

Acción 1 Actualizar el contenido del widget Child 1 desde el widget Parent.

Acción 2 Actualizar el contenido de widget Parent desde el widget Child 1.

Acción 3 Actualizar el contenido del widget Child 2 desde el widget Child 1.

Acción 4 Cambiar de tab desde el widget Child 1 hacia el widget Child 2.

Vamos a ver paso a paso cada una de estas acciones y qué opciones tenemos para realizarlas.

Acción 1

Actualizar el contenido del widget Child 1 desde el widget Parent.

Resultado

Opción 1:

Actualizar el widget pasando un parámetro (definido dentro del widget Child). Luego necesitamos modificar el Child para mostrar el parámetro si es que existe alguno.

Código actualizado:

Parent

Child 1

Nota: Estamos preguntando si el parámetro widget.title no trae un valor nulo, de otra manera se mostrará “Page 1”.

Opción 2:

Definir un GlobalKey con la clase State de nuestro widget Child 1. Tendremos que cambiar la clase a pública, así que quitamos el guión bajo para que nuestra clase quede así : Child1PageState.

Establecemos el GlobalKey como key de nuestro widget Child 1.

Creamos un método en nuestro widget Child 1 el cual refrescará el contenido con un nuevo valor.

Llamamos al método definido en Child1State desde nuestro widget Parent.

Código actualizado:

Parent

Child 1

Opción 3:

Usando InheritedWidget para guardar los datos desde el widget Parent y restaurar los datos desde el widget Child 1.

Después de actualizar el widget Parent con el nuevo valor, podemos acceder a los datos del InheritedWidget desde cualquier widget que se encuentre en nuestro árbol de Widgets.

Código actualizado:

Parent and InheritedWidget

Child 1

Nota: Si te gusta este modo, te recomiendo que revises este gran Package llamado: ScopedModel

Acción 2

Actualizar el contenido de widget Parent desde el widget Child 1.

Resultado

Opción 1:

Usando CallBacks, crear un método en el widget Parent, pasar el método como callback desde nuestro widget Parent a nuestro widget Child.

Crear un parámetro callback en nuestro widget Child.

Ejecutar el callback desde nuestro widget Child.

Código actualizado:

Parent

Child 1

Acción 3

Actualizar el contenido del widget Child 2 desde el widget Child 1.

Resultado

Opción 1:

Debido a que el widget Child 2 no está construido aún ( Estamos usando tabs y el widget visible es el Child 1)

Usar InheritedWidget para guardar el valor es la mejor opción.

Código actualizado:

Parent

Child 1

Child 2

Acción 4

Cambiar de tab desde el widget Child 1 hacia el widget Child 2.

Resultado

Opción 1:

Pasar el tabController como parámetro desde el widget Parent hacia el widget Child 1.

Código actualizado:

Parent

Child 1

Opción 2:

Pasar un callBack desde el widget Parent hacia el widget Child 1 y cambiar el índice de nuestro tabController.

Código actualizado:

Parent

Child 1

Opción 3:

Poner el tabController dentro de nuestro InheritedWidget, llamar a este desde nuestro widget Child 1 y cambiar el índice de nuestro tabController.

Código actualizado:

Parent

Child 1

Conclusión

Es bueno usar las herramientas que Flutter provee para que puedan ver el performance de cada uno, lo ideal es que al momento de pasar valores se reconstruyan los mínimos widgets posibles.
Compártenos si tienes otra forma de comunicar Widgets.

Puedes revisar el código fuente en mi repo de flutter-samples https://github.com/diegoveloper/flutter-samples

References

InheritedWidget class - widgets library - Dart API

https://flutter.dev/docs/development/ui/interactive

Sígueme en Twitter:

Diego Velasquez

Comunicación entre Widgets was originally published in Comunidad Flutter on Medium, where people are continuing the conversation by highlighting and responding to this story.

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.

Parent

Child 1

Child 2

Result

Now, if you see the UI of our example, we have created several action buttons, each action represents the following:

Action 1 Update the content of the Child 1 widget from the Parent widget.

Action 2 Update the content of the Parent widget from the Child 1 widget.

Action 3 Update the content of the Child 2 widget from the Child 1 widget.

Action 4 Change the tab from Child 1 widget to Child 2 widget.

We will see step by step each of these actions and what options we have to do it.

Action 1

Update the content of the Child 1 widget from the Parent widget.

Result

Option 1:

Update the widget passing a parameter (defined inside the child). Then we need to modify the child also to display the param if there is any.

Code updated:

Parent

Child 1

Note: we are asking if there is any non-value param from widget.title, otherwise It will display the value “Page 1”.

Option 2:

Define a GlobalKey with State class of the Child 1. We will have to make the State class public, so remove the underscore : Child1PageState
Set the GlobalKey as a key for the Child1 Widget.
Create a method on the Child1 widget which will refresh the Widget with the new value.
Call the method defined in Child1State from Parent Widget.

Code updated:

Parent

Child 1

Option 3:

Using InheritedWidget to store the data from Parent Widget and restore the data from Child1 Widget.
After we refresh the Parent Widget with the new value, we can access to that InheritedWidget from any Widget in the Widget tree.

Code updated:

Parent and InheritedWidget

Child 1

Note: If you like this approach I recommend you to use this awesome package called: ScopedModel

Action 2

Update the content of the Parent widget from the Child 1 widget.

Result

Option 1:

Using CallBacks , create a method in the Parent widget, pass the method as a callback from your Parent Widget to your Child Widget.
Create Callback param in your Child Widget.
Execute the callback from your Child Widget.

Code updated:

Parent

Child 1

Action 3

Update the content of the Child 2 widget from the Child 1 widget.

Result

Option 1:

Because the Child 2 Widget is not built yet (we are using tabs and Child 1 widget is the current) Using InheritedWidget to store the value is the best option.

Code updated:

Parent

Child 1

Child 2

Action 4

Change the tab from Child 1 widget to Child 2 widget.

Result

Option 1:

Pass the tabController as a parameter from Parent Widget to Child 1 Widget.

Code updated:

Parent

Child 1

Option 2:

Pass a callBack from Parent to Child 1 Widget and change the index of the controller.

Code updated:

Parent

Child 1

Option 3:

Set the tabController inside InheritedWidget , call it from Child 1 Widget and change the index of the controller.

Code updated:

Parent

Child 1

Conclusion

It is good to use the tools that Flutter provides so you can check the performance of each one, the ideal is that when passing values, the minimum possible widgets are rebuilt.
Let us know if you have another ways to communicate Widgets.

You can check the source code in my flutter-samples repo https://github.com/diegoveloper/flutter-samples

References

InheritedWidget class - widgets library - Dart API

https://flutter.dev/docs/development/ui/interactive

You can follow me on Twitter

Diego Velasquez

Flutter: Communication between widgets was originally published in Flutter Community on Medium, where people are continuing the conversation by highlighting and responding to this story.

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

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, you can take a look here:

Flutter : let’s know the ScrollController and ScrollNotification

Let started

Analyzing the main image we see that it is composed of:

Scaffold
__AppBar
____title ‘Messages’
____actions
______IconButton -> search
______IconButton -> dots

__Body
____ListView
______Custom StatelessWidget

__FloatingActionButton (changes according to the direction)

That was a quick look at the main outline of the app’s UI. I won’t go into much detail on how to build the Custom StatelessWidget since it is not complicated.

Translated into code would be the following:

Result

Now, the challenge is how to transform my FloatingActionButton when the user scroll and change the direction? For that, our ListView must have as parent the NotificationListener of the ScrollNotification subtype.

NotificationListener<ScrollNotification>(
              onNotification: (onScrollNotification) {
              
              },
              child: _buildList())

With this we are already listening to scroll notifications, now let’s do the logic to know if it is going up or down.

We have to create a variable to save the current direction:

class _AndroidMessagesPageState extends State<AndroidMessagesPage> {

bool isGoingDown = true;

Now, the logic inside our onScrollNotification callBack

Refreshing the Fab button according to the direction:

Result

As you can see, we refreshed the Fab button , but the transition isn’t smooth, right?
We can improve it by creating our own button and using AnimatedContainer for the animation, in the following way.

https://gist.github.com/diegoveloper/3c18ad5398f2e33c134bcefd187d1f43

And call our new Fab button like this way:

floatingActionButton: MyFabButton(isGoingDown)

Final result

References

You can check the source code in my flutter-samples repo https://github.com/diegoveloper/flutter-samples

You can find me on Twitter: @diegoveloper.

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 app, which has a Text widget at the top that indicates when the minimum or maximum scroll was reached.
In the lower part we will have a list of elements.

Code:

String message = "";

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Scroll Limit reached"),
      ),
      body: Column(
        children: <Widget>[
          Container(
            height: 50.0,
            color: Colors.green,
            child: Center(
              child: Text(message),
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: 30,
              itemBuilder: (context, index) {
                return ListTile(title: Text("Index : $index"));
              },
            ),
          ),
        ],
      ),
    );
  }

Once we have our widget, the first step is to declare a ScrollController variable.

ScrollController _controller;

We instantiate it within our initState method, in the following way:

@override
  void initState() {
    _controller = ScrollController();
    super.initState();
  }

Then we assign this _controller to our ListView.

ListView.builder(
              controller: _controller,
              itemCount: 30,
              itemBuilder: (context, index) {
                return ListTile(title: Text("Index : $index"));
              },
            )

With this we have our ListView connected with our ScrollController, we just have to listen to the events to determine what we want.

Listening to events

_scrollListener() {
 
 }

@override
  void initState() {
    _controller = ScrollController();
    _controller.addListener(_scrollListener);
    super.initState();
  }

Now we are listening to the Scroll events, but how we can know if the scroll reach the top or bottom.

We just have to add these validations:

_scrollListener() {
    if (_controller.offset >= _controller.position.maxScrollExtent &&
        !_controller.position.outOfRange) {
      setState(() {
        message = "reach the bottom";
      });
    }
    if (_controller.offset <= _controller.position.minScrollExtent &&
        !_controller.position.outOfRange) {
      setState(() {
        message = "reach the top";
      });
    }
  }

We test by scrolling up or down and get this result

Result

That’s it, now we know when our list reached the top or bottom of the scroll, let’s see the other case.

Move between elements of a list.

We make a screen similar to the previous one, we add 2 separate buttons which we will use to move up or down between the elements of the list.
We also create a variable in which we define the size of our elements in the list, this variable itemSize we will use also to move that number of pixels up or down.

Code:

final itemSize = 100.0;

_moveUp() {
     //Add logic here
  }

_moveDown() {
   //Add logic here
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Scroll Movement"),
      ),
      body: Column(
        children: <Widget>[
          Container(
            height: 50.0,
            color: Colors.green,
            child: Center(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  RaisedButton(
                    child: Text("up"),
                    onPressed: _moveUp,
                  ),
                  RaisedButton(
                    child: Text("down"),
                    onPressed: _moveDown,
                  )
                ],
              ),
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: 30,
              itemExtent: itemSize,
              itemBuilder: (context, index) {
                return ListTile(title: Text("Index : $index"));
              },
            ),
          ),
        ],
      ),
    );
  }

Now we have to create our ScrollController and link it with our ListView

ScrollController _controller;

@override
  void initState() {
    _controller = ScrollController();
    super.initState();
  }

...

child: ListView.builder(
              controller: _controller,
              itemCount: 30,
              itemExtent: itemSize,
              itemBuilder: (context, index) {
                return ListTile(title: Text("Index : $index"));
              },
            ),

Once we have connected the ScrollController to our list, moving is very simple.

We can do it in 2 ways.

With animation:

When we want the scroll to have animation, it receives the offset in pixels as parameters , the Curve type animation , and the duration.

_controller.animateTo(pixelsToMove,
 curve: Curves.linear, duration: Duration (milliseconds: 500));

Without animation:

When we want the scrolling without animation, it only receives the offset in pixels as parameter.

_controller.jumpTo(pixelsToMove);

For our example we are going to use the animated way since the user has to perceive the scrolling.

_moveUp() {
    _controller.animateTo(_controller.offset - itemSize,
        curve: Curves.linear, duration: Duration(milliseconds: 500));
  }

_moveDown() {
    _controller.animateTo(_controller.offset + itemSize,
        curve: Curves.linear, duration: Duration(milliseconds: 500));
  }

We use the current offset of our ScrollController which has the current pixels of its position, and we add or remove the itemSize which has the height of our current item from the list.

Result

Very simple, no? Yes, that’s right, that’s Flutter.

Finally we are going to review the last case.

Listen ScrollNotifications.

For this we create a UI similar to that of case one, in which we will display the state of our Scroll at the top.

Code:

String message = "";

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Scroll Status"),
      ),
      body: Column(
        children: <Widget>[
          Container(
            height: 50.0,
            color: Colors.green,
            child: Center(
              child: Text(message),
            ),
          ),
          Expanded(
            child: ListView.builder(
                itemCount: 30,
                itemBuilder: (context, index) {
                  return ListTile(title: Text("Index : $index"));
                },
              ),
          ),
        ],
      ),
    );
  }

Once we have that ready, we will need to use our NotificationListener Widget to capture notifications from our List.

So, first we add NotificationListener as a new container of our ListView and we will listen the events of type ScrollNotification,

Expanded(
            child: NotificationListener<ScrollNotification>(
              
              child: ListView.builder(
                itemCount: 30,
                itemBuilder: (context, index) {
                  return ListTile(title: Text("Index : $index"));
                },
              ),
            ),
          ),

Now we’ll have implement the onNotification callback.
The code would look like this:

Expanded(
            child: NotificationListener<ScrollNotification>(
              onNotification: (scrollNotification) {
                //do your logic
              },
              child: ListView.builder(
                itemCount: 30,
                itemBuilder: (context, index) {
                  return ListTile(title: Text("Index : $index"));
                },
              ),
            ),
          ),

In order to identify the type of ScrollNotification, we do it in the following way:

Expanded(
            child: NotificationListener<ScrollNotification>(
              onNotification: (scrollNotification) {
                if (scrollNotification is ScrollStartNotification) {
                  _onStartScroll(scrollNotification.metrics);
                } else if (scrollNotification is ScrollUpdateNotification) {
                  _onUpdateScroll(scrollNotification.metrics);
                } else if (scrollNotification is ScrollEndNotification) {
                  _onEndScroll(scrollNotification.metrics);
                }
              },
              child: ListView.builder(
                itemCount: 30,
                itemBuilder: (context, index) {
                  return ListTile(title: Text("Index : $index"));
                },
              ),
            ),
          ),

We created a method to update our top label.

_onStartScroll(ScrollMetrics metrics) {
      setState(() {
        message = "Scroll Start";
      });
    }

_onUpdateScroll(ScrollMetrics metrics) {
      setState(() {
        message = "Scroll Update";
      });
    }

_onEndScroll(ScrollMetrics metrics) {
      setState(() {
        message = "Scroll End";
      });
    }

Result

Super easy again, right?

Conclusion

As we have seen, using the ScrollController and ScrollNotification is not complicated. Also you can go deeper and play with ScrollPhysics and ScrollPosition .We can create very nice things if we want, like this: https://twitter.com/diegoveloper/status/1054400640795992064
You just have to let your imagination fly :)
And remember, with Flutter never say no to your designer.

You can check the source code in my flutter-samples repo https://github.com/diegoveloper/flutter-samples

References

https://docs.flutter.io/flutter/widgets/ScrollController-class.html
https://docs.flutter.io/flutter/animation/Curves-class.html
https://docs.flutter.io/flutter/widgets/ScrollNotification-class.html

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 the bottom to get the Size and Position.

This is the code of the demo app:

And the result:

Ok so now the question is : How can I get the size and position of each panel?

Let’s focus on just one panel for this post (Red panel) , after we know how to get the size and position for one panel it should be easy for the others.

Get the size of a Widget

In order to do that, we need our Widget to have a Key, for this we create a GlobalKey and assign it to our Widget.

//creating Key for red panel
GlobalKey _keyRed = GlobalKey();
...
//set key
    Flexible(
             flex: 2,
             child: Container(
               key: _keyRed,
               color: Colors.red,
             ),
     ),

Once our Widget already has a Key, we can use this Key to be able to obtain the size in the following way:

_getSizes() {
    final RenderBox renderBoxRed = _keyRed.currentContext.findRenderObject();
    final sizeRed = renderBoxRed.size;
    print("SIZE of Red: $sizeRed");
 }

If we press the Get Sizes button, you’ll get this result in the console:

flutter: SIZE of Red: Size(375.0, 152.9)

now we know that our Red panel has 375.0 as width and 152.9 as height

It was easy, right?

Let’s go to obtain the position in which our Widget is located.

Get the position of a Widget

In the same way that we did previously, our Widget must have an associated Key.

Now we update the method to obtain the position of the Widget relative to the top-left of the defined position (in this case we are using 0.0 it means the top-left corner of our current screen).

_getPositions() {
    final RenderBox renderBoxRed = _keyRed.currentContext.findRenderObject();
    final positionRed = renderBoxRed.localToGlobal(Offset.zero);
    print("POSITION of Red: $positionRed ");
  }

If we press the Get Positions button, you’ll get this result in the console:

flutter: POSITION of Red: Offset(0.0, 76.0)

It means our Widget start from 0.0 from the X axis and 76.0 from the Y axis from TOP-LEFT.

Why 76.0? That’s because there is an AppBar above that has a height of 76.0.

So we already know how to get the size and position of our Widgets, well so far. Yay!!

But what happens if I’m interested in getting the size or position at the beginning, without having to press a button for it.

Ok then let’s call our methods in our constructor.

_MainSizeAndPositionState(){
     _getSizes();
     _getPositions();
   }

Run the app and …. oh we have an error here:

flutter: The following NoSuchMethodError was thrown building Builder:
flutter: The method 'findRenderObject' was called on null.
flutter: Receiver: null
flutter: Tried calling: findRenderObject()

Ok let’s try calling the methods from the initState , it should work ….. or no

@override
  void initState() {
    _getSizes();
    _getPositions();
    super.initState();
  }

Run the app and … a little different but the same error:

flutter: Another exception was thrown: NoSuchMethodError: The method 'findRenderObject' was called on null.

So, we have a problem, we can not get the size or position at the beginning, so how do I do it?

This happens because the context is not yet associated with our state.

You can find more information about the lifecycle of the Widgets here: https://medium.com/flutter-community/widget-state-buildcontext-inheritedwidget-898d671b7956

So we have to wait for our Widget to finish rendering, but how can achieve that?

There is a simple way, as I show you below.

@override
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback(_afterLayout);
    super.initState();
  }

 _afterLayout(_) {
    _getSizes();
    _getPositions();
  }

With this you make sure to call your methods after the layout is completed.

If we run our app again, this is the result:

flutter: SIZE of Red: Size(375.0, 152.9)
flutter: POSITION of Red: Offset(0.0, 76.0)

Finally!!!

You can also review this package created by my friend Simon Lightfoot here: https://pub.dartlang.org/packages/after_layout

Conclusion

Many times, we get complicated by things that are very simple, it is necessary to read the documentation that Flutter provides, anyway every day we learn new things.

You can check the source code in my flutter-samples repo https://github.com/diegoveloper/flutter-samples

References

https://docs.flutter.io/flutter/rendering/RenderBox-class.html
https://medium.com/flutter-community/widget-state-buildcontext-inheritedwidget-898d671b7956
https://pub.dartlang.org/packages/after_layout

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.

The link should redirect to the app and after that redirect to the invitation screen.

How do we solve it?

Firebase Dynamic Link was the perfect solution for this requirement.

In this post I will not go into detail on how to configure Firebase Dynamic Link on Android/iOS, there are many tutorials about that.
I will detail the integration in Flutter for receiving links that contain deep link with different parameters, since when I implemented it I found a bug that I am going to show them.

Step 1

Create our dynamic Link manually

You can do so by following this documentation: https://firebase.google.com/docs/dynamic-links/create-manually

Step 2

Add the Firebase Dynamic Link package in your Flutter project

https://pub.dartlang.org/packages/firebase_dynamic_links

You can read the part where it says Handle Received Dynamic Links, since it details the instructions in case you don’t have it configured.

Add new package into the pubspec.yaml file

firebase_dynamic_links: ^0.0.6

Step 3

The example that is shown on the plugin page, doesn’t give much detail about where we should put that code block, in my case I had to read the source code of the Plugin to understand what It was doing.

This is the example code:

Assuming that MyHomeWidget is our initial widget that is displayed when the application starts, when creating the Widget and starting the state, they call the _retrieveDynamicLink method, which uses the plugin with the following line:

final PendingDynamicLinkData data = await FirebaseDynamicLinks.instance.retrieveDynamicLink ();
 final Uri deepLink = data? .link;

FirebaseDynamicLinks.instance.retrieveDynamicLink() is the call that is responsible for obtaining the deep link in the case our application was opened from the dynamic link.

Problem 1

If our widget was already started, if you open the dynamic link again, it will never go through the initState() method again, so we will never get the deep link.

Solution

Use the WidgetsBindingObserver to listen the status of the widget when it resume or pauses.

So we can do something like this

Here we make sure that each time our Widget is displayed, the method is invoked to obtain the dynamic Link.

Problem 2

In iOS, the AppLifecycleState.resume is called before the plugin gets the Deep Link.

Solution

Add a small delay before invoking the _retrieveDynamicLink.

So far so good, just that I noticed a bug that only happens on iOS.

Problem 3

In iOS, once we open the app, and get the deep Link using FirebaseDynamicLinks.instance.retrieveDynamicLink(), when we call it again, we continue obtaining the last deep Link, that is, since the call will be executed every time the widget enters the state of AppLifecycleState.resumed, and it happens, when the application is opened, either from a dynamic link or manually by the user, in iOS I had no way of knowing from where it was opened, because after getting a deep link, the method would bring back the same value even if it came out and entered the app manually.

When I was reviewing the plugin code for iOS, I saw that when calling the retrieveDynamicLink method, what it does is store the value of the deep link in a variable and return it, the problem is that after consuming that method, the variable is never cleaned , as if it does in the case of Android, and therefore that unexpected result in iOS.

I already sent a Pull Request to solve that issue, but until they accept it, you can change the pubspec.yaml file as follows

firebase_dynamic_links:
  git:
    url: https://github.com/diegoveloper/plugins.git
    ref: ff17b724df0bcdf35bb5689b347d7fbef7107615
    path: packages/firebase_dynamic_links

UPDATE 08/23/2018

Finally the PR was approved (fixed problem 3), now we add the plugin in this way:

firebase_dynamic_links: ^0.1.0

UPDATE 07/23/2019 (Breaking change)

There is a new version(0.5.0) of the firebase_dynamic_links package, now we have two methods to receive the dynamic link.

• getInitialLink a future to retrieve the link that opened the app
• onLink a callback to listen to links opened while the app is active or in background

You can forget what I wrote before this update, and now it should be easy to use, like this:

@override
  void initState() {
    super.initState();
    this.initDynamicLinks();
  }

  void initDynamicLinks() async {
    final PendingDynamicLinkData data = await FirebaseDynamicLinks.instance.getInitialLink();
    final Uri deepLink = data?.link;

    if (deepLink != null) {
      Navigator.pushNamed(context, deepLink.path);
    }

    FirebaseDynamicLinks.instance.onLink(
      onSuccess: (PendingDynamicLinkData dynamicLink) async {
        final Uri deepLink = dynamicLink?.link;

        if (deepLink != null) {
          Navigator.pushNamed(context, deepLink.path);
        }
      },
      onError: (OnLinkErrorException e) async {
        print('onLinkError');
        print(e.message);
      }
    );
  }

Conclusion

Many times we don’t find much documentation for certain plugins/libraries, and it is always good that we can share our experiences so that we can all learn.
If you have another solution for handling deep links don’t hesitate to share it.

References

https://docs.flutter.io/flutter/widgets/WidgetsBindingObserver-class.html
https://pub.dartlang.org/packages/firebase_dynamic_links

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

In Android perform such animations can be a bit annoying depending on the views we try to communicate, since they can be from an Activity -> Activity, Fragment -> Activity, Activity -> Fragment or Fragment -> Fragment.

In Flutter this animation has the name of ‘Hero’, and now I’m going to show you how easy is it to do it.

To achieve a simple transition animation, we need two Heroes, Hero origin and Hero destination, the 2 must share the same tag name to make it work.
So if we want our image to have that animation, we have to wrap our widget with a Hero widget.

I created a custom widget that we will use to move from the origin to destination

class CustomLogo extends StatelessWidget {
  final double size;

CustomLogo({this.size = 200.0});

@override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.lightBlueAccent,
      width: size,
      height: size,
      child: Center(
        child: Image.asset(
          "images/mario_logo.png",
          width: size,
          height: size,
        ),
      ),
    );
  }
}

This is the image if you want to use

Don’t forget to add it into the pubspec.yaml file

assets:

- images/mario_logo.png

After we have our child widget, we have to put it inside our Hero widget with a defined tag name, in this case I will use hero1 as tag name.

                Hero(
                    tag: "hero1",
                    child: ClipOval(
                      child: CustomLogo(
                        size: 60.0,
                      ),
                    ),
                  ),

As you can see in the code above, our CustomLogo is wrapped by ClipOval (To cut out our widget in a circular way) and also wrapped by the Hero.

Now that we have our origin Hero , let’s go to call our destination page that contains the destination Hero:

Navigator.push(
        context,
        MaterialPageRoute(
            fullscreenDialog: true, builder: (BuildContext context) => Page1()));

Basically, after we press some button, we’ll call to the Navigator.push to go to the next page.

And this is our Page1 (destination page) widget.

As you can see in the code above, we are using a our CustomLogo with a custom size , wrapped by a Hero with the same tag name as the origin “hero1”

Result

It is also possible to have animation for more than one element, that is, we can have more than one Hero per page, in the same way Hero origin and destination must have the same tag names.

In this case we will show a Hero image and a Hero text as they move towards the destination screen.

Column(
                children: <Widget>[
                  Hero(
                    tag: "hero1",
                    child: ClipOval(
                      child: CustomLogo(
                        size: 60.0,
                      ),
                    ),
                  ),
                  Hero(
                      tag: "hero2",
                      child: Material(
                        color: Colors.transparent,
                        child: Text(
                          "Sample Hero",
                          style: TextStyle(fontSize: 14.0, color:   Colors.black),
                        ),
                      ))
                ],
              )

Calling our Page2

Navigator.push(
        context,
        MaterialPageRoute(
            fullscreenDialog: true, builder: (BuildContext context) => Page2()));

Result

If you see this animation you notice a glitch in the Text widget transition, I think it’s a Flutter bug, but it can easily fixed by wrapping our Text widget origin and destination with the Material widget.

Column(
                children: <Widget>[
                  Hero(
                    tag: "hero1",
                    child: ClipOval(
                      child: CustomLogo(
                        size: 60.0,
                      ),
                    ),
                  ),
                  Hero(
                      tag: "hero2",
                      child: Material(
                        color: Colors.transparent,
                        child: Text(
                          "Sample Hero",
                          style: TextStyle(fontSize: 14.0, color: Colors.black),
                        ),
                      ))
                ],
              ),

Destination

Result

Works better, right?

Something that many ask is if we can use Heroes using AlertDialog.

This is possible, but to achieve this we have to create a custom PageRoute.

Origin

Column(
                children: <Widget>[
                  Hero(
                    tag: "hero1",
                    child: ClipOval(
                      child: CustomLogo(
                        size: 60.0,
                      ),
                    ),
                  ),
                  Hero(
                      tag: "hero2",
                      child: Material(
                        color: Colors.transparent,
                        child: Text(
                          "Sample Hero",
                          style: TextStyle(fontSize: 14.0, color: Colors.black),
                        ),
                      ))
                ],
              )

Destination Popup (after we press click in some button)

Navigator.push(
        context, HeroDialogRoute(builder: (BuildContext context) => return Center(
      child: AlertDialog(
        title: Hero(
            tag: "hero2", child: Material(child: Text('You are my hero.'))),
        content: Container(
          child: Hero(
              tag: 'hero1',
              child: CustomLogo(
                size: 300.0,
              )),
        ),
        actions: <Widget>[
          OutlineButton(
            onPressed: () => Navigator.of(context).pop(),
            child: Icon(Icons.close),
          ),
        ],
      ),
    )));

You can see an error here, the HeroDialogRoute doesn’t exist , so we’ll have to create that custom route.

This is the code

Result

Finally, we can also create personalized transitions, with the duration and animation that we like the most.

As we can see in the first example, the transition of the background screen is shown a little forced and the animation of the Heroes are shown very fast.

Now I going to create a Hero animation smoother and also with more duration.

Origin

Column(
                children: <Widget>[
                  Hero(
                    tag: "hero1",
                    child: ClipOval(
                      child: CustomLogo(
                        size: 60.0,
                      ),
                    ),
                  ),
                  Hero(
                      tag: "hero2",
                      child: Material(
                        color: Colors.transparent,
                        child: Text(
                          "Sample Hero",
                          style: TextStyle(fontSize: 14.0, color: Colors.black),
                        ),
                      ))
                ],
              )

Destination

We’ll use the same Page1 widget as destination page.

Achieving a custom animation is related to the transaction of the PageRoute, we will show an example.

We use a PageRouteBuilder with an AnimatedBuilder as pageBuilder attribute, and inside the animatedBuilder we use the Opacity widget to display the page smoother, also we modified the transitionDuration to 600 milliseconds.

Final Result

Conclusion

Flutter provides us with many tools and APIs for handling transitions and animations, later I will write some related posts about animations.

You can check the source code in my flutter-samples repo https://github.com/diegoveloper/flutter-samples

References

https://flutter.io/animations/hero-animations/

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 same.

In order to do the same in Flutter, we need to use the Widget called SliverAppBar together with FlexibleSpaceBar as a child.

I’m going to show you a simple example

Result

So far everything is fine, behaves as we want, with just a few lines of code :), however, I had a problem when using SliverAppBar along with TabBars.

I will add 2 tabs and we will see what happens.

This is the code

Result

As we can see, the UI looks very bad, due to the fact the title does not reach the top bar, so it is crossed with the Tabs.

We are going to try to improve this design, for this I am going to remove the Tabs from the SliverAppBar and I will put them in another Sliver, the code would be as follows

Result

It’s better, right? but we have a problem, at the time of scrolling up, the Tabs are not fixed and disappears, this is not what we are looking for, so to solve this, we must use the SliverPersistentHeader and create a delegate subclass of SliverPersistentHeaderDelegate, as follows

Final Result

Conclusion

Many times we encounter some problems that we think we can’t do in Flutter, but all we have to do is read the documentation step by step.

You can check the source code in my flutter-samples repo https://github.com/diegoveloper/flutter-samples

References

https://docs.flutter.io/flutter/material/SliverAppBar-class.html
https://docs.flutter.io/flutter/material/FlexibleSpaceBar-class.html
https://docs.flutter.io/flutter/widgets/SliverPersistentHeaderDelegate-class.html