Flutter
マイクロフレームワーク
モダンアプリのための
Nylo はどのプロジェクトにも同じ堅牢な土台(ルーティング、状態管理、ネットワーク、フォーム、認証)を用意します。だから1つ目のファイルではなく、1つ目の機能から始められます。
構築に必要なすべて
6つの柱に、1つの規約。それぞれに Metro のジェネレーター、妥当なデフォルト、そして抜け道が用意されています。中身は変わらず素の Flutter です。
ルーティング
ガード、型付きパラメータ、トランジション、ディープリンクに対応した宣言的ルーティング。
状態管理
コントローラー、ライフサイクルフック、手間のかからない永続化を備えたリアクティブな状態管理。
ネットワーキング
モデルの自動デコードとリクエストインターセプターを備えた API サービスクラス。
フォーム
フィールドを一度宣言するだけで、バリデーション・型変換・データバインディングが付いてきます。
認証
独自の作り込みなしで、セッション管理・トークン保存・ルートガードが使えます。
Metro CLI
1つのコマンドでページ、モデル、コントローラー、フォーム、テーマを生成。
ターミナルから何でも作成
Metro はページ、モデル、コントローラー、ウィジェットなどを生成します。しかも隅に置き去りにするのではなく、ルーターとフォルダ構成にきちんと組み込まれた状態で。
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 サービスを書けます。ページに Dio の定型コードは不要です。
ネットワーキングについてもっと詳しく実際に書くコードで確かめてください
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ページを構築。
もっと詳しくユーザーを認証する
String userToken = "eyJhbG123...";
await Auth.authenticate(data: {"token": userToken});
これで、ユーザーがアプリを開くと認証されます。
final userData = Auth.data();
// {"token": "eyJhbG123..."}
bool isAuthenticated = await Auth.isAuthenticated();
// true
ルーターにauthenticatedRouteを設定していれば、ユーザーが再度アプリを開いた時にこのページが表示されます。
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アプリケーションでユーザーを認証。
もっと詳しくフォームの作成
metro make:form RegisterForm
フォームの編集
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");
}
ウィジェットでフォームを使用
@override
Widget build(BuildContext context) {
return Scaffold(
body: RegisterForm(
submitButton: Button.primary(text: "Submit"),
onSubmit: (data) {
printInfo(data);
},
),
);
}
Nylo フォームでデータの管理、バリデーション、送信をひとつの場所で。
もっと詳しく状態管理ウィジェットの作成
metro make:stateful_widget CartIcon
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}"));
}
}
Use CartIcon.action("clear_cart")
Button.primary(text: "Add to cart",
onPressed: () {
CartIcon.action("clear_cart");
}
)
Flutterアプリケーションのウィジェットのための強力な状態管理。
もっと詳しくイベントの作成
metro make:event Logout
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
);
}
}
イベントの発行
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アプリケーションでタスクを一度または毎日実行するようスケジュール。
もっと詳しくAPIサービスの作成
metro make:api_service User
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);
}
}
ページからAPIを呼び出す
User? user = await api<UserApiService>(
(request) => request.fetchUser(1),
);
自動JSONパース、キャッシュ、インターセプターを備えた洗練されたAPIサービス。
もっと詳しくデータを安全に保存
// 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),
);
型キャストで読み取り
// 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有効期限、コレクションを備えた安全なローカルストレージ。
もっと詳しく言語ファイルを追加
{
"welcome": "Welcome",
"greeting": "Hello {{name}}",
"navigation": {
"home": "Home",
"profile": "Profile"
}
}
ウィジェットのテキストを翻訳
// 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による多言語サポート。
もっと詳しくナビゲーションハブの作成
metro make:navigation_hub base
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),
),
};
});
}
レイアウトを簡単に切り替え
// Bottom navigation
NavigationHubLayout.bottomNav()
// Top navigation
NavigationHubLayout.topNav()
// Journey / wizard flow
NavigationHubLayout.journey()
状態を維持しながらボトムナビ、トップナビ、ジャーニーフローを構築。
もっと詳しくオープンに開発され、本番環境で使われています
“Dart もこのフレームワークも初めてですが、とても気に入っています。”
“Nylo は Flutter に最高のフレームワークです。開発が本当に楽になります。”
@higakijin
“群を抜いて最高のフレームワークです。品質も機能も素晴らしい。”
@2kulfi
“作業が楽になり、時間も短縮できます。素晴らしい仕事です。”
darkreader01
“このフレームワークを見つけたばかりですが、とても感心しました。ありがとう。”
@lepresk
“このフレームワークのコンセプトが本当に気に入っています。”
@Chrisvidal
“皆さんの素晴らしい仕事にお礼を言いたかったんです。”
@youssefKadaouiAbbassi
“@nylo_dev のウェブサイト、本当に大好きだと伝えたくて!”
@esfoliante_txt
“本当にすごいです。お見事!”
FireflyDaniel
次の Flutter アプリは、たった1つのコマンドから
無料、MIT ライセンス、そして中身は変わらずただの Flutter です。
dart pub global activate nylo_installer