10 Flutter tips - season 2 - part 3/10

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:

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".

This is what your app would look like in Light Theme (without the special widgets of course)

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:

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.

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.

import 'package:flutter/material.dart';
import 'package:flutter_text_field_fab/flutter_text_field_fab.dart';

class SomeListView extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            floatingActionButton: TextFieldFloatingActionButton(
                'Search...',
                Icons.gamepad,
                onChange: (String query) => filterList(query),
                onClear: () => clearList(),
            ),
            body: ...);
    }
}

Flutter Login

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

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

Oh, and the implementation is also very simple:

return FlutterLogin(
      title: 'ECORP',
      logo: AssetImage('assets/images/ecorp-lightblue.png'),
      onLogin: _authUser,
      onSignup: _signupUser,
      onSubmitAnimationCompleted: () {
        Navigator.of(context).pushReplacement(MaterialPageRoute(
          builder: (context) => DashboardScreen(),
        ));
      },
      onRecoverPassword: _recoverPassword,
    );

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!