I recently released V1.1.0 for Nylo, a microframework for Flutter developers.

I founded Nylo (back in August 2020) with the goal of making it easier to develop Flutter applications from scratch. Nylo is unique in that it is still your favorite Flutter, just to make your development life easier.

1. Start using Nylo

You can download it in the following ways:

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

1.1 Building a Project

When you first run the build on your project, you will see the default application interface below.

Nylo’s default landing page

Let’s take a closer look at some code

We will cover the following:

  • Router
  • Widgets
  • Config
  • Metro Cli tool
  • Folder Structure

2. Router

File – / routers/router. The dart

buildRouter() => nyCreateRoutes((router) {
  router.route("/", (context) => MyHomePage(
    title: "Hello World"));// Add your route here
  // router.route("/new-page", (context) => NewPage());
});
Copy the code

All routes for the project can be added here.

The route method requires two mandatory parameters.

  1. routeName– This is the route name, for example, /profile-page.
  2. The Widgets you want to display. You can see the “/new-page” routing used in the example aboveNewPage()Widgets.

You can also add transitions as in the example below.

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

3. Widgets

Location of Widgets:

  • /resources/pages/
  • /resources/widgets/

By default, there are two folders. One for your “page” and one for your Widgets “components,” such as stateless/stateful Widgets.

Your “pages” can be normal Flutter Widgets, or you can extend the NyStatefulWidget to gain additional superpowers. Let’s see what it 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, ), ], ), ), ), ); }}Copy the code

Look familiar?

The NyStatefulWidget class provides the ability to pass data from one “page” to another.

4. The Config configuration

File – / env

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

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

Use APP_NAME in widget

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

It also returns a bool of the variable.

5. Metro CLI Tool CLI tool

I’ve also built a CLI tool to create content in your project. Here are some of the things you can create:

  • Models
  • Controllers
  • Pages
  • Stateful widgets and stateless widgets
  • Building your app icons

Let’s look at how to use the Metro CLI tool.

Create a new page

metro make:page about_page -c
Copy the code

Create a model

metro make:model Product
Copy the code

This will create the model for “Product” in the project located in app/ Models /

To build the APP ICON

metro appicons:build
Copy the code

This will create all your application Icons. Nylo uses the Flutter Launcher package and will create Icons from the Icons in your /public/app_icon/ directory.

Learn more about the Metro CLI here.

6. Folder Structure File directory Structure

Nylo introduces a simplified folder structure that gives you a simplified way to build applications. It was inspired by Laravel and (in my opinion) made development life a breeze while browsing source files.

You can read more about folder structures here.

7. Wrapping up

If you’re already here, I invite you to try Nylo and send me your feedback. It’s not perfect, but I think it’s a step in the right direction to make it easier to build mobile applications.

If you’d like to contribute to the open source project, please go to github.com/nylo-core/n…

Translated from medium.com/@agordn52 by Anthony Gordon