I really like it when developers and designers add little details to an app. It shows that they really care about their user. In this article, I will

How to work with Dynamic Island in the Flutter application

submited by

Style Pass

2024-11-02 16:30:06

I really like it when developers and designers add little details to an app. It shows that they really care about their user. In this article, I will discuss how to make your app a little cuter for the user with Dynamic Island and a little pet.

You’ve probably seen examples like this on the App Store since the iPhone 14 was born. I think this is a very cool addition to your project or even a standalone project. There’s even a whole collection of similar apps.

Let’s now move on to our friend Flutter and see how such functionality can be implemented. Personally, I thought there was a ready-made package or similar project, but they are not in high demand or implement the wrong functionality. There’s the live_activities package for example, it’s a good one, but it’s a lot more complex functionality than what I need.

I set out to accomplish this with minimal effort. The idea is to mimic a widget that resembles Dynamic Island, then add it under the real “island”, and then add a moving element on our created widget. First, you need to consider the orientation of the device, because our dynamic island does not turn over. The easiest way to avoid this is to add this code to your application, which is exactly responsible for blocking the horizontal orientation.