10 Flutter tips — 3/10 — season 2

Now we are already at the 3rd part of the 2nd season of this wonderful format.

Today we are dealing with packages again, but also with VSCode Extensions. We mainly deal with the user interface, so… Let’s go and Happy reading!

Animate do

I saw this package 1 day before I started writing this article and immediately renewed my entire app. Doesn’t sound motivating now? Well, let me first explain what this package can do. I personally hate animations. And I think many agree with me there. Still, nowadays you have to use animations to make the app appealing to the user. And that’s where animate_do comes in. Animate do offers a huge selection of already ready animations that you can apply to any widget. Here is a list of all the animations, of which there are so many more sub-points.

  • FadeIn Animations
  • FadeIn
  • FadeInDown
  • FadeInDownBig
  • FadeInUp
  • FadeInUpBig
  • FadeInLeft
  • FadeInLeftBig
  • FadeInRight
  • FadeInRightBig
  • FadeOut Animations
  • FadeOut
  • FadeOutDown
  • FadeOutDownBig
  • FadeOutUp
  • FadeOutUpBig
  • FadeOutLeft
  • FadeOutLeftBig
  • FadeOutRight
  • FadeOutRightBig
  • BounceIn Animations
  • BounceInDown
  • BounceInUp
  • BounceInLeft
  • BounceInRight
  • ElasticIn Animations
  • ElasticIn
  • ElasticInDown
  • ElasticInUp
  • ElasticInLeft
  • ElasticInRight
  • SlideIns Animations
  • SlideInDown
  • SlideInUp
  • SlideInLeft
  • SlideInRight
  • FlipIn Animations
  • FlipInX
  • FlipInY
  • Zooms
  • ZoomIn
  • ZoomOut
  • SpecialIn Animations
  • JelloIn

Okay, that was a lot, but I just wanted to show you the possibilities of this package. As I said, this package is almost a must for the next app.

MacOS UI

If you’ve ever developed an app for macOS using Flutter, you may have noticed it. Flutter doesn’t have any good widgets that are only for macOS. That’s why there’s macos_ui. This package makes it easy for you to create apps that look exactly like they were made with Swift. Again, there are an incredible number of widgets and a very long list, but I don’t need to list them this time.

This is just one example of the many possibilities:

Untitled

Fluent UI

Even with Windows (especially with Windows 11) there are no good widgets in Flutter. That’s why the package fluent_ui was created. Again, there is a huge selection of widgets to make your app look like a real Windows app.

It supports Light/Dark Theme, the Windows font, Header, Subheade,r Title, Subtitle etc, Reveal Focus, Page transitions, Drill in, Navigation and on top of that all the “Widgets”.

Onboarding overlay

You probably know it from many apps by now, an onboarding, where the app is explained to you. You can do exactly that with the package onboarding_overlay. I think I don’t have to explain much when I show you this video:

https://github.com/talamaska/onboarding_overlay/blob/master/screenshots/demo.gif?raw=true

The documentation for this package is great and very self explanatory.

Flutter Material Pickers

As the name of this package suggests, you can use it to call various pickers from Material Design. Some of them are new, so are not included in Flutter, while others have been improved.

https://raw.githubusercontent.com/codegrue/flutter_material_pickers/master/images/main_convenience_pickers.png

Flutter Text Field Fab

Everyone surely knows the normal FloatingActionButton, but what if you want to display a cool text field from it. Well, then this package is just the right thing for you. The look of this package is really well done and is very easy to implement in the code.

https://raw.githubusercontent.com/haefele-software/flutter_text_field_fab/main/assets/flutter_text_field_fab.gif

Flutter Login

This package is just amazing. It gives you a perfectly animated widget (or rather screen) for login. Here is an example:

https://github.com/NearHuscarl/flutter_login/raw/master/demo/demo.gif

The great thing is that you can customize everything here (and I mean everything).

Oh, and the implementation is also very simple:

Flutter widget snippets

Now we come to an extension. This Extension offers you a lot of snippets for different widgets. I can only recommend to install it.

Flutter Intl

Multi Language Support should be known to everyone. But the constant implementation of it in the app can be really annoying. That’s why the VSCode extension Flutter Intl exists. It creates a binding between the .arb files and the Flutter App.

So: I can recommend this extension to everyone who wants to implement multiple languages easily in his app.

Oh, and if you use a Jetbrains IDE (IntelliJ IDEA or AndroidStudio), you can find here the extension.

Flutter Riverpod Snippets

If you use Riverpod, then you should definitely check out this extension. It was developed by the GDE Robert Brunhage and makes the development with Riverpod very easy.

You can easily download it here.

Conclusion

Now we have come to the end of another episode of 10 Flutter tips.

I really hope you enjoyed it! If so, I would be very happy if you could give this post some 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!

Bye and 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

Swift function

Avoid nib and storyboards in iOS

Firebase crashlytics iOS(2) — upload dsym

Dark mode

Easy Pagination in SwiftUI

Oracle EF Core — Relational Views and Materialized Views

Dependency Injection In Swift

iOS 15 review: New features like focus mode and live text are game-changers

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

Indexed Column, Indexed Row in Flutter program

Dart built-in types

Naming Convention in Dart Programming Language Flutter

Flutter Announcements: Flutter Puzzle Hack Competition