Nylo home page
  1. Getting Started
  2. Directory Structure
Getting Started

Directory Structure


Introduction

Every Nylo project comes with a simple boilerplate for managing your files. It has this structure to streamline the development of your projects.

The directory structure was inspired by Laravel.


App Directories

The below app directories are listed inside the lib folder.

  • app This folder includes any files relating to models, controllers and networking.

    • controllers Include your controllers here for your Widget pages.
    • models Create your model classes here.
    • networking Add any API services here for managing APIs or fetching data from the internet.
    • events Add all your event classes here.
    • providers Add any provider classes here that need booting when your app runs.

  • config This folder contains configuration files such as your font, theme and localization settings.

    • design Manage the font, logo and loader with this file.
    • theme Set and configure the themes you want your flutter app to use.
    • localization Manage the localization, language and other things relating to locale in this file.
    • decoders Register modelDecoders and apiDecoders.
    • storage keys Contains your local storage keys.
    • events Register your events in the Map object.
    • providers Register your providers in the Map object.
    • validation_rules Register your custom validation rules.
    • toast_notification_styles Register your toast notification styles.

  • resources This folder includes any files that are key components for your user's UI experience like pages, widgets and themes.

    • pages Include your Widgets here that you will use as Page's in your project. E.g. home_page.dart.
    • themes By default, you'll find two themes here for light and dark mode, but you can add more.
    • widgets Any widgets you need to create can be inserted here, like a date_picker.dart file.

  • routes This folder includes any files relating to routing.

    • router.dart You can add your page routes in this file.


Public assets

Public assets can be found in the public/assets. This directory is used for images, fonts and more files that you may want to include in your project.

  • app_icon This is used for generating app_icons for the project.
  • images Include any images here in this directory.
  • fonts Add any custom fonts here.
  • postman
    • collections Add your postman collections here.
    • environments Add your postman environments here.


Retrieving an image asset

You can use the normal, standard way in Flutter by running the following:

Image.asset(
  Image.asset('public/assets/images/my_logo.png'),
  height: 50,
  width: 50,
),

Or you can use getImageAsset(String key) helper

Image.asset(
  getImageAsset("my_logo.png"),
  height: 50,
  width: 50,
),

Lastly, with the localAsset extension helper

Image.asset(
    "my_logo.png",
    height: 50,
    width: 50,
).localAsset(),

In this example, our public/assets/images/ directory has one file nylo_logo.png.

  • public/assets/images/nylo_logo.png


Retrieving a public asset

You can get any public asset using getPublicAsset(String key)

VideoPlayerController.asset(
    getPublicAsset('videos/intro.mp4')
);

In this example, our public/assets/videos/ directory has one file intro.mp4.

  • public/assets/images/intro.mp4