Flutter
微框架
用于现代应用

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

网络请求

轻松的 API 集成

编写简洁、可维护的 API 服务，支持自动 JSON 解析、错误处理和请求拦截器。

了解更多关于网络请求

探索

强大的创建工具

构建您下一个 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()
        ]
    );
});

为您的 Flutter 应用构建复杂的路由、界面和 UI 页面。

了解更多

添加路由页面导航路由守卫深度链接

步骤 1

认证用户

String userToken = "eyJhbG123...";

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

步骤 2

现在，当您的用户打开应用时，他们将被认证。

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

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

步骤 3

如果您在路由器中设置了 authenticatedRoute，那么当用户再次打开应用时，将显示此页面。

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

用户登出

await Auth.logout();

在您的 Flutter 应用中认证用户。

了解更多

Authenticated Route Authenticating Users Retrieving Auth Data 登出

步骤 1

创建表单

terminal

metro make:form RegisterForm

步骤 2

修改您的表单

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

步骤 3

在小部件中使用表单

register_page.dart

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

使用 Nylo Forms 在一个地方管理、验证和提交数据。

了解更多

验证 Managing Data Field Styling Initial Data

步骤 1

创建状态管理小部件

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

步骤 2

Use CartIcon.action("clear_cart")

another widget

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

为您的 Flutter 应用程序中的小部件提供强大的状态管理。

了解更多

生命周期状态操作

步骤 1

创建您的事件

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

步骤 2

分发事件

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

在您的应用程序中分发事件并监听它们。

了解更多

分发事件监听事件

安排任务运行一次

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

在特定日期后安排任务运行一次

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

安排任务每天运行一次

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

在您的 Flutter 应用程序中安排任务运行一次或每天运行。

了解更多

在日期后安排一次每日一次安排

步骤 1

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

步骤 2

从页面调用 API

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

优雅的 API 服务，支持自动 JSON 解析、缓存和拦截器。

了解更多

GET 请求拦截器 JSON 转换缓存

步骤 1

安全保存数据

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

步骤 2

带类型转换读取

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

安全的本地存储，支持类型转换、TTL 过期和集合。

了解更多

保存数据读取数据集合背包

步骤 1

添加您的语言文件

lang/en.json

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

步骤 2

在小部件中翻译文本

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

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

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

通过 JSON 文件、参数和 RTL 支持多语言。

了解更多

翻译参数语言切换 RTL 支持

步骤 1

创建导航中心

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

步骤 2

轻松切换布局

// Bottom navigation
NavigationHubLayout.bottomNav()

// Top navigation
NavigationHubLayout.topNav()

// Journey / wizard flow
NavigationHubLayout.journey()

构建底部导航、顶部导航或旅程流程，支持状态维护。

了解更多

底部导航顶部导航旅程流程徽章

深受社区喜爱

开发者对此的评价 Nylo Website

加入讨论

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 微框架 用于现代应用

构建所需的一切

路由

状态管理

网络请求

表单

身份验证

Metro CLI

从终端创建任何内容

轻松的 API 集成

强大的创建工具

深受社区喜爱

Flutter
微框架
用于现代应用