Compiled Product - JSON

WubaNovember 19, 2022About 2 min

This article will introduce you to the structure of one of the compiled artifacts, a JSON file.

For ease of explanation, let's illustrate with an example:

import 'package:fair/fair.dart';
import 'package:flutter/material.dart';

()
class JsonFileExplain extends StatefulWidget {
  const JsonFileExplain({Key? key}) : super(key: key);

  
  _JsonFileExplainState createState() => _JsonFileExplainState();
}

class _JsonFileExplainState extends State<JsonFileExplain> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  Widget _buildTitle() {
    return Text('title');
  }

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: _buildTitle(),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: TextStyle(
                  fontSize: 40, color: Color(0xffeb4237), wordSpacing: 0),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

After executing: flutter pub run build_runner build command, a JSON file is generated, let's open the file and see:

{
  "className": "Scaffold",
  "na": {
    "appBar": {
      "className": "AppBar",
      "na": {
        "title": "%(_buildTitle)"
      }
    },
    "body": {
      "className": "Center",
      "na": {
        "child": {
          "className": "Column",
          "na": {
            "mainAxisAlignment": "#(MainAxisAlignment.center)",
            "children": [
              {
                "className": "Text",
                "pa": [
                  "You have pushed the button this many times:"
                ]
              },
              {
                "className": "Text",
                "pa": [
                  "#($_counter)"
                ],
                "na": {
                  "style": {
                    "className": "TextStyle",
                    "na": {
                      "fontSize": 40,
                      "color": {
                        "className": "Color",
                        "pa": [
                          "0xffeb4237"
                        ]
                      },
                      "wordSpacing": 0
                    }
                  }
                }
              }
            ]
          }
        }
      }
    },
    "floatingActionButton": {
      "className": "FloatingActionButton",
      "na": {
        "onPressed": "@(_incrementCounter)",
        "tooltip": "Increment",
        "child": {
          "className": "Icon",
          "pa": [
            "#(Icons.add)"
          ]
        }
      }
    }
  },
  "methodMap": {
    "_buildTitle": {
      "className": "Text",
      "pa": [
        "title"
      ]
    }
  }
}

In the JSON file, there are several important keys:

  • className
  • na -pa
  • methodMap

The following explains the meaning of each key in detail for you.

1. className

className represents the name of the widget, such as the first line of the JSON file: "className": "Scaffold", which corresponds to the Scaffold in the build method:

image.png

2.naopen in new window

na means named optional parameters. For example, the three named optional parameters appBar, body and floatingActionButton of Scaffold in the sample code will be stored in na of the JSON file.

image.png

3.paopen in new window

pa indicates a required type. For example, the required parameter in Text of the sample code: String data.

image.png

4. methodMap

methodMap represents the method used to return Widget in State, such as:


class _JsonFileExplainState extends State<JsonFileExplain> {
  
  ......

  Widget _buildTitle() {
    return Text('title');
  }
}

image.png

**Note that Widget must be returned by return, so that Fair can be parsed correctly. **

Well, here, we have made the meaning of all keys clear. However, maybe you still have questions, the % in the JSON file , @, #, ^ and other symbols mean?

Don't worry, we will continue to introduce you below.

Variables, constants and methods referenced in the layout will be treated as a string when parsed into DSL, like this:

image.png In order to easily distinguish the meaning of different strings when parsing the DSL, we add different special symbols in front of the strings, including:

1.% means that it refers to a method that returns a Widget

image.png **Tips: Note that the % sign will be marked only when the method whose return value is Widget is referenced in the layout. **

2. @ represents a non-Widget method

image.png **Tips: Note that only when the return value of the method referenced in the layout is not a Widget, it will be marked with the @ symbol. The return value can be void or a data type supported by Dart, such as int, String, Boolean, etc. **

3.# means that the reference is an external variable (constant) or a local variable referenced by the $ symbol

External variables (constant) such as: MainAxisAlignment.center, Icons.addimage.png

image.png

There is also a case where the $ symbol is used to refer to a local variable or to perform string concatenation (aaaa$_counter):

image.png

4.^ represents a direct reference to a local instance variable

image.png

Last update:
Contributors: sunzhe03