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:

  1. 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:

  1. 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!

--

--

--

Flutter, Dart & Supabase Developer | Livelong learner | Happy about sharing my knowledge

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

CS 371p Spring 2021: Cindy Pham

350,000 Images?! My First AI-Powered Android App

Wanna know how the company who developed Pac-Man and many popular games uses Aws?

Bandai namco

Web Scrapping using python 3

Vector-ts, a Python List -like data structure for Typescript / JavaScript.

Second Anniversary Update of Niagara Launcher

Asymptotic Analysis

UTM Install

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tomic Riedel

Tomic Riedel

Flutter, Dart & Supabase Developer | Livelong learner | Happy about sharing my knowledge

More from Medium

Flutter Isar Database — The complete crash course — part 2

Scheduling FCM in Flutter

Noob to Flutter Facilitator!

Integrating Flutterwave with a Flutter App.