10 Flutter tips — 4/10 — season 2
Now we are already on the 4th part of the 2nd season of this wonderful format.
Today we are again dealing with great packages. We mainly deal with the user interface and great icon packages, so… Let’s go and Happy reading!
swipe_to
swipe_to is a great package if you want to add simple swipe gestures to any widget. The advantage of this package is that the user doesn’t have to click on the action, but the action is executed immediately when swiping.
Here is an example to understand it better:
But… how can I integrate this incredible package into my code?
Well, that is quite simple:
See, it’s not hard at all, right?
rename
Of course, you want your app to have a cool name before you release it. But let’s face it, this process can be a real pain if you do it manually for each platform.
That’s why rename exists. This package allows you to rename your app on any platform in a few seconds. Here’s how it works:
- execute this command in the command line:
2. now execute these two commands:
The first command of the two sets the BundleId of your app. This is sort of your domain, only backwards. If you don’t have a domain, set it to your name or your company’s name. But it would be advantageous if the domain is not taken anyway.
The second command renames your app correctly. You will see this name on your homescreen in iOS and Android or on other platforms.
You can change the names as often as you like.
There are many more possibilities, like renaming an app for only one specific platform.
Hidable
hidable gives you the ability to hide any widget when the user scrolls. This can be very useful for a variety of things, so now we’ll look at how you implement this package:
- First, create a ScrollController. From this, you can then get whether the user is scrolling or not.
2. Now you add the scrollController as controller to a widget which is scrollable. Here is an example with a ListView:
3. As the third and last step you wrap any widget with the Hidable widget. In the widget you specify the scrollController as your controller. The Hidable widget has some other properties. We now do this process with an AppBar.
That’s it. Now you have successfully implemented the Hidable widget!
Flutter Sticky Header
Sometimes you’re scrolling in apps, and then all of a sudden the category is stuck at the top of the screen, which means you always know where you are. Have you ever wondered how that works in Flutter? No? Well, then read this section anyway, because it’s very interesting ;)
If you’re still reading, I’ll show you in more detail what I mean:
I think we all know now what I mean.
But how do I implement this in Flutter? Well, quite simple: With the flutter_sticky_header package. This package makes it very easy to build such a great feature into your app. Let me show you how to implement this in code:
But there re other ways you can implement something like this, like using SliverStickyHeader.builder.
Preload Page View
Everybody knows PageViews. They are very handy and can even be found on TikTok (If it was built with Flutter). But what if you have content on the PageView that comes from servers. It’s not very nice when the user goes one page further and then the content takes forever to load. This problem is solved by preload_page_view. You can use this package, as the name says, to preload any number of pages, so you don’t have eternal loading screens. The implementation of the widget is very simple and works almost like the normal PageView widget:
See, it wasn’t so hard after all.
Have fun building TikTok 2.0 hehe ;)
Phosphor Icons
As mentioned in the beginning, we want to talk about Icon Libraries of course. And believe me, this Icon Library is just amazing. In my opinion, these are the best icons I’ve seen so far. The great thing is that there are 5364 icons on phosphoricons.com, in all different variations.
Of course, this is just a screenshot from the website.
But… what does the whole thing have to do with Flutter now? Well, there is an officially supported Flutter Package, which contains all the icons of PhosphorIcons.
The implementation of a PhosphorIcons in Flutter is very simple:
That’s it. Now you have a beautiful pencil icon in your app.
Sliding Clipped Nav Bar
By now it’s almost a ritual that I present Nav bar packages in my 10 Flutter tips articles. Today the package sliding_clipped_nav_bar made it into this article. This package offers you a great way to make your app more interesting for users. Due to its incredibly simple implementation and beautiful design it is one of the best nav bar packages.
But… enough talking, how does a nav bar look like with this package?
I think you can see very well why I like this package so much. There are so many customization possibilities and the implementation is very simple:
Yes, that’s it. You don’t have to do anything else. The README file of this package is very detailed and gives you a very easy start into the package.
Battery plus
battery_plus is a package supported by the Flutter community which gives you various information about the status of your battery. It is very easy to use and can be used in many applications:
Freezed
Maybe you’ve heard of the package freezed, but if not, I’ll explain it to you now (because it’s very useful).
Now we assume that you have already created a dataclass in Flutter. As you probably noticed, there is a lot of boiler code there and it is just unpleasant to look at the code. That’s why freezed was created. With this package you can create dataclasses with many possibilities, with very little boilerplate code.
I won’t show you here how to implement Freezed exactly, but the README file is just GREAT.
Conclusion
Now we have come to the end of another episode of 10 Flutter tips.
I really hope you enjoyed it! If so, I’d love it if you could give this post a few claps and follow me if you don’t want to miss any more posts!
Want to check out some more quality content from me? Then I recommend you check out my Twitter account and follow me there too! You’ll get daily motivation there and find great threads about programming and productivity!
Have a great day!
