Le Flutter
Micro-framework
Pour les Apps Modernes

Une base solide pour construire des applications Flutter. Routage, gestion d'état, réseau, et plus encore — le tout dans un package élégant.

Commencer

Explorer

Fonctionnalités

Tout ce dont vous avez besoin pour construire

Nylo fournit tous les outils nécessaires pour créer des applications Flutter prêtes pour la production en toute confiance.

Routage

Routage simple et déclaratif avec des gardes de route, des paramètres et le support du deep linking.

Gestion d'État

Gestion d'état réactive intégrée avec des contrôleurs et une persistance d'état facile.

Réseau

Classes de services API élégantes avec sérialisation automatique des modèles et intercepteurs.

Formulaires

Gestion puissante des formulaires avec validation, casting et liaison de données automatique.

Authentification

Authentification sécurisée avec gardes de route, stockage de jetons et gestion de sessions.

Metro CLI

Générez des pages, modèles, contrôleurs et plus avec de puissantes commandes CLI.

Explorer toutes les fonctionnalités

Metro CLI

Créez n'importe quoi depuis le terminal

Metro est l'outil CLI de Nylo qui vous aide à créer des scaffolds de pages, modèles, contrôleurs, widgets et plus avec une seule commande.

En savoir plus sur Metro

metro make:page HomePage
# Creates a new page called HomePage

metro make:api_service User
# Creates a new API Service called UserApiService

metro make:model User
# Creates a new model called User

metro make:stateful_widget FavouriteWidget
# Creates a new stateful widget called FavouriteWidget

class ApiService extends NyApiService {
  @override
  String get baseUrl => "https://api.example.com/v1";

  Future<List<Post>> posts() async {
    return await network(
      request: (request) => request.get("/posts"),
    );
  }
}

// Usage in your page
final posts = await api<ApiService>((request) => request.posts());

Réseau

Intégration API sans effort

Écrivez des services API propres et maintenables avec parsing JSON automatique, gestion des erreurs et intercepteurs de requêtes.

En savoir plus sur le Réseau

Explorer

Outils puissants pour créer

Tout ce dont vous avez besoin pour construire votre prochaine application Flutter

routes/router.dart

appRouter() => nyRoutes((router) {
    router.add(HomePage.path).initialRoute();

    router.add(DiscoverPage.path);

    router.add(LoginPage.path, 
        transitionType: TransitionType.bottomToTop());

    router.add(ProfilePage.path,
        routeGuard: [
            AuthGuard()
        ]
    );
});

Créez des routes complexes, des interfaces et des pages UI pour votre application Flutter.

Ajout de routes Navigation vers les pages Gardes de route Liens profonds

Étape 1

Authentifier un utilisateur

String userToken = "eyJhbG123...";

await Auth.authenticate(data: {"token": userToken});

Étape 2

Maintenant, lorsque votre utilisateur ouvre l'application, il sera authentifié.

final userData = Auth.data();
// {"token": "eyJhbG123..."}

bool isAuthenticated = await Auth.isAuthenticated();
// true

Étape 3

Si vous avez défini une authenticatedRoute dans votre routeur, cette page sera présentée lorsque l'utilisateur ouvrira à nouveau l'application.

routes/router.dart

appRouter() => nyRoutes((router) {
    ...
    router.add(LandingPage.path).initialRoute();

    router.add(DashboardPage.path).authenticatedRoute();
    // overrides the initial route when a user is authenticated

Déconnecter l'utilisateur

await Auth.logout();

Authentifiez les utilisateurs dans votre application Flutter.

Authenticated Route Authenticating Users Retrieving Auth Data Déconnexion

Étape 1

Créer un formulaire

terminal

metro make:form RegisterForm

Étape 2

Modifier votre formulaire

app/forms/register_form.dart

class RegisterForm extends NyFormWidget {

    RegisterForm({super.key, super.submitButton, super.onSubmit, super.onFailure});

    // Add your fields here
    @override
    fields() => [
        Field.capitalizeWords("name",
            label: "Name",
            validator: FormValidator.notEmpty(),
        ),
        Field.email("email_address",
            label: "Email",
            validator: FormValidator.email()
        ),
        Field.password("password",
            label: "Password",
            validator: FormValidator.password(),
        ),
    ];

    static NyFormActions get actions => const NyFormActions("RegisterForm");
}

Étape 3

Utiliser votre formulaire dans un widget

register_page.dart

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: RegisterForm(
      submitButton: Button.primary(text: "Submit"),
      onSubmit: (data) {
        printInfo(data);
      },
    ),
  );
}

Gérez, validez et soumettez des données en un seul endroit avec Nylo Forms.

Validation Managing Data Field Styling Initial Data

Étape 1

Créer un widget géré par état

terminal

metro make:stateful_widget CartIcon

resources/cart_icon_widget.dart

class _CartIconState extends NyState<CartIcon> {
  ...

  @override
  Map<String, Function> get stateActions => {
    "clear_cart": () {
      _items = 0;
    },
    ...
  };

  @override
  Widget view(BuildContext context) {
    return Container(child: Text("Items in cart: ${_items}"));
  }
}

Étape 2

Use CartIcon.action("clear_cart")

another widget

Button.primary(text: "Add to cart",
    onPressed: () {
      CartIcon.action("clear_cart");
    }
)

Gestion d'état puissante pour les widgets dans votre application Flutter.

Cycle de vie Actions d'état

Étape 1

Créer votre événement

terminal

metro make:event Logout

app/events/logout_event.dart

class LogoutEvent implements NyEvent {
    @override
    final listeners = {
        DefaultListener: DefaultListener(),
    };
}

