Build the main framework of the project

New wechat chat, address book, found, my four files

At the end of the last article we had the APP TabBar and four corresponding subviews built up, but each subview would have a lot of code in it, and it wouldn’t make sense to put it all in a rootPage file. So we create separate files for each subview and spread the code into each file.For example, chat page, return your Scaffold:

Now we click on the tabBar item and see that there are some highlighted colors and a water ripple effect provided by the Theme of the MaterialApp class. To remove these effects, go to the main.dart file and set the following two properties:

When you click on the item, the text is enlarged. This is the property of the bottomNavigationBarselectedFontSizeIf you set it to 12.0, it will not be larger, as in rootPage. Dart:

Local resource file

Configure the Android startup diagram and app icon

Android and iOS resource files, such as APP ICONS and startup images, need to be configured in the corresponding project files. Now that we’re all iOS developers, let’s just talk about how to configure the Android icon and startup map. Those of you who need some picture resources can go theredownload

When you run it on the Android emulator, you’ll notice that the Android title is not in the middle

There is a property in the AppBar that you can adjust to make it intermediate

Configure common resources

If the resources are needed at both ends, such as our APP’s wechat, address book, discover and my icon. Needs to be configured in the current Flutter project.The pubspec.yaml file is the configuration file for our Flutter project. The assets and the following lines in the file indicate the path of the desired image. You can create an images directory under the root of the Flutter project to store all the images currently required for the flutter. Then you need to manually import one image after another… That’s the disgusting part… To make matters worse, the yamL file must be formatted correctly, including the location. For example, if you use the command + / shortcut when releasing comments, you will have to move your position around a bit.

Implement the discovery page

Set the default discovery page for APP startup

This allows us to develop and debug the discovery page, as we often do when developing native apps. RootPage. Dart’s _currentIndex is set to 2

Configuring the Navigation Bar

Wechat’s navigation bar is grey. And then on Android, the title of the navigation bar is on the left by default, and here you have to set it in the middle. Then instead of white, change the color of the title to black. Then the navigation bar and the body below have a black line that can be setelevationValue of.

Custom discovering a cell

Create a new pages file and put all of your page files in it. Then create a new DISCOVER_cell to implement the custom cell. A cell is supposed to update the UI so it’s supposed to be stateful, but for now we’re just practicing, so we can start with a stateless cell.Next is the code to implement the custom cell (DISCOVER_cell); First of all, observe the cell on the discovery page of wechat. There is an icon and a title on the left, which are necessary, otherwise a complete cell cannot be formed. Then, some cells on the right have sub-icons and sub-titles, and there is a right arrow, which exists for every cell. Based on this information, we can define the attributes that discover_cell should have. As follows:

titleThe title on the left, required parameter

imageNameIcon on the left, mandatory parameter

subTitleThe title on the right, non-mandatory parameter, also called optional parameter

subImageNameThis parameter is optional

As shown, the statement after the four properties, the red error are given, the cursor can be moved to the red letters any error, hold down the option + enter can pop up on the right side of the select menu, the first option should be the new version, I also don’t know how to use, little information on the net, recommend to query the official document. I’m going to be lazy here to check, because we have to choose the second selection lineCreate constructor for final fieldsCreate the constructor. Careful students will findsubTitle.subImageNameIs of typeString?This type is followed by a question mark, which stands for optional arguments, and is very similar to Swift on iOS.

After selecting the create constructor, the system automatically generates a line of code, but this line of code is very long and it does not break lines, which is very ugly. The trick here is to put a number after the last property of the generated code and then press Option + Command + L to reformat the code, and it wraps up.

After the line feed, we found that the two required parameters were incorrect. As usual, we moved the cursor to the error. Holding Option + Enter will prompt us to add the required parametersrequiredThe keyword. This completes the definition of the property.

With the properties defined, it’s time to implement the build method to build the interface. There are a number of ways to position the interface, either the Row, or the Stack plus tourists, whatever gives the interface a glimpse. I’m using the Row layout. The code is as follows:The outer layer of a Row is wrapped in a Container, and the Row contains two more containers representing the left and right subviews. That should seem pretty clear. The ICONS and titles on the left side are mandatory, so there’s nothing to say. Because the right subtitle and subicon are not necessarily exist, so need to do some processing, the Text control if there is no subtitle can display the empty string “”, this is easier to solve. The subicon cannot be said to be an empty Image, so you need to display different controls based on whether the subImageName is empty. If it is, the Image is displayed, and if it is not, a Container placeholder is displayed. The arrow icon on the far right is for every cell and there’s nothing else to say. Now that we have the code to customize Discover_cell, the next step is to improve our discovery page

Improving the discovery page

Once the cell is written, it’s much easier to refine the discovery page. The simplest way to do this is to splice each subcell directly.The ListView in Flutter is not grouped and rows like the UITableView in iOS. The ListView has only rows and combines several rows into a group, separated by a SizedBox, and separated by a Row(because the left side of the dividing line is white and the right side is gray, you need to combine two Containers).

The font size and icon size are not set for the subtitle and subicon on the right side of the shopping cell, so there may be some problems in display. Just go back to the cell and set it.

Click the cell to switch to a new page

Make the cell responsive to click eventsGestureDetector

Flutter provides oneGestureDetectorClass to detect gestures, and it has a child property where we can put our UI code. It also responds to various gestures, and it’s handled in different properties, so if we click on the cell, that’s the onTap property. In addition to onTap, we have onTapDown,onTapCancel. Where onTapCancel is touching and leaving, onTapDown is pressing and getting called, onTap is pressing and releasing. After implementing the following code, try it out for yourself and see the difference.

Realize the jump between pages

After clicking “Find Cell”, you need to jump to its corresponding detail page, which requires a detail page. You can create a new discover_child_page. Dart file and add the page code in it. You can also make a copy of an existing blank file, such as the mine_page. Dart file, which contains only the basic my page code, and can be used with a few modifications. Either way, after creating DISCOVER_CHILD_page. Dart, the page code is as follows:Some properties of the detail page should be passed in from the outside, such as title. So we define a title attribute.Before displaying our title on the current page, we used our properties in StatelessWidget. How do we use our properties in StatefulWidget? Properties are preceded by widgets.This is where the details page is almost complete.

Go back to the click method in the cell to make the click jump. There’s a little bit of a parallel here to iOS in that you’re using a navigation controller class. Flutter also uses a class called navigationNavigator. Call the following method.The Navigator. Of (context). Push ()The parameter to push() requires a Route type, which is used hereMaterialPageRouteClass,MaterialPageRouteThe constructor returns a Widget, which is the page we need to jump to. The code is as follows:As mentioned earlier, in Flutter, you can use the => form if the function body has only one line of code, so the above can be abbreviated like this:

Implement stateful DISCOVER_cell

Example Change discover_cell to StatefulWidget

The native wechat APP has a gray background when you click on the cell, which changes back to its original color when you release it. Now let’s do this. So our Discover_Cell needs to change from a StatelessWidget to a StatefulWidget. So we’re going to indent the build method, and we’re going to add a minus sign to command, and we’re going to add a minus sign to the right of zero.The bulid method is then overridden, followed by the property and constructor. Finally, delete the original StatelessWidget class. An error will pop up in the build method_DiscoverCellStateClassDiscoverCellProperty of, so we put in front of the propertywidget.It’ll be ok.

Click to achieve the graying requirements

We talked about the timing of the onTap method, the onTapDown method, the onTapCancel method. This requirement is implemented by updating the status in these three methods. The code is as follows: