Here is the code:

• Interactive blob that stretches, rotates, and scales with gestures.
• Customizable behavior for elastic scaling and distance.
• Built using CustomPainter and ClipPath.

https://github.com/meeziest/elastic_blob/tree/main

#github #code

I’ve noticed that many devs believe they can only deconstruct object classes and records starting from Dart 3. However, Dart’s pattern matching you can also deconstruct nested maps and lists.

Map patterns match values that implement Map, and then recursively match its subpatterns against the map's keys to destructure them

A list pattern matches values that implement List, and then recursively matches its subpatterns against the list's elements to destructure them by position

This destructuring also works with complex nested data. For example, if your map contains other maps or complex data structures, you can easily unpack them.

Don’t forget to utilize this when needed to make your code more elegant.

#tip

Recently, I decided to set myself a challenge: creating an animated solar system explorer. The app isn’t quite finished yet, but here is the progress.

In this project, I’m working on simulating planetary orbits, experimenting with animations, and refining proper zooming options with perspective transformations.

If you’d like to track the progress and see the code behind it, here it is. And if you have any ideas or fixes for the project, I’m open to feedback! I’ll keep you updated as the app evolves.

https://github.com/meeziest/solar_system

#github #code

Could you identify any potential issues?

#interview #question

The problem is in Closures. Closures can unintentionally capture references to short-lived object (such as a BuildContext). In that case, it prevents the garbage collector from reclaiming that memory as long as the closure exists.

Capturing a BuildContext would prevent the context from being garbage collected, potentially leading to a memory leak if the closure outlives the widget's lifecycle.

Now, the next question is - How to prevent BuildContext not being garbage collected, without breaking the logic of printPrevRouteName?

#interview #question

To avoid this issue - It’s better to avoid directly capturing context in the closure. Instead, you can use values that are safe for long-term storage.

In the solution provided above, capturing a long-lived object like ModalRoute is safe. ModalRoute is retrieved once and stored in a variable, which is then used inside the closure. Now, the handler closure no longer contains a reference to context, preventing a potential memory leak.

When importing icons into your Flutter app, it’s essential to consider visual alignment and icon's optical weight, not just technical centering. Icons are usually centered within their rectangular bounding box by default, but this often doesn’t look visually balanced within buttons.

Image 1: Default Centering
In this example, the icon is centered based on its bounding box. This is technically accurate, but it doesn’t look visually balanced. The triangle appears slightly off, creating a sense of imbalance within the button.

Image 2: Adjusted for Visual Balance
Here, we’ve adjusted the triangle’s position slightly to the right. This small offset makes the icon look more balanced within the circle, creating a better visual effect.

#ui

How to align icon with optical weight within a button?

For example: A simple shape with symmetry, like a triangle for a “Play” button, is usually centered within a circle by designers. To achieve a balanced look, they align the circle itself according to the outer boundaries of its container. This careful positioning ensures the icon feels balanced within the button.

As a Flutter developer we can export the icon with correct positioning applied beforehand by designers. However, if the icon doesn’t have the proper positioning, we can use Padding widget or if you need more precise control over a complex shape icons, you can use Transform.translate. Adjusting the position by a few pixels can often make the button feel more balanced, even if it’s technically off-center.

This is called optical balance and takes into account the icon's optical weight within the button.

#ui

I really enjoyed this talk from apple on animating with springs! Especially the math part.

Animate with springs

In Flutter we have simular api which applies physics simulation to our widgets -> link

For more details-including the math, code and reasoning behind this effect, check out my Medium article:

Complex Animations in Flutter: Creating a Dynamic Circular Water-Ripple Progress Bar

#medium

Here’s a quick preview of how it looks:

#widget #animation