NFlutter

Documentation

NFlutter plugin on Jetbrains Marketplace

Card

Example: Flutter Hello World counter written with NFlutter

NFlutter

Introduction to NFlutter

NFlutter is a DSL (Mini Language) designed for Flutter Widgets development.

NFlutter acts as a powerful code generator, transforming concise NFlutter code into standard Dart (gen.dart file), optimizing the creation of Flutter widgets and nesting structures.
Drawing inspiration from indentation based languages, NFlutter simplifies syntax by eliminating brackets and commas, making Flutter/Dart development more intuitive and efficient.
Ideal for developers focused on productivity and code clarity in Flutter projects.

The N in NFlutter

Initially, NFlutter stood for ‘No brackets, No commas’, or ‘No distractions’, emphasizing its goal to eliminate syntactical clutter. However, over time, it has come to represent ‘Neat Flutter’, reflecting its effectiveness in creating neat and clean code.

Key Features

Quick Start

Requirements

Installation Steps

Creating NFlutter File

To start using NFlutter in your project:

  1. In IntelliJ IDEA, navigate to Menu > File > New.

  2. Select “NFlutter File” (or use the shortcut Ctrl+Alt+N).

  3. Name your file with a .nf extension (e.g., simple.nf).

By following these steps, you’ll have the necessary environment set up to begin developing with NFlutter. The .nf files you create will allow you to write Flutter code using the NFlutter DSL, which will be automatically transpiled into Dart code.

Hello World in NFlutter

This will demonstrate how NFlutter simplifies the Flutter code while maintaining the same functionality.

  1. Create a New NFlutter File:

    • In IntelliJ IDEA, create a new file named simple.nf

  2. Write the NFlutter Code:

    • Write the following NFlutter code into simple.nf:
import 'package:flutter/material.dart';

class Simple extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return <nf>
      Column =
        children: []=
          Text = 'This is NFlutter' maxLines: 2
          Text = 'Hello World'
    </nf>
  }
}

     Understanding the Code

  1. Save and Generate Dart code:
  1. Open the Preview Pane

NFlutter also includes a handy Preview Pane feature to visualize the Dart code generated from your NFlutter code.

NFlutter Grammar

Understanding the grammar of NFlutter is key to effectively using the DSL. The primary component of this grammar is the <nf></nf> Tag.

1. <nf></nf> Tag

return <nf>
  Text = 'hello'
</nf>

return Text('hello');
Auto Completion for <nf></nf> Tag


2. <nf nosc> Tag (no semicolon)


3. <dart></dart> Tag

The <dart></dart> tag in NFlutter serves a specific purpose within the DSL, allowing the integration of standard Dart code directly within an NFlutter code section.

Text = <dart> (a > b) ? 'a' : 'b' </dart>

Text = ((a > b) ? 'a' : 'b')


4. The Equals Sign (=) as Dart Brackets

In NFlutter, the equals sign (=) is used to replace the traditional use of brackets in Dart, simplifying function and constructor calls. Understanding how to use = is crucial for writing concise and readable NFlutter code.

Functionality

Argument Placement Options

There are two ways to place arguments relative to the = sign:

  1. Single Line Arguments:
Text = 'This is NFlutter' maxLines: 2
  1. Multi-Line Indented Arguments:
Text =
  'This is NFlutter'
  maxLines: 2


5. ‘[]=’ for Dart Collections

In NFlutter, the ‘[]=’ symbol is used to replace the traditional collection definitions (like lists or arrays) in Dart. Understanding its usage is essential for handling collections efficiently in NFlutter.

Functionality

Argument Placement

Column =
  children: []=
    Text = 'hello'
    Text = 'world'

Defining Empty Collections


6. Expressions in NFlutter

NFlutter allows the use of simple Dart expressions as values for arguments, streamlining the integration of dynamic values within the DSL.

Handling Expressions

style: Theme.of(context).primaryTextTheme.titleLarge


7. Lambdas in NFlutter

NFlutter simplifies the inclusion of lambda functions in your code, supporting both arrow and braces styles for lambda syntax.

Supported Lambda Styles

//Arrow Lambda
onTap: () => context.go("/page1")
//Braces Lambda
onTap: () { context.go("/page1"); }


Seamless Integration with Dart

NFlutter is designed not just to simplify Flutter development with its own syntax but also to allow effortless integration with standard Dart code. This feature is especially useful in scenarios where the more verbose Dart syntax might be preferred or required.

How Integration Works

Examples of switching between NFlutter to Dart and back:
Column =
 children: []=
   const Text = 'Welcome to NFlutter'
   // Dart block starts
   (a > b? const Text('a') : const Text('b'))
   // Dart block ends
   const Text = 'End of example'

Navigator.of(context, rootNavigator: true).push<void> =

TextStyle = color: Colors.grey[800]

style: TextStyle =
  background: (Paint()
    ..color = Colors.red
    ..strokeWidth = 20
    ..strokeJoin = StrokeJoin.round
    ..strokeCap = StrokeCap.round
    ..style = PaintingStyle.stroke)

IconButton =
  icon: const Icon = Icons.search
  tooltip: 'Search'
  onPressed: () { // Dart block starts
    showDialog('Search pressed');
  } // Dart block ends

<dart> if(10>11) Text('a') else Text('b') </dart>


Editing Features in NFlutter

NFlutter offers several editing features to facilitate a smoother coding experience, especially when working with its unique syntax.

1. Move Argument Feature (Move Statement Up/Down)

NFlutter simplifies the process of reordering arguments in a multi-line argument list. This feature is particularly useful when you need to adjust the sequence of widgets or parameters in your Flutter code.

How to Use Move Argument


2. Indenting blocks of code


3. Single Line to Multi Line Arguments Conversion


4. Fix Indentation on Deletion

Automatic Indentation Fix: When you delete a portion of code in an NFlutter code section, NFlutter attempts to automatically preserve and correct the indentation of the subsequent code.


Plugin Features

1. Preview Pane

NFlutter includes a Preview Pane feature to visualize the Dart code generated from your NFlutter code.

Opening the Preview Pane


2. Structure View Tool Window in NFlutter

NFlutter extends its integration with common IDE features by supporting the Structure view tool window. This functionality is particularly useful for navigating and understanding the hierarchical structure of NFlutter code.

Using the Structure View with NFlutter

Benefits


3. Debugger

NFlutter supports debugging of Flutter applications using the standard Dart debugger. While it currently does not offer debugging specifically for NFlutter syntax, it fully integrates with Dart debugging tools.

Using the Debugger

Note: For a more comprehensive debugging experience, especially for UI and performance aspects, consider using the Flutter plugin alongside NFlutter.


4. Creating NFlutter File

To create a new NFlutter .nf file, navigate to Menu > File > New. select “NFlutter File” (or use the shortcut Ctrl+Alt+N).


5. Trigger Code Generation in NFlutter


Common IDE Supported Features in NFlutter

NFlutter’s integration with common IDE features enhances the developer’s experience by streamlining various aspects of coding and navigation.

Here’s some of IDE features that are compatible with NFlutter:


Support and Contact Information

This site is open source. Improve this page.