“This is the third day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021.”

Widget level presentation

Today let’s take a look at how Widget hierarchy presentation is implemented in the UME

Let’s take a look at what this looks like. Clicking on a widget takes you to the childenElements page

When we click on an element, we jump to a detail page

The first reaction was that it was the same as yesterday’s Widget, only more detailed, and then we looked for the code.

Sure enough, we see familiar code in the widget_detail_inspector. Dart file

void _inspectAt(Offset? position) {
  final List<RenderObject> selected = HitTest.hitTest(position);
  setState(() {
    selection.candidates = selected;
  });
}
Copy the code

Remember what this method does? Yes, it gets all the widgets that contain the click position, so all you need to do is display the data as a list, and then pass selection. CurrentElement in __InfoPageState! .debugGetDiagnosticchain () and converts element to DetailModel,

The search matches text with the hasMatch method in RegExp

var regExp = RegExp("$query", caseSensitive: false);
if (regExp.hasMatch(model.element.widget.toStringShort())) {
  infoList.add(model);
}
Copy the code

Clicking on Element takes you to _DetailContent to create the layout of the detail page, which uses a FutureBuilder for asynchronous creation and writes an asynchronous method getInfo

Future<List<String>> getInfo() async { Completer<List<String>> completer = Completer(); String string = element.renderObject! .toStringDeep(); List<String> list = string.split("\n"); completer.complete(list); return completer.future; }Copy the code

Turn the renderOject into a string and split it into an array for display through a list.

The hierarchy of the UME is relatively simple, with an additional look at the FutureBuilder component

FutureBuilder

Brief introduction and examples

This component is relatively simple and relatively light, so let’s take a look at the constructor

const FutureBuilder({ Key? key, this.future, this.initialData, required this.builder, }) : assert(builder ! = null), super(key: key);Copy the code

There are only three parameters: Future,initialData, and Builder. Future is the asynchronous method we need to pass in. InitialData is the data to initialize, or we don’t need to pass in

New FutureBuilder<String>(Future: _calculation, // user-defined code that needs to be executed asynchronously, type Future<String> or null variable or function builder: (BuildContext context, AsyncSnapshot<String> snapshot) {//snapshot is a snapshot of the state of _Calculation on the timeline. Switch (snapshot.connectionState) {case ConnectionState.none: return new Text('Press button to start'); Case ConnectionState.waiting: return new Text('Awaiting result... '); // If _calculation is executing, the message is loading default: // If (snapshot.haserror) // If (snapshot.haserror) return new Text('Error: ${snapshot.error}'); Return new Text('Result: ${snapshot.data}'); }},)Copy the code

Snapshot. connectionState is the execution state of the asynchronous function Future. There are four execution states: 1.ConnectionState. None not started 2.ConnectionState. Subsequent to learn) 3. ConnectionState. Waiting loading in 4. ConnectionState. Done to load

The redrawing

If the parent component of FutureBuilder is redrawn, then FutureBuilder will also be redrawn, which will also cause asynchronous methods to be called again, resulting in a waste of resources. By looking at the source code, we can find that FutureBuilder’s redraw mechanism is controlled by whether the future is equal, so if we pass in The future is immutable to prevent FutureBuilder from redrawing, so we can introduce a variable to interface with the Future method and pass the variable to FutureBuilder

var _mFuture;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _mFuture = _future();
  }

 _future() async{
    ...
  }

FutureBuilder(
	future: _mFuture,
	...
)
Copy the code

Ok, today’s source view is over here, as a student of Flutter, I hope you can give me more advice and discuss with me where there are problems