Nylo v4.x — What’s New? | Take a Dive into the Latest Release | Flutter Micro-framework

Nylo v4.x is finally out! Everything just got better… See what’s new with the micro-framework.

Nylo — Flutter Micro-framework 4.x

It’s a new chapter for Nylo! Since the initial release, the micro-framework has continued to grow and help more developers build Flutter apps.

With the new release of 4.x, there are some really helpful new features to make things even better.

In this Medium story, I’ll cover some of the highlights. If you’re also new to Nylo, feel free to give it a try. It’s free to download via the following links.

Downloading Nylo

• Website — https://nylo.dev
• GitHub — git clone https://github.com/nylo-core/nylo.git

What’s changed?

Nylo 4.x projects will feel familiar, the major areas that have been worked on are below.

• Metro Cli — Automating more commands
• Postman — Ability to Import Collections into API Services
• Packages — New Slate template builder
• NyState — New helper methods for managing the state
• Boilerplate — Optimizing the themes class and more

Let’s Talk Features

1. Ability to import Postman collections

You can now create API services from your Postman collections automatically. Export your collection into JSON (using v2.1) and then add the file to your /public/assets/postman directory.

Use the below command to then create your API Services inside your app.

metro make:api_service my_collection_name --postman=the_postman_json_file

Running the above will attempt to convert your Postman collections into API Services. If you want to see this in action, try using the JsonPlaceHolder collection. Export the collection and follow the above steps.

You can learn more about this feature here.

2. Metro will automatically add pages to your router

Now, when you create a page using the make:page command, Metro will automatically add the Page to your /routes/router.dart file.

After running the below command.

flutter pub run nylo_framework:main make:page login_page

It will add the new page to your /routes/router.dart file automatically.

appRouter() => nyRoutes((router) {
  router.route("/", (context) => MyHomePage(title: "Hello World"));

  router.route("/login", (context) => LoginPage()); // new route
});

3. New NyState method called 'boot'

The new boot method allows you to call Futures and update the UI only when all the tasks have been completed.

It works using the afterLoad helper in your UI, check out the example below.

class _HomePageState extends NyState<HomePage> {

  @override
  init() async {
    super.init();
  }

  @override
  boot() async {
    await Future.delayed(Duration(seconds: 3), () {
      print('Wait 3 seconds to complete something...');
    });
  }

  @override
  Widget build(BuildContext context) {
      return Scaffold(
          body: Center(
              child: afterLoad(child: () {
                return Text("The page loaded");
              })
          )
      );
  }

What’s great about the afterLoad method is that it will display a loader of your choice on the UI so users will get feedback.

You can learn more about the boot method here.

4. New NyState helper called 'lockRelease’

The lockRelease helper is useful for calling a Future and preventing the user from triggering it again until it’s completed.

class _LoginPageState extends NyState<LoginPage> {

  _login() async {
    await lockRelease('login_to_app', perform: () async {
      
      await Future.delayed(Duration(seconds: 4), () {
        print('Pretend to login...');
      });

    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (isLocked('login_to_app'))
              AppLoader(),
            Center(
              child: InkWell(
                onTap: _login,
                child: Text("Login"),
              ),
            )
          ],
        )
    );
  }

On the UI you can use the isLocked helper like in the above example to check if the function is still handling the Future.

After the Future completes, it will unlock the Function’s state and allow the user to trigger the action again.

5. Introducing Slate templates

Slate’s are new in Nylo 4.x, it allows you to add pre-made templates from packages into your project automatically. If you have installed Nylo, try the new ny_auth_slate package.

First, install ny_auth_slate into your project.

flutter pub add ny_auth_slate

Then run, the below.

flutter pub run ny_auth_slate:main publish:all

This will automatically publish all the files from the package into your project.

Creating Slate packages

If you want to create your own Slate packages, get started with the public template here.

You can learn more about Slate’s here.

Apps built with Nylo

Some great apps that have been built:

• Pwer — Fitness app
• MatesBet — Betting app
• BaeLyf — E-commerce shopping app

YouTube Channel

We now have a YouTube channel. It contains some good videos for learning Nylo. The goal of this channel is to share knowledge and tips when building Flutter apps.

Wrapping Up

I hope this story has been insightful, I would recommend reading the docs if you want to understand all the quirks and features. The changelog for 4.x is here if you’re interested too.

If you’re new to Nylo, feel free to try it for your next new project. As always, thanks for reading. If you’ve got any feedback or questions, leave a comment.

Anthony Gordon (https://github.com/agordn52)