! [TOC]

The scene that

Dynamic graph display

Function introduction

A common “evaluation list page”, click on the “evaluation list page” to jump to the “evaluation details page”. In the “Comment details page”, we can see the complete comment content and a large picture of the comment, while the “Comment list page” and “Comment details page” have the function of sharing and liking.

MVC architecture

Architectural view

Engineering structure

  • The outer layer

    The main.dart entry function calls commentapp. dart the project entry for the App

  • widgets

    Dart and COMMENT_list_item. dart are two view components that encapsulate, one is a style for each item of the list, and the other is a style wrapper for the bottom action bar (like, share) style for the comment details page and comment list page

  • screens

    Dart and comment_list.dart correspond to our two “comment Details” and “Comment List” pages.

  • mvc

    The Control and Model classes in the MVC pattern

  • model

    Dart corresponds to the data encapsulation behind each item on the comment_item_model.dart page

Set up steps

Take the likes in comments

  • ColumnControl is a method in comment_widget_pub.dart that encapsulates a view of the bottom action bar and includes “like” and “share” functions.

  • The Con().praise1 method at the arrow is triggered by the View’s onTap event and is a very common way to establish a connection from View to Control

  • Control connects to a View by binding Control to State, such as when the Control is initialized, so that the Control corresponds to the View on each page. Here we simply pass the current state to Control as a method parameter, and then look at the implementation of the Praise2 method in the Control class.

  • Calling the setState method of State in Control has the effect of letting the View refresh itself when Model parameters change.

  • You can directly access the corresponding Model through the Control class, and then do the corresponding data processing in the Model, so that the View and the Model are connected

  • The red arrow is a very common way for Control to access Model data, causing Control to connect to the Model

MVP architecture

Architectural view

Engineering structure

  • The outer layer

    Same as above

  • widgets

    Same as above

  • screens

    Same as above

  • mvp

Take the “Rating list page” for example, Dart implements interfaces in comment_list_iview.dart (such as the onZanValueUpdate method) while comment_list_Presenter implements asynchronous methods such as requestZan.

  • model

    Same as above

Set up steps

Take the likes in comments

  • The View and Presenter are connected by creating a corresponding Presenter object in the ListScreen that simultaneously makes a network request for list data.

  • An asynchronous request is made in CommentListPresenter, where the response data is simulated using a resource file read from assets, and the result is returned to the View for rendering using the onListViewUpdate method in the interface implemented by the View before the request succeeds.

  • Another member variable in CommentListPresenter is Model, where Presenter populates and updates Model data.

Redux architecture

Architectural view

Engineering structure

  • The outer layer

    Same as above

  • actions

    Defines various action types, which can be thought of as a code name for a state change: PraiseAction(like), ShareAction(share), FetchListAction(fetch list data), and so on

  • screens

    Same as above

  • reducer

    The Actions package defines the code for state changes, while the Reducer package describes how specific state changes are made. A Reducer usually corresponds to one or more actions.

  • middleware

    Middleware is an asynchronous method that is executed after an action is triggered and before the Reducer arrives to insert a request evaluation list data.

  • model

    Dart is the state description stored by the Store.

Set up steps

Take the likes in comments

  • ListReducer contains three actions, like, Share, and populate, to manipulate the list data in app_state

  • At the entry point of the App, at the top level, I create a Store object. The Store constructor contains three parameters, Reducer, state initialization, and thunkMiddleWare to handle asynchronous requests.

  • With StoreConnector, you can retrieve the corresponding data from the Store, perform type conversion, and finally produce a View by Bulider.

  • Through StoreProvider dispatch, Reducer,Store, and finally reaction on View (likes +1)

conclusion

  1. In multiple interface interaction scenarios (such as “evaluation details page by manual” thumb up, making the comment of thumb up by the increase in the number 1, then the “evaluation list pages corresponding to the number of thumb up should also increase 1), Reudx state management has a natural advantage, and distinct properties in the story also support according to the condition of local data refresh.
  2. In the case of a standalone interface, MVP is recommended, which is much faster to pick up than Redux.

Follow the “Flutter Programming Guide” wechat official account to reply to “Widgets”, “dart”, “storage” and “plug-ins” for more accurate information. You can also reply to “Three architectures” to obtain the demo source code related to the three architectures of Flutter.