Pub GitHub stars Telegram

Actions Status Actions Status Actions Status Actions Status Actions Status

Acesse a documentação em Português-Brasil

Slidy

CLI package manager and template generator for Flutter. Generate Modules, Pages, Widgets, BLoCs, Controllers and tests.

Slidy supports rxBLoC, flutter_bloc and mobx.

Why should I use?

Slidy's goal is to help you structure your project in a standardized way. Organizing your app in Modules formed by pages, repositories, widgets, BloCs, and also create unit tests automatically. The Module gives you a easier way to inject dependencies and blocs, including automatic dispose. Also helps you installing the dependencies and packages, updating and removing them. The best is that you can do all of this running a single command.

Motivations

We realized that the project pattern absence is affecting the productivity of most developers, so we're proposing a development pattern along with a tool that imitates NPM (NodeJS) functionality as well as template generation capabilities (similar to Scaffold ).

About the Proposed Pattern

The structure that slidy offers you, it's similar to MVC, where a page keeps it's own business logic classes(BloC).

We recommend you to use flutter_modular when structuring with slidy. It offers you the module structure(extending the WidgetModule) and dependency/bloc injection, or you will probably get an error.

To understand flutter_modular, take a look at the README.

We also use the Repository Pattern, so the folder structure it's organized in local modules and a global module. The dependencies(repositories, BloCs, models, etc) can be accessed throughout the application.

Sample folder structure generated by slidy:

Folder example

Installation

  1. First of all you need install the Dart:

    https://dart.dev/get-dart

  2. Activate the slidy using the pub:

 pub global activate slidy
  1. Type slidy --version to make sure everything is working properly. This command should return the installed version.

Commands:

upgrade:

Updates slidy's version:

slidy upgrade

create:

Create a new project with same structure describe in start command.

slidy create **myproject**

start:

Create the basic structure of your project existing (make sure that your "lib" folder it's empty).

slidy start

Then choose your provider:

Folder example

Then choose your State Manager:

Mobx

Folder example

And you will get this Structure:

Folder example

Flutter Bloc:

Folder example

And you will get this Structure:

Folder example

Bloc With RxDart

Folder example

And you will get this Structure:

Folder example

If you have the flutter_bloc or flutter_mobx package in pubspec, the generation of pages, widgets, and bloc defaults to the installed manager default.

Options

The command allows to specify provider and state manager using the following options:

  • Provider:
-p <provider_name>

Options:
flutter_modular / bloc_pattern

Example:
slidy start -p flutter_modular
  • State manager:
-s <state_manager_name>

Options:
mobx / flutter_bloc / rxdart
Example:
slidy start -s mobx
  • Provider and state manager:
slidy start -p flutter_modular -s mobx

This command asks for permission to erase lib folder. If you don't want to see the warning, type the -f (force) flag:

slidy start -p flutter_modular -s mobx -f

run:

Runs the scripts in pubspec.yaml:

slidy run open_folder

Folder example

You can add var session to customize scripts

vars:
  runner: flutter pub run build_runner
  clean: flutter clean
  get: flutter pub get
scripts: 
    mobx_build: $clean & $get & $runner build --delete-conflicting-outputs
    mobx_watch: $clean & $get & $runner watch --delete-conflicting-outputs
slidy run mobx_build

install:

Installs or update the packages in dependencies:

Folder example

slidy install rxdart dio bloc_pattern

or you can just use the i command (both are the same)

slidy i rxdart dio bloc_pattern

Install packages as dev_dependency:

slidy i mockito --dev

Folder example

uninstall:

Removes a package

slidy uninstall dio

You can also remove a dev_dependency using the flag --dev

update:

Update package's version: You can update just once package

slidy update mobx

Or you can update all packages using the flag --all or -a

slidy update -a

You can also update a dev_dependency or all using the flag --dev

generate:

Creates a module, page, widget or repository including its BloC class.

NOTE: You can replace "g" with "generate" command.

Creates a new module:

slidy g module folder_name

or

slidy g m folder_name

Folder example

NOTE: You can create a "Complete Module" with Module, Page, Bloc/Controller, tests for Page and for Bloc/Controller using the flag -c

NOTE² : You can create a "Repository" with your Module using the flag -r

slidy g m modules/my_module -c -r

NOTE³ : You can create a "Interface" for your repository with your Module using the flag -i

slidy g m modules/my_module -c -r -i

Creates a new page + BloC:

slidy g page folder_name/pages

or

slidy g p folder_name/pages

Creates a new widget + BloC:

slidy g widget folder_name/widgets

or

slidy g w folder_name/widgets

NOTE: You can create a page or widget using its respective BLoC using the flag -b

Create a new repository

slidy g r folder_name/repositories

You can also use "repository" in "r"'s place, but it will have the same function.

Folder example

NOTE : You can create a "Interface" for your repository using the flag -i

slidy g m modules/my_module -c -r -i

Create a new service

slidy g s folder_name/services

NOTE : You can create a "Interface" for your service using the flag -i

slidy g m modules/my_module -c -s -i

Create a new model

slidy g mm folder_name/model

NOTE : if you are using JsonSerializable (and 'json_annotation' is in Dependecy and 'json_serializable' is in dev_dependencies) this command will create using anotation

Unit Tests:

Generate unit tests on the test folder for you.

slidy test folder_name/

Localization Automation

Use slidy localization command to help in use with localization package.

This command get all .i18n() in code and trailing comments. If this key already exists, updates value in all localization files, else, inserts this key and your value in end of all localization files.

In all cases, the comment is removed to mantain clean the code.

The localization directory is defined in root of pubspec.yaml, like this:

localization_dir: assets\language

NOTE : Is recommended create this definition in file's end.

Example

Before command

pt_BR.json

{
  "login-label": "Usuário"
}

login_page.dart

import 'package:flutter/material.dart';
import 'package:localization/localization.dart';

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Login")),
      body: Column(
        children: [
          TextField(decoration: InputDecoration(labelText: "user-label".i18n())),
          TextField(decoration: InputDecoration(labelText: "password-label".i18n())), //Senha
        ],
      ),
    );
  }
}
After command

pt_BR.json

{
  "login-label": "Usuário",
  "password-label": "Senha"
}

login_page.dart

import 'package:flutter/material.dart';
import 'package:localization/localization.dart';

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Login")),
      body: Column(
        children: [
          TextField(decoration: InputDecoration(labelText: "user-label".i18n())),
          TextField(decoration: InputDecoration(labelText: "password-label".i18n())),
        ],
      ),
    );
  }
}

Common errors:

I cant update:

1 - First of all you need uninstall the Slidy on Flutter

flutter pub global deactivate slidy

2 - After you need uninstall the Slidy on Dart

pub global deactivate slidy

2 - And now install only in Dart

pub global activate slidy

3 - If you don't have the Pub you will need to install Dart:

https://dart.dev/get-dart

Windows:

Folder example

If you got this error when trying to run the pub global activate slidy, then you will have to set the environment variables manually:

  • In windows search, write: Edit System Variables

    Folder example

  • Then click at Environment Variables

    Folder example

  • Go to Path

    Folder example

  • Then click in New and add the path that appeared on your console.

    Folder example

If you have any doubt about setting up the system variables, watch this video.

For more details join our Telegram Group Flutterando

Libraries

slidy