Nylo Micro-framework

Nylo is a micro-framework for Flutter designed to simplify app development. It provides a streamlined project structure and follows an MVC (Model-View-Controller) pattern to help developers build applications more efficiently. Key features include:

• Routing: Managed navigation system.
• Themes and Styling: Built-in support for app appearance.
• Localization: Tools for multi-language support.
• Metro CLI: A command-line interface for generating project files.
• Networking: Elegant API services for handling network requests.
• App Icon Management: Utilities for creating app icons.
• Project Configuration: Centralized configuration management.

To use Nylo, ensure your environment meets the following requirement:

• Flutter: version >= 3.24.0

To change the image displayed during the app's launch on iOS, you can either replace the image files directly in the ios/Runner/Assets.xcassets/LaunchImage.imageset/ directory or use Xcode for a visual approach.

Using Xcode:

1. Open your Flutter project's iOS workspace using the command: open ios/Runner.xcworkspace.
2. In the Xcode Project Navigator, navigate to Runner/Assets.xcassets.
3. Drag and drop your desired images into the asset catalog to replace the existing launch screen assets.

You can get started by cloning the repository directly from GitHub.

git clone https://github.com/nylo-core/nylo.git

To handle networking in Nylo, extend the NyApiService class by creating your own ApiService. This class serves as the central hub for defining your API endpoints, base URL, interceptors, and authentication logic.

Key responsibilities include:

• Overriding baseUrl to point to your API environment variable.
• Defining custom methods that use the network() helper to perform requests.
• Configuring interceptors for global request/response manipulation.
• Implementing authentication via setAuthHeaders.

class ApiService extends NyApiService {
  ApiService() : super(
    decoders: modelDecoders,
    useNetworkLogger: true,
  );

  @override
  String get baseUrl => getEnv('API_BASE_URL');

  Future<Map<String, dynamic>?> githubInfo() async {
    return await network(
      request: (Dio request) => request.get("https://api.github.com/repos/nylo-core/nylo"),
    );
  }
}

The Boot class is the entry point for initializing your Nylo application. You use the nylo() method to return a BootConfig object, which defines the setup and boot lifecycle stages of your application.

• setup: An asynchronous function used to perform initial configuration, such as showing a splash screen or initializing global configurations (e.g., StorageConfig). This runs before providers are booted.
• boot: An asynchronous function that runs after all providers have been booted. This is where you typically call runApp() with your main application widget, passing the Nylo instance to it.

// In your main.dart or entry point
void main() async {
  await Boot.nylo().setup();
  // The setup process handles provider booting and initial app state
}

You can override the default AppConfig values by setting the following environment variables in your environment or .env file:

The LightThemeColors class provides the default color palette for the light theme in Nylo. It extends ColorStyles and organizes colors into logical groups such as general, appBar, and bottomTabBar. You can use these color definitions to ensure your custom UI components remain consistent with the framework's light theme design system.

// Example of accessing light theme colors
final colors = LightThemeColors();

final bgColor = colors.general.background; // Color(0xFFFFFFFF)
final primary = colors.general.primaryAccent; // Color(0xFF0045a0)
final appBarBg = colors.appBar.background; // Colors.white

These styles are useful for low-emphasis actions:

• Outlined Button: Button.outlined allows customizing borderColor and textColor. It uses ButtonSplashStyle.highlight().
• Text Only Button: Button.textOnly provides a button with no background or border, only text. It uses ButtonAnimationStyle.bounce() and ButtonSplashStyle.highlight().
• Transparency Button: Button.transparency creates a button with a transparent background, allowing you to specify a color for the text/content.

// Outlined
Button.outlined(
  text: 'Settings',
  onPressed: () {},
  borderColor: Colors.blue,
  textColor: Colors.blue,
);

// Text Only
Button.textOnly(
  text: 'Learn More',
  onPressed: () {},
  textColor: Colors.grey,
);

// Transparency
Button.transparency(
  text: 'Dismiss',
  onPressed: () {},
  color: Colors.red,
);

The SplashScreen widget provides a pre-configured loading screen containing a Logo and an AnimatedLoader. You can use it as a standalone widget or use the SplashScreen.app() static method to generate a complete MaterialApp instance configured for the splash screen experience.

// Use as a standalone widget
SplashScreen()

// Or generate a full MaterialApp
MaterialApp app = SplashScreen.app();

Use Button.primary for the main action in a view and Button.secondary for alternative actions.

• Primary Button: Uses default primary styling and ButtonAnimationStyle.clickable().
• Secondary Button: Uses a specific background color (Colors.lightGreen.shade800) and white content color by default.

Both use LoadingStyle.skeletonizer() for loading states.

// Primary button
Button.primary(
  text: 'Save Changes',
  onPressed: () => saveData(),
);

// Secondary button
Button.secondary(
  text: 'Cancel',
  onPressed: () => Navigator.pop(context),
);