First, preparation

② Recommend some websites for learning Flutter:

• Flutter Chinese website: FlutterChina. Club

Bytedance – Happiness in FE team produced by a god, the best choice for entry, nanny level information.

• Dev, 官网 英 文 : Flutter. Cn

Official website information, the most reliable. Version new, full resources, hand – in – hand video teaching and online practice experience.

• Unknown Old Man: Laomengit.com

The most complete Chinese control library, use and demand more appropriate conscience of the official controls, save time, worry and effort. Poking fun at once written in Android UI, Android (ListView, RecycleView) lost in iOS (UITableView, UICollectionView), basic don’t need a custom adapter is iOS. But Android uses XML to write UI, which is very convenient and better than Xib.

• Third party control library: pub.flutter- IO

It’s like Cocoapods for iOS and JCenter for Android. Commonly used third-party libraries can be obtained in Chinese language materials, here is not a list. It is important to note that superimposed dependencies on third-party libraries will cause compatibility failures. In general, use the any version and pub will automatically download the non-conflicting version. In special cases, you need to download the offline library for configuration. Some libraries need to be commented out during compilation, such as hive_generator, which needs to be added for automatically generating the model attribute conversion method. Dart Error: Error: import of dart:mirrors is not supported in the current Dart runtime

• Ali Jet-go: github.com/alibaba/flu…

It is recommended to introduce components in finished products. Unfortunately, Alibaba’s internal enthusiasm for Flutter was lost, possibly due to performance problems with the Idle Fish App, and its maintenance was suspended 2 years ago. Flutter2.2 already has significant performance improvements and ecosystem support.

• Recommend a high copy project: my.oschina.net/u/4493374/b…

Contains high imitation Douyin, Douyu, douban, open source China. It basically contains all the functional sections of the market App.

• GSY personal website: [guoshuyu.cn/home/index/]
• FlutterUnit: [github.com/toly1994328…].

Compared to Flutter-GO, it is much fresher.

2. Functional modules

Walk through the function modules of School Choice Solutions, analyze the knowledge of Flutter used in it, and explain it from the perspective of iOS and Android developers.

1. UI: Everything basedWidget.

In layman’s terms, a StatefulWidget is a mutable control and a StatelessWidget is an immutable control. In terms of UI creation alone, Android Dev has an advantage because XML is also a nested schema. IOS Dev contact SwiftUI or Rx series or RAC is easier to understand, nested UI is the iOS all constraints, attributes, controls, parameters, interaction, animation fusion together, not to control as the main object, the formation of declarative UI. Android native development has a relatively robust pipeline. In terms of ease of development, I feel declarative UIs (+Hot Reload) and responsive programming are trending across all mobile devices.

What is declarative UI? For iOS, For Android

(1) Avoid nesting, in order to encapsulate the governance hell set of dolls

• If you add a single custom Widget endlessly, a complex page can run to thousands of lines, whether it’s solo or multiplayer development. For the later maintainer, the structure adjustment is difficult, the logical interaction entrance is mixed and difficult to distinguish, it is extremely uncomfortable.
• Commonly used UI modules are encapsulated to reduce the amount of code and make the structure clear.
• Bloc mode (understood as MVP) is recommended here, and StatefulWidget is the dominant widget for simple pages, which is ideal for business scenarios where multiple pages share the same data.
• The entire UI layout is wrapped in only 25 lines of code in Bulid.

@override
Widget build(BuildContext context) {
  passValue = ModalRoute.of(context).settings.arguments;
  return Scaffold(
    body: Column(
      children: [
        _getTopSearchView(context), // Top search bar
        Container(
          height: 40.child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemBuilder: (BuildContext context, int position) {
              return getTitleColumn(position, Global.titles[position]);
            },
            itemCount: Global.titles.length,
            controller: firstRowController,
          ),
        ),// Data header
        Expanded(child: Container(child: _getCoreListView())),// Data core area
        _getPageView()getPageView()/ / paging area],),); }Copy the code

• Take part of the UI for example, encapsulating the width, border attributes, centered data, and background color. The code is long, instead of showing with pictures.

② The overall layout of the idea

• The Wrap is nested outside the title search bar, and the streaming layout allows the control to be centered and set the row/column spacing, automatically matching the overall window width. Dropdown, TextFiled and Button are similar controls in iOS and Android. The only difference is that the dynamic value of the control is not directly obtained by the property value of the control, but by TextEditingController monitoring and dynamic string variables.

Wrap(
alignment: WrapAlignment.center,
spacing: 20,
runSpacing: 10,
children: []
)
Copy the code

• Set the data table header to a horizontal ListView, add a ScrollController, and listen to the ScrollController in the data display area to complete synchronous scrolling.

/ / to monitor changes in the first row firstRowController. AddListener (() {double offset = secondedRowController. Offset; double offset1 = firstRowController.offset; if (offset1 ! = offset) { secondedRowController.jumpTo(offset1); }}); / / to monitor changes in the second row secondedRowController. AddListener (() {double offset = secondedRowController. Offset; double offset1 = firstRowController.offset; if (offset ! = offset1) { firstRowController.jumpTo(offset); }});Copy the code

• The UI of the data display area is quite complex. It needs to ensure scrolling in both vertical and horizontal directions, consider the scrolling performance, and show {500 data/page} lazy loading.

It took me two full days to figure this out, starting with the official control DataTable and finding that a lot of code was needed to match the agent method when the custom cell presented different UIs; Poor rolling performance; Not lazy load, then all the code abandoned, re-layout. Benefiting from the flexible processing of iOS UI construction, the author came up with the idea of using horizontal SingleChildScrollView to nest a vertical ListView inside, and ListView was built using itemBuilder. In this way, horizontal and vertical scrolling, performance, lazy loading all have. The operation of “Add/remove” button at the end of a single item can refresh the UI almost without delay.

• Paging area: If the length of Flutter is fixed, it will cause the classic Overflow screen of Flutter UI to Overflow. The yellow and black diagonal stripes display area is UI warning (elevation mark in the test guide book, usually at tunnel mouth 🤣), so the outer layer is nested with SingleChildScrollView. This warning will not appear when the window is small.

When 100 pages/page or other page numbers are changed, the instance variable is used to mark the number of pages, and the array’s getRange method resplits the data, refreshing the ListView and page numbers.

5, macOS App Store launch process (Due to the strict review mechanism of the App Store, you must control the permission, consecutive 5 days of several versions of the rejection, you know. Android Dev can be skipped.)

• During Debug, it is necessary to enable Incoming Connections(Server) because Hot Reload is enabled with this permission, but must be turned off on Release because App does not have a Server type and will be rejected.
• Avoid showing anywhere “Android, Android, Samsung, Huawei, Microsoft” and other apple in all aspects of the opponent’s name, once found, will definitely refuse to review. In particular, the IT news App developed by the author needs to add multiple filtering keywords of “Apple competitors” when IT goes online. When filling in the application introduction, THE author wrote in his technical development experience, “two years of Android development experience” was directly rejected, can only write “two years of zhuo Zhuo experience” 🤣🤣🤣.
• Due to the confidentiality of data, in order to ensure the approval of the App, fake registration mode is adopted, and local registration storage simulates login. The permission after successful registration is the same as that after visitors log in.
• With the author for many years to refuse trial 🤣 trial experience, sum up a principle. Don’t fight it out with Apple. Change whatever you’re told. It’s just a distraction. For example, we tried our best to avoid apple’s internal purchase, and finally only used Alipay to pay. Wechat payment was unavoidable. In those days, MOOC App can be completely circumvented. There is no big man to guide how to do it.