Compiled Product - JSON
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:
2.na
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.
3.pa
pa
indicates a required type. For example, the required parameter in Text
of the sample code: String data
.
4. methodMap
methodMap
represents the method used to return Widget in State
, such as:
class _JsonFileExplainState extends State<JsonFileExplain> {
......
Widget _buildTitle() {
return Text('title');
}
}
**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:
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
**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
**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.add
There is also a case where the $
symbol is used to refer to a local variable or to perform string concatenation (aaaa$_counter
):