Flutter
Micro-framework
Cho ứng dụng hiện đại

Nền tảng vững chắc để xây dựng ứng dụng Flutter. Định tuyến, quản lý trạng thái, kết nối mạng và nhiều hơn nữa — tất cả trong một gói tinh gọn.

Bắt đầu

Khám phá

Tính năng

Mọi thứ bạn cần để xây dựng

Nylo cung cấp tất cả công cụ bạn cần để tạo ứng dụng Flutter sẵn sàng triển khai một cách tự tin.

Định tuyến

Định tuyến đơn giản, khai báo với bảo vệ tuyến đường, tham số và hỗ trợ deep linking.

Quản lý trạng thái

Quản lý trạng thái phản ứng tích hợp sẵn với các controller và lưu trữ trạng thái dễ dàng.

Kết nối mạng

Các lớp dịch vụ API tinh gọn với tuần tự hóa model tự động và interceptor.

Biểu mẫu

Xử lý biểu mẫu mạnh mẽ với xác thực, ép kiểu và liên kết dữ liệu tự động.

Xác thực

Xác thực an toàn với bảo vệ tuyến đường, lưu trữ token và quản lý phiên.

Metro CLI

Tạo trang, model, controller và nhiều hơn nữa với các lệnh CLI mạnh mẽ.

Khám phá tất cả tính năng

Metro CLI

Tạo mọi thứ từ terminal

Metro là công cụ CLI của Nylo giúp bạn tạo khung trang, model, controller, widget và nhiều hơn nữa chỉ với một lệnh duy nhất.

Tìm hiểu thêm về 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());

Kết nối mạng

Tích hợp API dễ dàng

Viết các dịch vụ API sạch, dễ bảo trì với phân tích JSON tự động, xử lý lỗi và interceptor yêu cầu.

Tìm hiểu thêm về Kết nối mạng

Khám phá

Công cụ mạnh mẽ để sáng tạo

Mọi thứ bạn cần để xây dựng ứng dụng Flutter tiếp theo

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

Xây dựng các tuyến đường phức tạp, giao diện và trang UI cho ứng dụng Flutter của bạn.

Tìm hiểu thêm

Thêm tuyến đường Điều hướng đến trang Bảo vệ tuyến đường Deep linking

Bước 1

Xác thực người dùng

String userToken = "eyJhbG123...";

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

Bước 2

Bây giờ, khi người dùng mở ứng dụng, họ sẽ được xác thực.

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

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

Bước 3

Nếu bạn đã thiết lập authenticatedRoute trong bộ định tuyến, trang này sẽ được hiển thị khi người dùng mở lại ứng dụng.

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

Đăng xuất người dùng

await Auth.logout();

Xác thực người dùng trong ứng dụng Flutter của bạn.

Tìm hiểu thêm

Authenticated Route Authenticating Users Retrieving Auth Data Đăng xuất

Bước 1

Tạo biểu mẫu

terminal

metro make:form RegisterForm

Bước 2

Chỉnh sửa biểu mẫu

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

Bước 3

Sử dụng biểu mẫu trong widget

register_page.dart

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

Quản lý, xác thực và gửi dữ liệu tất cả tại một nơi với Nylo Forms.

Tìm hiểu thêm

Xác thực Managing Data Field Styling Initial Data

Bước 1

Tạo widget quản lý trạng thái

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

Bước 2

Use CartIcon.action("clear_cart")

another widget

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

Quản lý trạng thái mạnh mẽ cho widget trong ứng dụng Flutter của bạn.

Tìm hiểu thêm

Vòng đời Hành động trạng thái

Bước 1

Tạo sự kiện

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

Bước 2

Phát sự kiện

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

Phát sự kiện và lắng nghe chúng trong ứng dụng của bạn.

Tìm hiểu thêm

Phát sự kiện Lắng nghe sự kiện

Lên lịch chạy tác vụ một lần

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

Lên lịch chạy tác vụ một lần sau một ngày cụ thể

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

Lên lịch chạy tác vụ một lần mỗi ngày

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

Lên lịch các tác vụ chạy một lần hoặc hàng ngày trong ứng dụng Flutter của bạn.

Tìm hiểu thêm

Lên lịch một lần sau ngày Lên lịch hàng ngày

Bước 1

Tạo dịch vụ 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);
    }
}

Bước 2

Gọi API từ trang của bạn

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

Dịch vụ API tinh gọn với phân tích JSON tự động, bộ nhớ đệm và interceptor.

Tìm hiểu thêm

Yêu cầu GET Interceptor Biến đổi JSON Bộ nhớ đệm

Bước 1

Lưu dữ liệu an toàn

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

Bước 2

Đọc với ép kiểu

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

Lưu trữ cục bộ an toàn với ép kiểu, hết hạn TTL và bộ sưu tập.

Tìm hiểu thêm

Lưu dữ liệu Đọc dữ liệu Bộ sưu tập Backpack

Bước 1

Thêm tệp ngôn ngữ của bạn

lang/en.json

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

Bước 2

Dịch văn bản trong widget của bạn

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

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

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

Hỗ trợ đa ngôn ngữ với tệp JSON, tham số và RTL.

Tìm hiểu thêm

Bản dịch Tham số Chuyển đổi ngôn ngữ Hỗ trợ RTL

Bước 1

Tạo trung tâm điều hướng

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

Bước 2

Chuyển đổi bố cục dễ dàng

// Bottom navigation
NavigationHubLayout.bottomNav()

// Top navigation
NavigationHubLayout.topNav()

// Journey / wizard flow
NavigationHubLayout.journey()

Xây dựng thanh điều hướng dưới, trên hoặc luồng hành trình với duy trì trạng thái.

Tìm hiểu thêm

Điều hướng dưới Điều hướng trên Luồng hành trình Huy hiệu

Được cộng đồng yêu thích

Nhà phát triển nói gì về Nylo Website

Tham gia thảo luận

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 Cho ứng dụng hiện đại

Mọi thứ bạn cần để xây dựng

Định tuyến

Quản lý trạng thái

Kết nối mạng

Biểu mẫu

Xác thực

Metro CLI

Tạo mọi thứ từ terminal

Tích hợp API dễ dàng

Công cụ mạnh mẽ để sáng tạo

Được cộng đồng yêu thích

Flutter
Micro-framework
Cho ứng dụng hiện đại