class DefaultListener extends NyListener {
    @override
    handle(dynamic event) async {

        // logout user
        await Auth.logout();

        // redirect to home page
        routeTo(HomePage.path,
            navigationType: NavigationType.pushAndForgetAll
        );
    }
}

Étape 2

Déclencher l'événement

MaterialButton(child: Text("Logout"),
    onPressed: () {
        event<LogoutEvent>();
    },
)

Déclenchez des événements et écoutez-les dans votre application.

Déclenchement d'événements Écoute d'événements

Planifier une tâche à exécuter une fois

Nylo.scheduleOnce("onboarding_info", () {
    print("Perform code here to run once");
});

Planifier une tâche à exécuter une fois après une date spécifique

Nylo.scheduleOnceAfterDate("app_review_rating", () {
    print("Perform code to run once after DateTime(2025, 04, 10)");
}, date: DateTime(2025, 04, 10));

Planifier une tâche quotidienne

Nylo.scheduleOnceDaily("free_daily_coins", () {
    print("Perform code to run once daily");
});

Planifiez des tâches à exécuter une fois ou quotidiennement dans votre application Flutter.

Planifier une fois après une date Planification quotidienne

Étape 1

Créer un service API

terminal

metro make:api_service User

app/networking/user_api_service.dart

class UserApiService extends NyApiService {
    @override
    String get baseUrl => getEnv("API_BASE_URL");

    Future<User?> fetchUser(int id) async {
        return await get<User>(
            "/users/$id",
            queryParameters: {"include": "profile"},
        );
    }

    Future<User?> createUser(Map<String, dynamic> data) async {
        return await post<User>("/users", data: data);
    }
}

Étape 2

Appeler l'API depuis votre page

User? user = await api<UserApiService>(
    (request) => request.fetchUser(1),
);

Des services API élégants avec parsing JSON automatique, mise en cache et intercepteurs.

Requêtes GET Intercepteurs Morphing JSON Mise en cache

Étape 1

Sauvegarder les données en toute sécurité

saving_data.dart

// Save values to secure storage
await NyStorage.save("coins", 100);
await NyStorage.save("username", "Anthony");
await NyStorage.save("isPremium", true);

// Save with TTL (auto-expires)
await NyStorage.save("session", "abc123",
    expiry: Duration(hours: 1),
);

Étape 2

Lire avec conversion de type

// Automatic type casting
String? username = await NyStorage.read("username");
int? coins = await NyStorage.read<int>("coins");
bool? isPremium = await NyStorage.read<bool>("isPremium");

// Delete a value
await NyStorage.delete("coins");

Stockage local sécurisé avec conversion de type, expiration TTL et collections.

Sauvegarder les données Lire les données Collections Sac à dos

Étape 1

Ajoutez vos fichiers de langue

lang/en.json

{
    "welcome": "Welcome",
    "greeting": "Hello {{name}}",
    "navigation": {
        "home": "Home",
        "profile": "Profile"
    }
}

Étape 2

Traduisez le texte dans vos widgets

// Simple translation
Text("welcome".tr())  // "Welcome"

// With arguments
Text("greeting".tr(arguments: {"name": "Anthony"}))
// "Hello Anthony"

// Nested keys
Text("navigation.home".tr())  // "Home"

Support multilingue avec fichiers JSON, arguments et RTL.

Traductions Arguments Changement de langue Support RTL

Étape 1

Créer un hub de navigation

terminal

metro make:navigation_hub base

resources/pages/base_navigation_hub.dart

class _BaseNavigationHubState extends NavigationHub<BaseNavigationHub> {

    NavigationHubLayout? layout = NavigationHubLayout.bottomNav();

    @override
    bool get maintainState => true;

    _BaseNavigationHubState() : super(() async {
        return {
            0: NavigationTab(
                title: "Home",
                page: HomeTab(),
                icon: Icon(Icons.home),
            ),
            1: NavigationTab(
                title: "Settings",
                page: SettingsTab(),
                icon: Icon(Icons.settings),
            ),
        };
    });
}

Étape 2

Changer de mise en page facilement

// Bottom navigation
NavigationHubLayout.bottomNav()

// Top navigation
NavigationHubLayout.topNav()

// Journey / wizard flow
NavigationHubLayout.journey()

Créez des navigations en bas, en haut ou des flux de parcours avec maintien de l'état.

Navigation en bas Navigation en haut Flux de parcours Badges

Aimé par la communauté

Ce que disent les développeurs sur Nylo Website

Rejoindre la discussion

I'm new to Dart and new to your framework (which I love)

Peter Senior Director of Heroku Global

I wanted to thank you guys for the great job you are doing.

@youssefKadaouiAbbassi

Just to say that I am in love with @nylo_dev's website!! Definitely gonna explore it!

@esfoliante_txt

Really love the concept of this framework

@Chrisvidal

Nylo is the best framework for flutter, which makes developing easy

@higakijin

This is incredible. Very well done!

FireflyDaniel

Very nice Framework! Thank you so much!

@ChaoChao2509

I just discovered this framework and I'm very impressed. Thank you

@lepresk

Great work on Nylo

@dylandamsma

This is by far the best framework out there. Amazing quality and features. Thanks so much.

@2kulfi

It's interesting and very amazing. It makes the work more easier and less time consuming. Great work. Thank you

darkreader01

Salut. Je viens juste de découvrir votre outils et je le trouve vraiment super. Une belle découverte pour moi 👌🤌

ojean-01

Le Flutter Micro-framework Pour les Apps Modernes

Tout ce dont vous avez besoin pour construire

Routage

Gestion d'État

Réseau

Formulaires

Authentification

Metro CLI

Créez n'importe quoi depuis le terminal

Intégration API sans effort

Outils puissants pour créer

Aimé par la communauté

Le Flutter
Micro-framework
Pour les Apps Modernes