Flutter-to-Neon Transpiler

The Neon Transpiler is an AST (Abstract Syntax Tree) source-to-source code converter that automatically migrates Flutter widget code into native Neon Framework code.

It allows development teams to instantly port existing Flutter screens, design systems, and components to Neon without rewriting them from scratch.


1. Running the Transpiler

The transpiler CLI tool is located at tools/transpiler/main.dart:

dart run tools/transpiler/main.dart [input_directory] [output_directory]

Example:

# Place your existing Flutter files in flutter_input/
dart run tools/transpiler/main.dart ./flutter_input ./lib/neon_compat

The tool analyzes the Dart AST of all .dart files in the input folder and generates Neon-compatible files in the output directory, including a barrel export file neon_compat.dart.


2. Key Transformations

The transpiler automatically performs the following code translations:

  1. Imports Replacement:

    • Strips package:flutter/material.dart and package:flutter/widgets.dart.
    • Injects package:neon_framework/neon.dart.
  2. Base Class Remapping:

    • StatelessWidget ➔ NeonWidget (or Neon StatelessWidget)
    • StatefulWidget ➔ NeonStatefulWidget
    • State<T> ➔ NeonState<T>
  3. Context & Build Signature:

    • Widget build(BuildContext context) ➔ NeonWidget build(NeonBuildContext context)
  4. Keys Standardization:

    • Converts object keys Key('btn') ➔ string identifiers key: 'btn' for native action routing.
  5. Scaffold Elimination:

    • Strips Flutter-specific Scaffold wrappers and normalizes them into Neon's layout hierarchy.

3. Widget & Type Mapping Reference

| Flutter Type / Widget | Neon Framework Equivalent | | :--- | :--- | | ElevatedButton | FilledButton / ElevatedButton | | TextButton | TextButton | | OutlinedButton | OutlinedButton | | IconButton | IconButton | | TextStyle | NeonTextStyle | | EdgeInsets | NeonEdgeInsets | | Alignment | NeonAlignment | | Color | NeonColor | | FontWeight | NeonFontWeight | | MainAxisAlignment | NeonMainAxisAlignment | | CrossAxisAlignment | NeonCrossAxisAlignment | | CircularProgressIndicator | CircularProgressIndicator | | LinearProgressIndicator | LinearProgressIndicator | | ListTile | ListTile | | SnackBar | SnackBar | | Tooltip | Tooltip | | SingleChildScrollView | SingleChildScrollView | | ListView.builder | ListView.builder |


4. AST Transpiler Architecture

The transpiler leverages the official Dart analyzer package:

[Flutter .dart files]
        │
        ▼
[Dart Analyzer AST Parser]
        │
        ▼
[AST Node Visitor & Rewriter]
   ├── Imports Transformer
   ├── Class Declaration Rewriter
   ├── Method Signature Normalizer
   └── Constructor & Parameter Mapper
        │
        ▼
[Emitted Neon Dart Code]