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統合

自動JSONパース、エラーハンドリング、リクエストインターセプターを備えた、クリーンで保守性の高いAPIサービスを作成。

ネットワーキングについてもっと詳しく

探索する

制作のための強力なツール

次の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 フォームでデータの管理、バリデーション、送信をひとつの場所で。

もっと詳しく

バリデーション 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),
);

自動JSONパース、キャッシュ、インターセプターを備えた洗練されたAPIサービス。

もっと詳しく

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
マイクロフレームワーク
モダンアプリのための