Search for a command to run...
Using Flutter's CustomPaint to create futuristic looking widgets.
No comments yet. Be the first to comment.
As Flutter developers, we love the efficiency of writing code once and deploying it everywhere. But when it comes to the very final step of launching or updating an app, generating App Store and Play
If you're looking for a streamlined way to distribute your Android test builds using Firebase App Distribution (FAD) with the modern Android App Bundle (.aab) format, you might want to pause. While the promise of using AABs via FAD—leveraging the Goo...
Last month, I set myself a new challenge: to build and release a small app from scratch within a month. This decision came after a realization I had while working on my previous project. That project had so many uncertainties and things left to do th...
Last year, I wrote two articles about theming in Flutter, sharing my frustrations with ThemeData (part 1 & part 2). While ThemeData is powerful, its extensive properties can be overwhelming, especially when many of them are rarely used. After experim...
At the time of writing this article I’m working on a Survival/Management App/Game using Flutter.
The game takes place in a distant future, so I want the UI of the game to resemble this. I’ve done some searching on the internet and took inspiration of games and movies.
After playing around with some ideas, I came up with the following idea, I need 45-degree corners!
I already used some 45-degree angled corners in the game, like for items in the list of goals.
For this I used BeveledRectangleBorder which can easily be applied to Containers and buttons.
But just having beveled corners isn’t enough, I want more. So how can I do this?
In short, by using CustomPaint you get full control over what you draw to the screen. You can use it to make very complex UI which is great for when the build-in widgets are not sufficient.
Then I realized that in my 6 years of using Flutter, I never used CustomPaint. I never felt like I needed it, but I’ve seen people do amazing things with them. One of them is Jeremiah Ogbomo. He showed off some cool UI in his saturdays-are-for-flutter series.
I’ve attended one of Jeremiah’s presentations and that made me think about using CustomPainter for my SciFiContainer.
I’ve spend about 4 or 5 evenings on creating the SciFiContainer.
The biggest challenge for me was coming up with a nice API as I wanted it to be quite flexible in order to use it in multiple places without having all containers looking the same.
The other big challenge was calculating all the points and padding. The Size that is passed into the CustomPainter is determined on the child widget. But this is not the limit in which you can paint. If you want, you can ‘paint’ outside the given size.
This meant a lot of different cases to take into account. Like when the indent is negative. This means that all the points on that side has to move in the opposite direction to make it fit inside the ‘bounding box‘.
The configurations of the corners and the borders also affect the padding inside the container as it tries to keep the content within the border.
Eventually I got the hang of it and was I able to make it all work as intended.
There are still some things that can be cleaned up to create a more ‘safe’ API but as it’s mainly intended for my own use, I don’t want to spend too much time on it.
Because quite some people on Twitter/X showed interest in this SciFiContainer I decided to share the code as a GitHub gist. But you can also view it below.
If you like this kind of content, give me a follow on Twitter/X as most of the stuff I make will be shared there.