The Wisefish technology team first introduced Flutter technology to realize client development in the first half of 2018. So far, it has successfully adapted and launched complex product details and publishing business. With the increasing gravity of flutter, we began to make great efforts to control the exception of flutter. At the beginning, the exception rate of flutter in free fish was around a few per thousand for a long time. After our sorting and solution, more than 90% of flutter exceptions were solved.

Exceptions are classified and are mainly divided into two categories, which have a large number of stacks, accounting for about 90% of the whole:

The first class of stacks all point to SETState


     
    
      
    #0      State.setState (package:flutter/src/widgets/framework.dart:1141)
    
      
    #1      _DetailCommentWidgetState.replyInput.<anonymous closure>.<anonymous closure> (package:fwn_idlefish/biz/item_detail/fx_detail_comment.dart:479)
    
      
    #2      FXMtopReq.sendReq.<anonymous closure> (package:fwn_idlefish/common_lib/network/src/mtop_req.dart:32)
    
      
    #3      NetService.requestWithModel.<anonymous closure> (package:fwn_idlefish/common_lib/network/src/net_service.dart:58)
    
      
    #4      _rootRunUnary (dart:async/zone.dart:1132)
    
      
    #5      _CustomZone.runUnary (dart:async/zone.dart:1029)
    
      
    #6      _FutureListener.handleValue (dart:async/future_impl.dart:129)
    
     
Copy the code

The second class of stacks are all related to buildContext


     
    
      
    #0      Navigator.of (package:flutter/src/widgets/navigator.dart:1270)
    
      
    #1      Navigator.pop (package:flutter/src/widgets/navigator.dart:1166)
    
      
    #2      UploadProgressDialog.hide (package:fwn_idlefish/biz/publish/upload_progress_dialog.dart:35)
    
      
    #3      PublishSubmitReducer.doPost.<anonymous closure> (package:fwn_idlefish/biz/publish/reducers/publish_submit_reducer.dart:418)
    
      
    <asynchronous suspension>
    
      
    #4      FXMtopReq.sendReq.<anonymous closure> (package:fwn_idlefish/common_lib/network/src/mtop_req.dart:32)
    
      
    #5      NetService.requestWithModel.<anonymous closure> (package:fwn_idlefish/common_lib/network/src/net_service.dart:58)
    
      
    #6      _rootRunUnary (dart:async/zone.dart:1132)
    
      
    #7      _CustomZone.runUnary (dart:async/zone.dart:1029)
    
     
Copy the code

The first category is obviously related to the life cycle of Element and Sate. The second type has to do with buildContext.

What is buildContext?

Here’s an implementation of getting buildContext in state


     
    
      
    Element get _currentElement => _registry[this];
    
      
    BuildContext get currentContext => _currentElement;
    
     
Copy the code

BuildContext is obviously an Element instance. BuildContext is an interface, and Element is the concrete implementation of buildContext. So all the exceptions above refer to the lifecycle of the flutter Element and state.

State lifecycle

Element and State life cycles

Element is created by widget createElement. The lifecycle state of state is triggered by the Element call.

The most important thing is that the bidirectional binding of Element’s state is formally established at new elment. The bidirectional binding between Element and state is broken during umount.

The relationship between the Activity lifecycle and State

Flutter provides a WidgetsBindingObserver for developers to listen on the ApplifeccleState. AppLifecycleState has four states:


     
    
      
    1.resumed
    
      
    Interface visibility, such as application from background to foreground
    
      
    2.inactive
    
      
    The page retreats to the background or pops up a dialog
    
      
    Not much user input is received in this state, but there is a drawFrame callback
    
      
    3.paused
    
      
    Applications hang, such as backing to the background. Entering this state means that there are no drawFrame callbacks left
    
      
    4.suspending
    
      
    In ios, a state entered after puased that does not have any drawframe callback
    
     
Copy the code

Looking at the Android life cycle and applifeccleState and state,

1. Create

2. Press the home button to go back to the background

3. Come back from the background

4. Back key exit current page (Route pop)

5. Press the back key to exit the application

Dispose state is easy to be ignored in engineering development

Here’s an example:

This example may be excetion in some cases.

After state dispose, element and state will be disconnected and referred to each other. If the developer takes the location information of element or calls setstate to refresh the layout at this time, an exception will be reported.

The most common is excetion resulting from calling setState after some asynchronous logic such as timer, animate, and network requests. It is safe to check whether setState is mounted before calling setState. As follows:

BuildContext use error

Look at an example of incorrect buildContext usage:

The error above is the use of buildContext across the stack. Since the life cycle of OutContext is inconsistent with that of ButtomContext, the OutContext can already be in umount or deActivite when BottomSheet pops up. The correct approach in the above example is to get the focusScopeNode using BottomContext.

We need to be particularly careful with the use of buildContext when passing arguments across the stack (such as Bottomsheet, Dialog, Alert, ProcessDialog, etc.) scenarios.

Not enough? If you want to learn more about flutter development and interesting practical experience, please follow the wechat public account “Xianyu Technology”.

reference

https://github.com/flutter/flutter

https://flutter.io/docs

In depth | 10 minutes to read alibaba senior expert’s share on Flutter Live2018

TensorFlow app “UI 2 Code”

Thousands of online problem playback technology revealed

2018 Double 11· Real-time selection of top goods and excellent products — “Mach”

Pay attention to two-dimensional code, forward-looking technology is in control