Das Flutter
Micro-Framework
Für moderne Apps

Eine solide Grundlage für den Aufbau von Flutter-Apps. Routing, Zustandsverwaltung, Netzwerk und mehr — alles in einem eleganten Paket.

Loslegen

Erkunden

Funktionen

Alles, was Sie zum Bauen brauchen

Nylo bietet alle Werkzeuge, die Sie benötigen, um produktionsreife Flutter-Anwendungen mit Vertrauen zu erstellen.

Routing

Einfaches, deklaratives Routing mit Route Guards, Parametern und Deep-Linking-Unterstützung.

Zustandsverwaltung

Eingebaute reaktive Zustandsverwaltung mit Controllern und einfacher Zustandspersistenz.

Netzwerk

Elegante API-Serviceklassen mit automatischer Modellserialisierung und Interceptoren.

Formulare

Leistungsstarke Formularverarbeitung mit Validierung, Casting und automatischer Datenbindung.

Authentifizierung

Sichere Authentifizierung mit Route Guards, Token-Speicherung und Sitzungsverwaltung.

Metro CLI

Generieren Sie Seiten, Modelle, Controller und mehr mit leistungsstarken CLI-Befehlen.

Alle Funktionen erkunden

Metro CLI

Erstellen Sie alles vom Terminal aus

Metro ist Nylos CLI-Tool, das Ihnen hilft, Seiten, Modelle, Controller, Widgets und mehr mit einem einzigen Befehl zu erstellen.

Mehr über Metro erfahren

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());

Netzwerk

Mühelose API-Integration

Schreiben Sie saubere, wartbare API-Dienste mit automatischem JSON-Parsing, Fehlerbehandlung und Request-Interceptoren.

Mehr über Netzwerk erfahren

Erkunden

Leistungsstarke Werkzeuge zum Erstellen

Alles, was Sie brauchen, um Ihre nächste Flutter-App zu erstellen

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()
        ]
    );
});

Erstellen Sie komplexe Routen, Schnittstellen und UI-Seiten für Ihre Flutter-Anwendung.

Mehr erfahren

Routen hinzufügen Zu Seiten navigieren Route Guards Deep Linking

Schritt 1

Benutzer authentifizieren

String userToken = "eyJhbG123...";

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

Schritt 2

Jetzt wird Ihr Benutzer authentifiziert, wenn er die App öffnet.

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

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

Schritt 3

Wenn Sie eine authenticatedRoute in Ihrem Router festgelegt haben, wird diese Seite angezeigt, wenn der Benutzer die App erneut öffnet.

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

Benutzer abmelden

await Auth.logout();

Authentifizieren Sie Benutzer in Ihrer Flutter-Anwendung.

Mehr erfahren

Authenticated Route Authenticating Users Retrieving Auth Data Abmelden

Schritt 1

Formular erstellen

terminal

metro make:form RegisterForm

Schritt 2

Formular anpassen

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");
}

Schritt 3

Formular in einem Widget verwenden

register_page.dart

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

Verwalten, validieren und senden Sie Daten an einem Ort mit Nylo Forms.

Mehr erfahren

Validierung Managing Data Field Styling Initial Data

Schritt 1

State-Managed-Widget erstellen

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}"));
  }
}

Schritt 2

Use CartIcon.action("clear_cart")

another widget

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

Leistungsstarkes State-Management für Widgets in Ihrer Flutter-Anwendung.

Mehr erfahren

Lebenszyklus State-Aktionen

Schritt 1

Event erstellen

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
        );
    }
}

Schritt 2

Event auslösen

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

Lösen Sie Events aus und hören Sie auf diese in Ihrer Anwendung.

Mehr erfahren

Events auslösen Auf Events hören

Aufgabe einmalig planen

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

Aufgabe einmalig nach einem bestimmten Datum planen

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

Aufgabe täglich einmalig planen

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

Planen Sie Aufgaben einmalig oder täglich in Ihrer Flutter-Anwendung.

Mehr erfahren

Einmalig nach Datum planen Täglich einmalig planen

Schritt 1

API-Service erstellen

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);
    }
}

Schritt 2

API von Ihrer Seite aus aufrufen

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

Elegante API-Dienste mit automatischem JSON-Parsing, Caching und Interceptoren.

Mehr erfahren

GET-Anfragen Interceptoren Morphing JSON Caching

Schritt 1

Daten sicher speichern

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),
);

Schritt 2

Lesen mit Typkonvertierung

// 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");

Sicherer lokaler Speicher mit Typkonvertierung, TTL-Ablauf und Sammlungen.

Mehr erfahren

Daten speichern Daten lesen Sammlungen Rucksack

Schritt 1

Fügen Sie Ihre Sprachdateien hinzu

lang/en.json

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

Schritt 2

Übersetzen Sie Text in Ihren Widgets

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

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

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

Mehrsprachige Unterstützung mit JSON-Dateien, Argumenten und RTL.

Mehr erfahren

Übersetzungen Argumente Sprachwechsel RTL-Unterstützung

Schritt 1

Navigations-Hub erstellen

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),
            ),
        };
    });
}

Schritt 2

Layouts einfach wechseln

// Bottom navigation
NavigationHubLayout.bottomNav()

// Top navigation
NavigationHubLayout.topNav()

// Journey / wizard flow
NavigationHubLayout.journey()

Erstellen Sie untere Navigation, obere Navigation oder Journey-Flows mit Zustandserhaltung.

Mehr erfahren

Untere Navigation Obere Navigation Journey-Flow Badges

Von der Community geliebt

Was Entwickler sagen über Nylo Website

An der Diskussion teilnehmen

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

Das Flutter Micro-Framework Für moderne Apps

Alles, was Sie zum Bauen brauchen

Routing

Zustandsverwaltung

Netzwerk

Formulare

Authentifizierung

Metro CLI

Erstellen Sie alles vom Terminal aus

Mühelose API-Integration

Leistungsstarke Werkzeuge zum Erstellen

Von der Community geliebt

Das Flutter
Micro-Framework
Für moderne Apps