“This is the 9th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

📝 [Flutter] Learn to cultivate memory, [programmer essential skills]

📔 [Flutter] wechat project combat!

1. Write at the front

In the last article, I have carried out the layout and construction of the head of wechat interface, and the following list is not finished, so today I will continue to write wechat actual combat project, including the custom cell!

  • 【 Basic Grammar 】

Dart uses var, final, and const

Dart Indicates the num of the data type

Dart String of data type

Dart data type list&Map

Dart method and arrow function

Dart’s method passes optional parameters and methods as parameters

Dart, Dart, Dart, Dart

Dart classes and objects in Flutter

Dart constructor of Flutter

Dart factory constructor & singleton & Initializer list

Dart class methods and object operators for Flutter

Inheritance of Flutter Dart

Dart abstract classes and interfaces in Flutter

Dart, Dart, Dart, Dart, Dart, Dart

  • [Collection of Basic Components]

The base component of Flutter [01] Text

[02] Container

[03] Scaffold

[04] Row/Column

The base component of Flutter [05] Image

Base Component [06] Icon of Flutter

Base component [07] Appbar

[08] BottomNavigationBar

The base component of the Flutter [09] Button

  • [Actual Combat Collection of project]

[01] Build the basic framework of [Flutter] wechat project

【02】 My interface construction (PART 1)

GitHub project address

2. List implementation analysis

Let’s first analyze the structure of the List, including pictures, text, left and right, gray intervals and dividing lines between cells.

The whole of a cell must be a Container, and the left and right sides of a cell are also containers. The image and text can be a Container wrapped around a Row, which is the layout of the left and right sides.

The entire list must be a ListView, and the structure between the cells is up and down. You can use columns to layout the list.

3. Customize the cell

To customize the cell, we need to consider the expansibility and see if other pages can also be shared. There are pictures, text and arrows in the cell of my interface.

The cell in the discovery page also has sub-title and sub-image, as follows:

The properties of the cell include title, picture, subtitle, subicon, and arrow. The arrow is available for each cell.

  final String? title;/ / title
  final String? subTitle;/ / subheadings
  final String? imageName;/ / icon
  final String? subImageName;/ / icon
  // constructor
  const MineCell({this.title, this.subTitle, this.imageName, this.subImageName});

Copy the code

The optional arguments in the constructor are enclosed in {},? Type = null; type = null; Swift = null; Swift = null; Swift = null; Swift = null The symbol modifier, which means that the value is not null, will be used in the following code.

In order for the cell to respond to the click event, a GestureDetector needs to wrap around it and implement the click method.

  • left
//left
            Container(
              padding: const EdgeInsets.all(10),
              child: Row(
                children: <Widget>[
                  Image(
                    image: AssetImage(imageName!),
                    width: 20,
                  ),
                  SizedBox(
                    width: 15, ), Text(title!) ,,),)Copy the code

SizedBox can create a fixed size box, with a fixed width and height components, you can set the width and height, here is used for segmentation, space.

  • right
Container(
              padding: EdgeInsets.all(10),
              child: Row(
                children: <Widget>[
                  subTitle != null ? Text(subTitle!) : const Text(''), subImageName ! = null ? Image( image: AssetImage(subImageName!) , width: 12,) : Container(), // arrow const Image(Image: AssetImage('images/icon_right.png'),
                    width: 14()], (,)Copy the code

Now that cell customization is complete, it’s time to implement the list as a whole.

4. ListView implements the list

We import the custom cell header file into my interface mine_page. The general code structure is as follows:

  • The ListView code is as follows
. Part of the code omitted............ children: [const SizedBox(height: 10.).const MineCell(
                      imageName: 'Images/wechat Pay.png',
                      title: 'payment'.).const SizedBox(
                      height: 10.).const MineCell(
                      imageName: 'Images/wechat books.png',
                      title: 'collection'.).// Cell bottom split line
                    Row(
                      children: <Widget>[
                        / /
                        Container(width: 50, height: 0.5, color: Colors.white),
                        / / Container (height: 0.5, color: Colors, grey)],). Part of the code omitted............ ]Copy the code

We use a SizedBox to achieve large gaps between cells. The gap at the bottom of the cell is implemented as follows:

Row(
   children: <Widget>[
   / /
  Container(width: 50, height: 0.5, color:  Colors.white),
  Container(height: 0.5, color: Colors.grey)
        ],
 )
Copy the code

The dividing line at the bottom of the cell does not take up the entire screen width. We can use the left and right sides of the Row layout, and fix a Container with the width and height on the left and a height Container on the right. Then the width will automatically fill up.

The layout of Flutter is convenient and flexible. If you are interested in Flutter, make it your own!

GitHub project address

5. Write in the back

Follow me, more content continues to output

  • CSDN
  • The Denver nuggets
  • Jane’s book

🌹 if you like, give it a thumbs up 👍🌹

🌹 feel harvest, can come to a wave of collection + attention, so as not to find you next time I 😁🌹

🌹 welcome everyone to leave a message exchange, criticism and correction, forwarding please indicate the source, thank you for your support! 🌹