10 Flutter Advice Tips — Part 10/10 - flutter技巧

10 Flutter Advice Tips — Part 10/10

This is a special section because we're not only looking at packages or other things, but also VSCode extensions, GitHub repositories (and of course some packages). So, exactly the same as the first part (and we're a little nostalgic again xD).

So, let's get started!

original

https://tomicriedel.medium.com/10-flutter-tips-part-10-10-21406461c7dc

Awesome Flutter Snippets

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

This extension provides you with a lot of very useful Flutter snippets here. There are 40 snippets with functions like initState or dispose, but also widgets like Listview.builder (listViewB), GridView.count (gridViewC), or AnimatedBuilder (animatedBldr).

To see the full list, you can read the overview of this extension.

Fast Dart

https://marketplace.visualstudio.com/items?itemName=YashPaneliya.fast-dart

Well, Flutter snippets are pretty cool, but since we're actually programming the whole Dart, we need Dart snippets too. For this, there is a fairly unknown extension to Fast Dart. You can find 20 code snippets there, including tc (try-catch block) ie (If-Else) or just cls (Class).

Flutter Color

https://marketplace.visualstudio.com/items?itemName=circlecodesolution.ccs-flutter-color

This extension is very useful, I use it several times a day. It detects the color code you enter in the code and displays what that color looks like to the left of the code. But that's not all. If you then click the box, you'll get a color picker that you can use to select a color, which is then automatically written into the code.

Flutter Tips and Tricks

https://github.com/vandadnp/flutter-tips-and-tricks )

This repository collects hundreds of Flutter tips with explanations. You'll learn a lot of new gadgets, or you'll learn how to check if a website is up or down.

Flutter Course Resources

https://github.com/londonappbrewery/Flutter-Course-Resources

Another repository on GitHub will teach you all the important things you need to learn in Flutter. You'll build a lot of applications there, learn about StateManagement, and more.

Highly recommended, I will definitely use this library to continue learning things myself.

paddinger

https://pub.dev/packages/paddinger

Everyone knows. This widget needs to be populated, as well as this and this. It goes on like this and the code doesn't look pretty. But what if you have a package where you define your code only once and then wrap your child with a widget without writing edgesets.all (8.0) every time?

Well, it exists and it's called a paddinger. It's a bit complicated to set up, but if you look at the documentation, it's as simple as any other package.

instead of writing:

 Padding(
  padding: const EdgeInsets.all(PADDING_NORMAL),
  child: Text(
    'MyText',
  ),
),

You can write:

 NormalAllPadding(
  child: Text(
    'MyText',
  ),
)

Flutter Auto Form

https://pub.dev/packages/flutter_auto_form

To be honest, Flutter's normal form system is very complex. You have to write a lot of boilerplate code, which for me is always a task I like to defer. However, things have changed since I started using flutter auto forms. This pack is a super easy to use form system with no controllers or anything. Best of all, it lets you automatically jump to the next field without having to call that field specifically.

 import 'package:flutter_auto_form/flutter_auto_form.dart';

class LoginForm extends TemplateForm {
  @override
  final List<Field> fields = [
    AFTextField(
      id: 'identifier',
      name: 'identifier',
      validators: [
        MinimumStringLengthValidator(
          5,
              (e) => 'Min 5 characters, currently ${e?.length ?? 0} ',
        )
      ],
      type: AFTextFieldType.USERNAME,
    ),
    AFTextField(
      id: 'password',
      name: 'password',
      validators: [
        MinimumStringLengthValidator(
          6,
              (e) => 'Min 6 characters, currently ${e?.length ?? 0} ',
        )
      ],
      type: AFTextFieldType.PASSWORD,
    ),
  ];
}

Now you can use the whole thing in your widget tree like this:

 AFWidget<LoginForm>(
  formBuilder: () => LoginForm(),
  submitButton: (Function({bool showLoadingDialog}) submit) => Padding(
    padding: const EdgeInsets.only(top: 32),
    child: MaterialButton(
      child: Text('Submit'),
      onPressed: () => submit(showLoadingDialog: true),
    ),
  ),
  onSubmitted: (LoginForm form) {
    // do whatever you want when the form is submitted
    print(form.toMap());
  },
);

It now looks like this:

Simple Animations

https://pub.dev/packages/simple_animations

Animations are something that a lot of people hate to implement because they are so complicated to create. But luckily, there is a simple animation, a package that gives you a great selection of animations that are very easy to implement, and you can even create your own animations. You only need to know the package once and you can create the best animation possible.

This is a very simple example, but you can create more using packages:

Supabase

Now, this advice is a very personal one, so one person might like it and another might not. But I personally like it.

Supabase is an OpenSource alternative to Firebase that you can use for database, SQL, authentication, and more. For authentication, it offers even more external OAuth providers than Firebase.

The other downside is that it doesn't have anything like analytics or functions, but you can run supadase with Docker on your own server, for example, supadase doesn't allow to delete your project for no reason.

I personally use it in a lot of small apps, but in apps where I also need functions, I unfortunately have to resort to the more complex provider Firebase (complex I mean Supabase is easier in Flutter code) accomplish).

Flutter toast

The last tip in this series is about toasts.

http://pub.dev/packages/fluttertoast

Well, that's just a joke of course. Fluttertoast is a toast library that supports two kinds of toast messages. One requires a BuildContext, the other doesn't.

Let's look at an example that doesn't require a BuildContext:

 Fluttertoast.showToast(
  msg: "This is Center Short Toast",
  toastLength: Toast.LENGTH_SHORT,
  gravity: ToastGravity.CENTER,
  timeInSecForIosWeb: 1,
  backgroundColor: Colors.red,
  textColor: Colors.white,
  fontSize: 16.0
);

Now this is a very simple example, you can also create custom toasts that look like this:

Thanks for reading!

10 Flutter Advice Tips — Part 10/10