📱 16 / 100 Days Of Flutter, Kate's edition — yet another Backdrop animation, Flutter in Focus series, and ExcludeSemantics

Hi, Flutter community and welcome to day 16 of my challenge 👋

Today I've finished Flutter MDC codelabs by building UI for a simple e-commerce app.

Yet another Backdrop animation

On day 11 I had a tough experience with the backdrop animation. It turned out that the Flutter team really loves this animation because I stumbled on it again today.

The back layer of the Backdrop widget is coloured and shows the full menu when visible. The front layer is a white shape with an asymmetric product list.

This time I paid more attention to the RelativeRectTween animation as it was used in both backdrop implementations.

This is how I landed at the amazing Flutter in Focus series. Finally, I've got a good overview of different animation techniques and understood what Tween really means.

My experience with web animations is quite different compared to Flutter but there are common parts. For example, well-known animation curves. Flutter has great visual documentation for them: api.flutter.dev/flutter/animation/Curves-cl..

Widget of the day - ExcludeSemantics

On day 14 I discovered the Semantics widget. Today is the time for another accessibility widget — ExcludeSemantics. It's useful for complex widgets like my 2-layer Backdrop widget. While one layer is opened, the other one should be excluded from the semantics tree.

ExcludeSemantics(
          child: widget.backLayer,
          excluding: _frontLayerVisible,
),

The excluding prop should be set to true to actually exclude the child from the semantics tree.

Summary

Today I finished Material Design Components codelabs. It was a good intro to theming and animations. Up until now, I've been learning exclusively visual aspects of Flutter. I think I laid a good foundation to move forward. See you tomorrow! 😻