Site icon Xtra News Page

Flutter’s First Micro-framework | Nylo 

Benjamin Sapaning

I recently released v1.1.0 for Nylo, a micro-framework for Flutter developers.

I started Nylo (back in August 2020) with a goal to make developing Flutter apps easier from scratch. What’s unique about Nylo is it’s still the Flutter you love just supercharged to make your dev life easier.

Getting started with Nylo

You can download via:

Building the project

When you run the build on the project for the first time, you’ll be greeted with the default app screen below.

Nylo’s default landing page

Let’s dive into some code

We’ll cover the following areas:

Router

File — /routers/router.dart

buildRouter() => nyCreateRoutes((router) {

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

      // Add your routes here

      // router.route("/new-page", (context) => NewPage());

    });

All your routes for the project can be added here.

The route method requires two mandatory parameters.

  1. routeName — is this the name for the route e.g. “/profile-page”
  2. The widget you want to show. You can see in the example above the “/new-page” route uses the NewPage() widget.

You can also add transitions like the below example.

router.route("/about-page", (context) => AboutPage(
          title: "Hello World",
        ), transition: PageTransitionType.fade
);

Widgets

Location for widgets:

By default, there are two folders. One for your ‘pages’ and the other for your widget ‘components’ e.g. stateless/stateful widgets.

Your ‘pages’ will can be normal Flutter widgets or extend the NyStatefulWidgetfor extra superpowers. Let’s take a look at what that looks like below.

...
import 'package:flutter_app/resources/widgets/safearea_widget.dart';
import 'package:nylo_support/widgets/ny_state.dart';
import 'package:nylo_support/widgets/ny_stateful_widget.dart';

class MyHomePage extends NyStatefulWidget {
  final HomeController controller = HomeController();

  MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends NyState<MyHomePage> {
  
  @override
  widgetDidLoad() async {
   // runs after initState()  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Hello World"),
        centerTitle: true,
      ),
      body: Container(
        child: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                getEnv("APP_NAME"),
                style: Theme.of(context).textTheme.headline2,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Looks familiar right?

The NyStatefulWidget class provides functionality to pass data from one ‘Page’ to another. It also welcomes the use of ‘Controllers’. You can read more about this stateful widget here.

Config

File — /.env

Nylo comes with a .env file that provides all the environment variables for the project. You can add and customize the values and then use them throughout the project like the below example.

APP_NAME="Nylo"
APP_DEBUG=true
APP_URL="https://nylo.dev"
...

Using the APP_NAME inside a widget

Text(
  getEnv("APP_NAME"),
  style: Theme.of(context).textTheme.headline2,
),

It also returns the bool type for variables too.

Metro CLI tool

I’ve also built a CLI tool for creating things in your project, here are some of the things you can create:

Let’s take a look at how you can use the Metro CLI tool.

Create a new page

metro make:page about_page -c

This will create an ‘about’ page in your project located /resources/pages/

Create a model

metro make:model Product

This will create a model for a ‘Product’ in your project located app/models/

Build your app icons

metro appicons:build

This will build all your app icons, Nylo uses the Flutter Launcher Icons package and will create the icons from the icon in your /public/app_icon/ directory.

Learn more about the Metro CLI here.

Folder Structure

Nylo introduces a simplified folder structure to provide you with a streamlined approach when building apps. It’s inspired by Laravel which (in my opinion) makes dev life a breeze when navigating around the source files.

You can read more about the folder structure here.

Wrapping up

If you’ve made it here, I invite you to try Nylo and send your feedback my way. It’s not perfect but I think it’s a step in the right direction to help to build mobile apps easier.

Article Credit: Anthony Gordon & Benjamin Sapaning

Exit mobile version