10 Flutter Component Recommendations - 3

Someone asked me what to pay attention to in the design of the study (construction site), I can only say that the table is as wide as possible, the depth is too large, it is meaningless, whether it is not meaningful to lift the table, can't you get up and move after working for 2 hours, ergonomic chair thousand yuan The left and right bars are mainly sturdy and can be adjusted to sit stably. The wall space should be used. The walls are warm in color, with less light pollution. Natural light is used during the day, and some green is used. Many IKEA extensions can be purchased.

Today we're talking about packages again, but also VSCode extensions. We're mostly dealing with UI, so... let's go and have fun reading!

original

https://tomicriedel.medium.com/10-flutter-tips-season-2-part-3-10-15c88da72c2c

text

Animate do

https://pub.dev/packages/animate_do

I saw this package the day before I started writing this and immediately updated my entire app. Doesn't it sound very motivated now? Well, let me first explain what this package can do. I personally hate animation. I think a lot of people agree with me. However, now you have to use animation to attract users. This is where animate do comes in. Animate do provides a large selection of ready-made animations that you can apply to any widget. Here is a list of all animations with many child points.

• FadeIn Animations
• FadeIn
• FadeInDown Photography: FadeInDown
• FadeInDownBig
• FadeInUp
• FadeInUpBig
• FadeInLeft rear left
• FadeInLeftBig
• FadeInRight
• FadeInRightBig
• FadeOut Animations
• FadeOut
• FadeOutDown drop
• FadeOutDownBig
• FadeOutUp
• FadeOutUpBig 4. FadeOutUpBig
• FadeOutLeft Back off and turn left
• FadeOutLeftBig
• FadeOutRight disappears completely
• FadeOutRightBig
• BounceIn Animations
• BounceInDown
• BounceInUp
• BounceInLeft Left
• BounceInRight
• ElasticIn Animations ElasticIn Animations
• ElasticIn
• ElasticInDown
• ElasticInUp
• ElasticInLeft Left
• ElasticInRight
• SlideIns Animations SlideIns Animations
• SlideInDown
• SlideInUp
• SlideInLeft slides into the left
• SlideInRight
• FlipIn Animations Flipboard Animations
• FlipInX
• FlipInY
• Zooms in
• ZoomIn
• ZoomOut
• SpecialIn Animations
• JelloIn Jellyfish

Well, that's a lot, but I just wanted to show you what's possible with this package. As I said, this package is pretty much a must for the next application.

MacOS UI

https://pub.dev/packages/macos_ui

If you've ever used Flutter to develop apps for macOS, you've probably noticed. There aren't any good gadgets just for macOS. That's why there is macos ui. This package allows you to easily create exactly the same application as Swift. Again, there are a surprising number of widgets and a very long list, but I didn't need to list them this time.

This is just one example of many possibilities:

Fluent UI

https://pub.dev/packages/fluent_ui

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

It supports light/dark themes, Windows fonts, headers, subtitles, r-titles, subtitles, etc., display focus, page transitions, drill-in, navigation and all "widgets".

Onboarding overlay

https://pub.dev/packages/onboarding_overlay

You probably already know this from a lot of apps, like a new phone app that explains it to you. You can do exactly that with onboarding \_ overlay. I don't think I need to explain much when I show you this video:

The documentation for this package is fantastic and pretty self-explanatory.

Flutter Material Pickers

https://pub.dev/packages/flutter_material_pickers

As the name of this package suggests, you can use it to invoke various selectors in Material Design. Some of them are new and therefore not included in Flutter, while others have been improved.

Flutter Text Field Fab

https://pub.dev/packages/flutter_otp_text_field

Everyone knows the normal floating actionbutton, but what if you want to show a cool text field. Then this package is just right for you. This package has a very nice look and is easy to implement in code.

Flutter Login

https://pub.dev/packages/flutter_login

This packaging is amazing. It gives you a perfectly animated plugin (or rather screen) to log in. Below is an example:

The best part is that you can customize everything here (I mean everything).

Oh, and the implementation is also very simple:

Flutter widget snippets [vscode extension]

https://marketplace.visualstudio.com/items?itemName=alexisvt.flutter-snippets

Now, we come to an extension. This extension provides many code snippets for different widgets. I can only recommend installing it.

Flutter Intl [vscode extension]

https://marketplace.visualstudio.com/items?itemName=localizely.flutter-int

Multilingual support should be well known. But it's really annoying to keep implementing this functionality in the app. That's why the VSCode extension Flutter Intl exists. It creates a binding. Files and Flutter apps.

So: I can recommend this extension to everyone who wants to easily implement multilingual in his application.

https://plugins.jetbrains.com/plugin/13666-flutter-intl

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

Flutter Riverpod Snippets [vscode extension]

https://marketplace.visualstudio.com/items?itemName=robert-brunhage.flutter-riverpod-snippet

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

You can easily download it here.

Goodbye and have a nice day!

---

© Cat Brother

• WeChat ducafecat
• Blogducafecat.tech
• github
• bilibili