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
마이크로 프레임워크
현대적인 앱을 위한