Flutter
Micro-framework
Untuk Aplikasi Modern

Fondasi yang kokoh untuk membangun aplikasi Flutter. Routing, manajemen state, networking, dan lainnya — semua dalam satu paket yang elegan.

Mulai

Jelajahi

Fitur

Semua yang Anda butuhkan untuk membangun

Nylo menyediakan semua alat yang Anda butuhkan untuk membuat aplikasi Flutter siap produksi dengan percaya diri.

Routing

Routing deklaratif yang sederhana dengan route guards, parameter, dan dukungan deep linking.

Manajemen State

Manajemen state reaktif bawaan dengan controller dan persistensi state yang mudah.

Networking

Kelas layanan API yang elegan dengan serialisasi model otomatis dan interceptor.

Formulir

Penanganan formulir yang kuat dengan validasi, casting, dan pengikatan data otomatis.

Autentikasi

Autentikasi yang aman dengan route guards, penyimpanan token, dan manajemen sesi.

Metro CLI

Buat halaman, model, controller, dan lainnya dengan perintah CLI yang kuat.

Jelajahi semua fitur

Metro CLI

Buat apa saja dari terminal

Metro adalah alat CLI Nylo yang membantu Anda membuat scaffold halaman, model, controller, widget, dan lainnya dengan satu perintah.

Pelajari lebih lanjut tentang 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());

Networking

Integrasi API yang mudah

Tulis layanan API yang bersih dan mudah dipelihara dengan parsing JSON otomatis, penanganan error, dan interceptor permintaan.

Pelajari lebih lanjut tentang Networking

Jelajahi

Alat yang kuat untuk membuat

Semua yang Anda butuhkan untuk membangun aplikasi Flutter berikutnya

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

Bangun rute kompleks, antarmuka, dan halaman UI untuk aplikasi Flutter Anda.

Pelajari lebih lanjut

Menambahkan Rute Menavigasi ke halaman Route Guards Deep linking

Langkah 1

Autentikasi pengguna

String userToken = "eyJhbG123...";

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

Langkah 2

Sekarang, ketika pengguna Anda membuka aplikasi, mereka akan terautentikasi.

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

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

Langkah 3

Jika Anda telah menetapkan authenticatedRoute di router Anda, maka halaman ini akan ditampilkan ketika pengguna membuka aplikasi lagi.

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

Logout pengguna

await Auth.logout();

Autentikasi pengguna di aplikasi Flutter Anda.

Pelajari lebih lanjut

Authenticated Route Authenticating Users Retrieving Auth Data Logout

Langkah 1

Buat Formulir

terminal

metro make:form RegisterForm

Langkah 2

Modifikasi formulir Anda

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

Langkah 3

Gunakan formulir Anda di widget

register_page.dart

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

Kelola, validasi, dan kirim data di satu tempat dengan Nylo Forms.

Pelajari lebih lanjut

Validasi Managing Data Field Styling Initial Data

Langkah 1

Buat widget yang dikelola state

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

Langkah 2

Use CartIcon.action("clear_cart")

another widget

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

Manajemen state yang kuat untuk widget di aplikasi Flutter Anda.

Pelajari lebih lanjut

Siklus Hidup Aksi State

Langkah 1

Buat event Anda

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

Langkah 2

Kirim event

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

Kirim event dan dengarkan di aplikasi Anda.

Pelajari lebih lanjut

Mengirim Event Mendengarkan Event

Jadwalkan tugas untuk dijalankan sekali

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

Jadwalkan tugas untuk dijalankan sekali setelah tanggal tertentu

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

Jadwalkan tugas untuk dijalankan sekali sehari

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

Jadwalkan tugas untuk dijalankan sekali atau harian di aplikasi Flutter Anda.

Pelajari lebih lanjut

Jadwalkan Sekali Setelah Tanggal Penjadwalan Sekali Sehari

Langkah 1

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

Langkah 2

Panggil API dari halaman Anda

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

Layanan API yang elegan dengan parsing JSON otomatis, caching, dan interceptor.

Pelajari lebih lanjut

Permintaan GET Interceptor Morphing JSON Caching

Langkah 1

Simpan data dengan aman

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

Langkah 2

Baca dengan konversi tipe

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

Penyimpanan lokal yang aman dengan konversi tipe, kedaluwarsa TTL, dan koleksi.

Pelajari lebih lanjut

Simpan Data Baca Data Koleksi Ransel

Langkah 1

Tambahkan file bahasa Anda

lang/en.json

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

Langkah 2

Terjemahkan teks di widget Anda

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

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

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

Dukungan multi-bahasa dengan file JSON, argumen, dan RTL.

Pelajari lebih lanjut

Terjemahan Argumen Pergantian Bahasa Dukungan RTL

Langkah 1

Buat Hub Navigasi

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

Langkah 2

Ganti tata letak dengan mudah

// Bottom navigation
NavigationHubLayout.bottomNav()

// Top navigation
NavigationHubLayout.topNav()

// Journey / wizard flow
NavigationHubLayout.journey()

Bangun navigasi bawah, navigasi atas, atau alur perjalanan dengan pemeliharaan state.

Pelajari lebih lanjut

Navigasi Bawah Navigasi Atas Alur Perjalanan Lencana

Dicintai oleh komunitas

Apa kata pengembang tentang Nylo Website

Bergabung dalam diskusi

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

Flutter Micro-framework Untuk Aplikasi Modern

Semua yang Anda butuhkan untuk membangun

Routing

Manajemen State

Networking

Formulir

Autentikasi

Metro CLI

Buat apa saja dari terminal

Integrasi API yang mudah

Alat yang kuat untuk membuat

Dicintai oleh komunitas

Flutter
Micro-framework
Untuk Aplikasi Modern