Little knowledge about Flutter

StatelessWidget && StatefulWidget

The StatelessWidget does not require a component to change its internal state

• The scenario in which the build method is called

1. When a StatelessWidget is inserted into the Widget tree
2. When the parent of a StatelessWidget changes its configuration
3. When StatelessWidget depends onInheritedWidgetWhen change occurs

The StatefulWidget component needs to change

• usesetState()managementStatefulWidgetChange of state. (similar to theReactIn thesetState())
• setState()The method will tell youflutterSome state of the framework changes and then calls the component’sbuild() , re-render

conclusion

• Stateful or stateless depends on whether a component has a state change
• If user interaction is required or data changes cause the widget to change, it is stateful
• If a widget is final or immutable, it is stateless

The life cycle

• Overview: Similar to the life cycle of an iOS ViewController,StatelessWidget and StatefulWiget have different life cycles

• Nature:

1. Callback methods (functions).
2. Let developers know what state the widget is currently in

• Function:

1. Listen for events in widgets
2. Initializing data (creating data, sending network requests…)
3. Memory management (destroy data, remove listener, destroy timer…)

• In phase

1. Initialize (insert render tree)
2. State changes (present in the render tree)
3. Destroy (remove from render tree)

StatelessWidget lifecycle function

StatefulWidget lifecycle functions

Pictures fromBlog.csdn.net/u011272795/…

App life cycle

The life cycle of a FLUTTER APP is AppLifecycleState, which is an enumeration:

Enum AppLifecycleState {// The application is visible and responds to user input, /// The application is in an inactive state and does not receive any input from the user. This corresponds to an application or the Flutter host view running in the foreground in an inactive state /// the application transitions to this state when other activities are concerned, Such as split screen applications, phone calls, picture-in-picture applications, /// system dialog boxes or another window /// applications in this state should assume that they may pause. Inactive at any time, /// the application is currently invisible to the user, does not respond to user input, and is running in the background. When the application is in this state, the engine will not /// call the window. onBeginFrame and Window.onDrawFrame callbacks. Paused, /// the application still resides on the Flutter engine, but separated from any host view. /// When the application is in this state, the engine runs without views. When the engine is first initialized, it can be in the process of ///attaching a View or after the view is destroyed due to Navigator Pop. detached, }Copy the code

You can use WidgetsBindingObserver to monitor this.

1. State’s class Mix WidgetsBindingObserver

class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver {
    ...
}
Copy the code

2. Add listener to initState of State:

@override
  void initState(){
    super.initState();
    WidgetsBinding.instance.addObserver(this);
}
Copy the code

3. Dispose dispose dispose dispose dispose dispose dispose dispose dispose dispose

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    WidgetsBinding.instance.removeObserver(this);
  }
Copy the code

4. In the State override didChangeAppLifecycleState

@override
void didChangeAppLifecycleState(AppLifecycleState state) {
  super.didChangeAppLifecycleState(state);
  if (state == AppLifecycleState.paused) {
    // went to Background
  }
  if (state == AppLifecycleState.resumed) {
    // came back to Foreground
  }
}
Copy the code

LocalStorage Persistency of local data

Shared_preferences –> Simple structure, few

The use of shared_Preferences is recommended in small numbers and simple structures. It is similar to AsyncStorage in React Native.

• A simple,asynchronous, persistentkey-valueStorage system;
• inAndroidOn it is based onSharedPreferences;
• iniOSOn it is based onNSUserDefaultsthe

Path_provider – > file

If it’s a larger file (video, music…) Path_provider is recommended.

• Introduced as a package
• On iOS similar to NSFileManager
• Provide access path (filePath: DocumentsDirectory/CacheDirectory..) And literacy
• asynchronous

Sqfite –> large and complex

Sqfite is recommended for large, complex data

• On Android, databases are similar to data/data/ /databases
• On iOS, something like Documents Directory
• Introduced as a package

Application / Pulgin / Package / Module

• Application: Native Flutter engineering. The standard Flutter App project consists of the standard Dart layer and Native platform layer
• Package: A common component of pure Dart.
• Pulgin: iOS and Android differentiation. An implementation that includes both the Dart layer and the Native platform layer (the underlying package for Android or iOS) is uniquepackageFor example,shared_preferencesThe implementation is different on iOS and Android
• Module: Mixed engineering. Flutter functional components,mixedTo an existing Android /iOS project

Pub. dev/ is used to publish the package

Routing and navigation

Navigator + Route(Pages)

• The basic use

Navigator.push(
           context, 
           new MaterialPageRoute(builder: (context) => Page2()));
           
Navigator.pop(context, result);
          
Copy the code

Page passing and callback

Of (context).pushnamed (page3, arguments: "hi"); The callback onPressed: () async {//navigationResult = await navigation. push(context, new MaterialPageRoute(Builder: (context) => Page2())); if (navigationResult == 'from_back') { showDialog( context: context, builder: (context) => AlertDialog( title: Text('Navigation from back'), )); } else if (navigationResult == 'from_button') { showDialog( context: context, builder: (context) => AlertDialog( title: Text('Navigation from button'), )); }} //pop Navigator. Pop (context, 'from_button');Copy the code

Excellent third-party routing

• FlutterBoost

To manage both Native and Flutter pages in your existing application,FlutterBoost handles page mapping and jump for you

• Fluro

Network dio

Native HTTP, tripartite DIO (encapsulated HTTP)

“Todo” juejin. Cn/post / 690536…